Android --- TabHost 切换时,改变选项卡下字体的状态(大小、加粗、默认被选中第一个)

上效果图:

在这里插入图片描述在这里插入图片描述

MiddleFragment.java 代码如下

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import com.gxuwz.yixin.R;
import java.util.List;
import java.util.Map;


// 初中 Fragment
public class MiddleFragment extends Fragment {

    private View view;
    TabHost tabHost;
    String subjectArray[]; // 科目
    private List<Map<String,Object>> dataList;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

        view = inflater.inflate(R.layout.fragment_middle,container,false);


        initView();
        tabHost.setup();
        //动态载入xml
        inflater.inflate(R.layout.fragment_first_grade, tabHost.getTabContentView());
        inflater.inflate(R.layout.fragment_two_grade, tabHost.getTabContentView());

        initData();
        initEvent();
        initAdapter();
        return view;
    }
    public void initView() {
        subjectArray = getContext().getResources().getStringArray(R.array.subjects);
        tabHost = view.findViewById(android.R.id.tabhost);
    }
    public void initData() {

        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator(subjectArray[0]).setContent(R.id.tab01));
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator(subjectArray[1]).setContent(R.id.tab02));

        //设置 TabWidget 的布局参数
        final TabWidget tabWidget = tabHost.getTabWidget();

        // tabHost 选项卡改变的时候
        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
                for(int i = 0; i < tabWidget.getChildCount(); i++) {
                    View tabView = tabWidget.getChildAt(i);
                    TextView tv= tabWidget.getChildAt(i).findViewById(android.R.id.title);

                    if(tabHost.getCurrentTab() == i) { // 选中
                        tabView.setBackgroundResource(R.drawable.tabhost_selected_true);
                        tv.setTextSize(14);
                    } else { // 未选中
                        tabView.setBackgroundResource(R.drawable.tabhost_selected_false);
                        tv.setTextSize(12);
                    }
                }
            }
        });

        for (int i = 0; i < tabWidget.getChildCount(); i++) {
            View view = tabWidget.getChildAt(i);
            LinearLayout.LayoutParams layoutParams =  (LinearLayout.LayoutParams) view.getLayoutParams();

            // 设置默认的选项卡背景颜色与字体大小
            TextView textView = tabWidget.getChildAt(i).findViewById(android.R.id.title);
            //view.setBackgroundColor(R.color.grey2);
            textView.setTextSize(12);

            // 设置第一个选项卡被选中时的样式
            TextView tvDefault = tabWidget.getChildAt(0).findViewById(android.R.id.title);
            tabWidget.getChildAt(0).setBackgroundResource(R.drawable.tabhost_selected_true);
            tvDefault.setTextSize(14);


            //获取tabs图片;
            //ImageView iv=(ImageView)tabWidget.getChildAt(i).findViewById(android.R.id.icon);

            layoutParams.width = LinearLayout.LayoutParams.MATCH_PARENT;
            layoutParams.height = 130;
            layoutParams.weight = 0.0f;
        }
    }
    public void initEvent() {
    }
    public void initAdapter() {
    }
}

fragment_middle 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.MainActivity">
    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="90dp"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="top">
            </TabWidget>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </FrameLayout>

        </LinearLayout>
    </TabHost>
</RelativeLayout>

res/values/string.xml 中加入

<string-array name="subjects">
        <item>语文</item>
        <item>数学</item>
</string-array>

选中的背景样式

tabhost_selected_true.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 连框颜色值 -->
    <item android:height="110dp" android:gravity="center_vertical">
        <shape>
            <solid android:color="@color/blue" />
        </shape>
    </item>
    <!-- 主体背景颜色值 -->
    <item android:left="10px" >
        <!--边框里面背景颜色 白色-->
        <shape>
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

未选中的背景样式

tabhost_selected_false.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/grey2"></solid>
</shape>

如果缺少哪一个文件,请在评论区留言

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
TabHostAndroid 中常用的一个布局控件,可以用于实现选项卡的效果。要实现左侧选项卡,可以通过以下步骤: 1. 在布局文件中,使用 TabHost 控件,并设置其高度和宽度为 match_parent。 2. 在 TabHost 中添加一个 TabWidget 控件,用于显示选项卡标签。 3. 在 TabHost 中添加一个 FrameLayout 控件,用于显示选项卡内容。 4. 在代码中,使用 TabHost.newTabSpec() 方法创建一个新的选项卡,设置其标签和内容,并将其添加到 TabHost 中。 5. 在 TabWidget 中设置选项卡标签的样式,例如设置背景颜色、文字颜色等等。 6. 在 TabHost 中设置选项卡切换方式,例如设置为点击切换或滑动切换。 以下是一个简单的示例代码,演示如何实现左侧选项卡: ``` <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> <TabWidget android:id="@android:id/tabs" android:layout_width="wrap_content" android:layout_height="match_parent" android:background="#f0f0f0" android:orientation="vertical" android:layout_alignLeft="@android:id/tabcontent" android:layout_alignStart="@android:id/tabcontent"> </TabWidget> ``` Java 代码: ``` TabHost tabHost = findViewById(android.R.id.tabhost); tabHost.setup(); // 创建一个新的选项卡 TabHost.TabSpec spec1 = tabHost.newTabSpec("tab1"); spec1.setIndicator("选项卡1"); spec1.setContent(R.id.tab1); tabHost.addTab(spec1); // 创建另一个选项卡 TabHost.TabSpec spec2 = tabHost.newTabSpec("tab2"); spec2.setIndicator("选项卡2"); spec2.setContent(R.id.tab2); tabHost.addTab(spec2); // 设置选项卡切换方式 tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { @Override public void onTabChanged(String tabId) { // 处理选项卡切换事件 } }); // 设置选项卡标签的样式 TabWidget tabWidget = tabHost.getTabWidget(); for (int i = 0; i < tabWidget.getChildCount(); i++) { View view = tabWidget.getChildAt(i); view.setBackgroundColor(Color.parseColor("#ffffff")); TextView textView = view.findViewById(android.R.id.title); textView.setTextColor(Color.parseColor("#000000")); } ``` 以上代码中,通过添加两个选项卡实现左侧选项卡的效果。您可以根据需要添加更多的选项卡,并自定义选项卡标签的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梁同学与Android

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值