1.使用FragmentTabHost实现底部导航栏

image.png

MainActivity布局如下：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="activity.MainActivity">
    <!--真正的内容视图,用于展示Fragment-->
    <FrameLayout
        android:id="@+id/real_tab_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <!--tabhost,必须使用系统的id-->
    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!--tabcontent,必须使用系统的id-->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0"/>
    </android.support.v4.app.FragmentTabHost>
</LinearLayout>

每个tab的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:background="#f4eeee"
              android:gravity="center"
              android:orientation="vertical"
              android:padding="8dp">
    <!--图片-->
    <ImageView
        android:id="@+id/icon_tab"
        android:layout_width="32dp"
        android:layout_height="32dp"/>
    <!--文字-->
    <TextView
        android:id="@+id/txt_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="主页"
        android:textColor="@color/selector_tab_text"/>

</LinearLayout>

MainActivity代码如下：

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";
    private FragmentTabHost mTabHost;
    private LayoutInflater mInflater;
    private List<Tab> mTabs;
    private CartFragment mCartFragment;
    public CnToolbar mCnToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //通过ID拿到Tab的控件
        initView();
        //把5个装有图标，文字，Fragment的Tab对象，都添加到List集合
        initTabData();
        //把List集合里的元素都添加到Tab里面
        initTab();

    }

    private void initTab() {

        //TabHost调用setup，设置一个需要展示内容页的布局ID
        mTabHost.setup(this, getSupportFragmentManager(), R.id.real_tab_content);

        //遍历装了5个对象的集合
        for (Tab tab : mTabs) {
            //通过Tab里的文字，得到一个TabSpec
            TabHost.TabSpec tabSpec = mTabHost.newTabSpec(getString(tab.getTitle()));
            //使用mInflater把一个XML布局设置为一个View，并设置这个View里面的文字和图片
            View view = buildIndicator(tab);
            //指定视图作为选项卡指示器。
            tabSpec.setIndicator(view);
            //最后把TabSpec和Fragment都放到TabHost里面
            mTabHost.addTab(tabSpec, tab.getFragment(), null);
        }
    }


    private void initTabData() {

        //新建5个分页，并且添加到List当中，便于管理，其中的图标我们使用了selector进行状态选择，即选中的时候会变色。
        Tab home = new Tab(R.drawable.selector_icon_home, R.string.home, HomeFragment.class);
        Tab hot = new Tab(R.drawable.selector_icon_hot, R.string.hot, HotFragment.class);
        Tab category = new Tab(R.drawable.selector_icon_category, R.string.category, CategoryFragment.class);
        Tab car = new Tab(R.drawable.selector_icon_cart, R.string.car, CartFragment.class);
        Tab mine = new Tab(R.drawable.selector_icon_mine, R.string.mine, MineFragment.class);


        //把5个页面都添加到集合
        mTabs = new ArrayList<>(5);
        mTabs.add(home);
        mTabs.add(hot);
        mTabs.add(category);
        mTabs.add(car);
        mTabs.add(mine);

    }

    //给一个Tab的View添加文字和图片
    private View buildIndicator(Tab tab) {
        View view = mInflater.inflate(R.layout.tab_indicator, null);
        ImageView icon = (ImageView) view.findViewById(R.id.icon_tab);
        TextView tv = (TextView) view.findViewById(R.id.txt_indicator);
        icon.setBackgroundResource(tab.getIcon());
        tv.setText(tab.getTitle());
        return view;
    }


    private void initView() {
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mCnToolbar = (CnToolbar) findViewById(R.id.toolbar);
        //由于要把Layout文件设置成View，这里要用到Inflater
        mInflater = LayoutInflater.from(this);
    }
}

图片选择器，这个需要在添加到对象的时候设置 Tab home = new Tab(R.drawable.selector_icon_home, R.string.home, HomeFragment.class);

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

    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home" />
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
    <!-- Pressed -->
    <item android:state_selected="true" android:state_pressed="true" android:drawable="@mipmap/icon_home_press" />
    <item android:state_pressed="true" android:drawable="@mipmap/icon_home" />

</selector>

文字颜色选择器，这个需要在设置Tab布局的时候就定义好了 android:textColor="@color/selector_tab_text"/>

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

    <item android:state_selected="true" android:color="#eb4f38" />
    <item android:state_active="true" android:color="#eb4f38"/>
    <item android:state_selected="false" android:color="#a9b7b7" />
    <item android:state_active="false" android:color="#a9b7b7"/>

</selector>