Android底部导航栏——FragmentTabHost+ViewPager+Fragment

前言

前几天写了Android底部导航栏——bottomnavigation结合viewpager的实现这是谷歌官方新发布的技术，是目前实现Android底部栏代码量最少最便捷的一种方式。今天再给大家介绍一种实现底部导航栏的比较好用的方法。注意：实现导航的实现方式有很多，大家可以选择一种自己感觉比较好的用。

一：FragmentTabHost+ViewPager+Fragment

1.1 底部菜单栏实现步骤：

1. 在主xml布局里面定义一个FragmentTabHost控件
2. 定义底部菜单栏布局
3. 定义每个Fragment布局
4. 定义每个Fragment的Java类
5. 定义适配器以关联页卡和ViewPage
6. 定义具体实现的MainActivity

1.2 底部菜单栏xml的书写

MainActivity.xml
在主布局中定义一个FragmentTabHost控件

<?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="android.com.fragmenttabhost.MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/pager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" /><!--装4个Fragment-->    <!--定义FragmentTabHost控件-->    <android.support.v4.app.FragmentTabHost        android:id="@android:id/tabhost"        android:layout_width="fill_parent"        android:layout_height="48dp"        android:background="@android:color/white" ><!--装4个Fragment-->        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="0dp"            android:layout_height="0dp"            android:layout_weight="0" /><!--装Tab的内容-->    </android.support.v4.app.FragmentTabHost></LinearLayout>

定义底部菜单栏的布局，上面是图片，下面是文字

tab_content.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:gravity="center"              android:orientation="vertical"              android:background="#ffffff">    <ImageView        android:id="@+id/iv"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        />    <TextView        android:id="@+id/tv"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text=""        android:textColor="@drawable/textcolor_selector" /></LinearLayout>

定义点击图片和文字颜色变化的selector
tab_chat_selector.xml

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

textcolor_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:color="@color/p_select_color" android:state_pressed="true" />    <item android:color="@color/p_select_color" android:state_focused="true" />    <item android:color="@color/p_select_color" android:state_selected="true" />    <item android:color="@color/p_99_color" /></selector>

定义MainActivity主函数

package android.com.fragmenttabhost;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentTabHost;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.Window;import android.widget.ImageView;import android.widget.TabHost;import android.widget.TabWidget;import android.widget.TextView;import java.util.ArrayList;import java.util.List;/**     /*实现setOnTabChangedListener接口,目的是为监听界面切换），然后实现TabHost里面图片文字的选中状态切换*/        /*简单来说,是为了当点击下面菜单时,上面的ViewPager能滑动到对应的Fragment*/public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener,TabHost.OnTabChangeListener{    private FragmentTabHost mTabHost;    private ViewPager vp;    private LayoutInflater layoutInflater;    private String[] tabText = { "聊天", "朋友", "通讯录", "设置" };    private int[] imageRes = new int[] { R.drawable.tab_chat_selector, R.drawable.tab_friend_selector, R.drawable.tab_contacts_selector, R.drawable.tab_setting_selector };    private List<Fragment> list = new ArrayList<Fragment>();    MyFragmentAdapter mMyFragmentAdapter;    private Class[] fragments = new Class[] { ChatFragment.class, FrientFragment.class, ContactsFragment.class, SettingFragment.class };    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        initView();        initPage();    }    //    控件初始化控件    private void initView() {        vp = (ViewPager) findViewById(R.id.pager);        vp.addOnPageChangeListener(this);//设置页面切换时的监听器        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);        mTabHost.setup(this, getSupportFragmentManager(), R.id.pager);//绑定viewpager        mTabHost.setOnTabChangedListener(this);        /*新建Tabspec选项卡并设置Tab菜单栏的内容和绑定对应的Fragment*/        for (int i = 0; i < tabText.length; i++) {            View view = LayoutInflater.from(this).inflate(R.layout.tab_content, null);            ((TextView) view.findViewById(R.id.tv)).setText(tabText[i]);            ((ImageView) view.findViewById(R.id.iv)).setImageResource(imageRes[i]);            // 给每个Tab按钮设置标签、图标和文字            TabHost.TabSpec tabSpec = mTabHost.newTabSpec(tabText[i])                    .setIndicator(view);            // 将Tab按钮添加进Tab选项卡中，并绑定Fragment            mTabHost.addTab(tabSpec, fragments[i], null);            mTabHost.setTag(i);          /*  mTabHost.getTabWidget().getChildAt(i)                    .setBackgroundResource(R.drawable.textcolor_selector);//设置Tab被选中的时候颜色改变*/        }    }    /*初始化Fragment*/    private void initPage() {        //绑定Fragment适配器        ChatFragment chatFragment=new ChatFragment();        list.add(new ChatFragment());        list.add(new FrientFragment());        list.add(new ContactsFragment());        list.add(new SettingFragment());        vp.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(), list));        mTabHost.getTabWidget().setDividerDrawable(null);    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    //position是表示你当前选中的页面位置Postion，这事件是在你页面跳转完毕的时候调用的    @Override    public void onPageSelected(int position) {        TabWidget widget = mTabHost.getTabWidget();        int oldFocusability = widget.getDescendantFocusability();        widget.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);//设置View覆盖子类控件而直接获得焦点        mTabHost.setCurrentTab(position);//根据位置Postion设置当前的Tab        widget.setDescendantFocusability(oldFocusability);//设置取消分割线    }    @Override    public void onPageScrollStateChanged(int state) {    }    //自动把getCurrentTabView下的所有子View的selected状态设为true. 牛逼!    @Override    public void onTabChanged(String s) {        int position = mTabHost.getCurrentTab();        vp.setCurrentItem(position);//把选中的Tab的位置赋给适配器，让它控制页面切换    }}

这里简单的定义四个fragement就不写了，直接上效果图。

不懂的宝宝们看demo，其实这种方法真的超级简单

demo现在链接地址