android底部导航栏之FragmentTabHost+FrameLayout

最近使用FragmentTabHost+FrameLayout做APP的底部导航栏，感觉非常的快速有效，做个笔记记录下：

1.主页面代码：

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.real_tab_content)
    FrameLayout realTabContent;
    @BindView(R.id.tab_content)
    FrameLayout tabContent;
    @BindView(R.id.tab_host)
    FragmentTabHost tabHost;

    //需要的资源信息
    private final String mTabSpec[]={"head","classify","heart","my"};
    //文字信息
    private final String mIndicator[]={"首页","分类","喜欢","我的"};
    //导航图信息
    private final int mTabImage[]={R.drawable.tab_home_item,R.drawable.tab_classify_item,R.drawable.tab_heart_item,R.drawable.tab_user_item};
    //导航fragment
    private final Class mFragmentClass[]={HomeFragment.class, ClassifyFragment.class, HeartFragment.class, MyFragment.class};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        //设置添加tab
        tabHost.setup(this,getSupportFragmentManager(),R.id.real_tab_content);
        for(int i=0;i<mTabSpec.length;i++){
            tabHost.addTab(tabHost.newTabSpec(mTabSpec[i]).setIndicator(getTabView(i)),mFragmentClass[i],null);
        }
    }

    //设定每一个的TabView
    private View getTabView(int index){
        View view=View.inflate(this,R.layout.tab_item,null);
        ImageView tabImage=view.findViewById(R.id.tab_image);
        TextView tabTitle=view.findViewById(R.id.tab_title);

        tabImage.setImageResource(mTabImage[index]);
        tabTitle.setText(mIndicator[index]);

        return view;
    }
}

2.主页面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.administrator.liveviewdemo.ui.activity.MainActivity">

    <FrameLayout
        android:id="@+id/real_tab_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </FrameLayout>
    <View
        android:background="#333333"
        android:layout_width="match_parent"
        android:layout_height="1dp"></View>
    <android.support.v4.app.FragmentTabHost
        android:id="@+id/tab_host"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <FrameLayout
            android:id="@+id/tab_content"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0">
        </FrameLayout>
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

3.TabView布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/tab_image"
        android:paddingTop="2dp"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:contentDescription="@string/tab_image"/>
    <TextView
        android:id="@+id/tab_title"
        android:textSize="12sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

4.图片资源文件（ps:给出一个做为样式，代码都是一样的只是图片不同而已）：

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