Android FragmentTabHost底部选项卡实现

Posted 2020-10-21 头一回

记录一下底部选项卡的实现，很常见的代码，大神勿嘲笑。

说一下思路，在activity底部要放上FragmentTabHost放上选项，几个无所谓，每个选项卡都对应一个fragment，点击选项卡颜色改变可以用selector（选择器）来实现，焦点选中的时候一个颜色，失去焦点的时候，另一个颜色。

首先，activity布局

<?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="com.example.sdtz.wenmingweifang.MainActivity">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/fl">

    </FrameLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#ffffff"
        android:gravity="center"
        android:orientation="vertical">
        <android.support.v4.app.FragmentTabHost
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/fl"
            android:id="@+id/tabHost">

        </android.support.v4.app.FragmentTabHost>
    </LinearLayout>
</RelativeLayout>

acitivity中主要代码的代码，其中view1,view2.....就是选项卡的内容，一般就是一张图片，下面一段文字（首页啥的），标红的部分，就是每个界面的fragment，可以在各个fragment中写每个界面的代码

 tabHost = (FragmentTabHost) findViewById(R.id.tabHost);
        view = LayoutInflater.from(getBaseContext()).inflate(R.layout.pop_window1,null);
        view1 = LayoutInflater.from(getBaseContext()).inflate(R.layout.shouye_view,null);
        view2 = LayoutInflater.from(getBaseContext()).inflate(R.layout.shouye_2_view,null);
        view3 = LayoutInflater.from(getBaseContext()).inflate(R.layout.shouye_3,null);
        view4 = LayoutInflater.from(getBaseContext()).inflate(R.layout.shouye_4,null);
        view5 = LayoutInflater.from(getBaseContext()).inflate(R.layout.shouye_5,null);
        try{
            tabHost.setup(this,getSupportFragmentManager(),R.id.fl);
            Fragment mainFragment = new MianFragment();
            TabHost.TabSpec tabSpec0 =
                    tabHost.newTabSpec(str[0]).setIndicator(view1);
            tabHost.addTab(tabSpec0,mainFragment.getClass(),null);

            Fragment SecondFragment = new SencondFragment();
            TabHost.TabSpec tabSpec2 =
                    tabHost.newTabSpec(str[1]).setIndicator(view2);
            tabHost.addTab(tabSpec2,SecondFragment.getClass(),null);

            Fragment ShezhiFragmet = new ShezhiFragment();
            TabHost.TabSpec tabSpec1 =
                    tabHost.newTabSpec(str[2]).setIndicator(view3);
            tabHost.addTab(tabSpec1,ShezhiFragmet.getClass(),null);

            Fragment MoreFragment = new MoreFragment();
            TabHost.TabSpec tabSpec4 =
                    tabHost.newTabSpec(str[3]).setIndicator(view4);
            tabHost.addTab(tabSpec4,MoreFragment.getClass(),null);


            Fragment MeFragment = new MeFragment();

            TabHost.TabSpec tabSpec5 =
                    tabHost.newTabSpec(str[4]).setIndicator(view5);
            tabHost.addTab(tabSpec5,MeFragment.getClass(),null);
        }catch (Exception e){
            e.printStackTrace();
        }

下面是选项卡的xml,标志的部分就是 选择器，标记的部分就是选择器，用来选项卡的颜色变化

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_marginTop="@dimen/y10"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:src="@drawable/shouye_view_select"
        android:id="@+id/img"/>
    <TextView
        android:layout_marginBottom="@dimen/y10"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:textColor="@drawable/shouye_1_text"
        android:textSize="12sp"
        android:text="首页"/>
</LinearLayout>

选择器代码：

就是有两张不同颜色的图片，焦点选中和不选中切换不同的图片，android:state_selected="true"，就是焦点选中，

文字的选择器也是一样，切换不同的颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:drawable="@drawable/home_on">
    </item>

    <item android:drawable="@drawable/home">

    </item>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:color="#fd0101">
    </item>

    <item  android:color="#000000">

    </item>
</selector>

至此，选项卡的代码已经基本完成，调试一下就可以运行了