Android FragmentTabHost底部選項(xiàng)卡實(shí)現(xiàn)

記錄一下底部選項(xiàng)卡的實(shí)現(xiàn)，很常見的代碼，大神勿嘲笑。

說(shuō)一下思路，在activity底部要放上FragmentTabHost放上選項(xiàng)，幾個(gè)無(wú)所謂，每個(gè)選項(xiàng)卡都對(duì)應(yīng)一個(gè)fragment，點(diǎn)擊選項(xiàng)卡顏色改變可以用selector（選擇器）來(lái)實(shí)現(xiàn)，焦點(diǎn)選中的時(shí)候一個(gè)顏色，失去焦點(diǎn)的時(shí)候，另一個(gè)顏色。

首先，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.....就是選項(xiàng)卡的內(nèi)容，一般就是一張圖片，下面一段文字（首頁(yè)啥的），標(biāo)紅的部分，就是每個(gè)界面的fragment，可以在各個(gè)fragment中寫每個(gè)界面的代碼

 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();
        }

下面是選項(xiàng)卡的xml,標(biāo)志的部分就是選擇器，標(biāo)記的部分就是選擇器，用來(lái)選項(xiàng)卡的顏色變化

<?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="首頁(yè)"/>
</LinearLayout>

選擇器代碼：

就是有兩張不同顏色的圖片，焦點(diǎn)選中和不選中切換不同的圖片，android:state_selected="true"，就是焦點(diǎn)選中，

文字的選擇器也是一樣，切換不同的顏色

<?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>

至此，選項(xiàng)卡的代碼已經(jīng)基本完成，調(diào)試一下就可以運(yùn)行了

posted @ 2018-01-19 09:53 頭一回閱讀(785) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部

頭一回

Android FragmentTabHost底部選項(xiàng)卡實(shí)現(xiàn)

公告