利用FragmentTanHost实现底部导航栏

说明

底部导航栏的实现方法是越来越多了，前面介绍了四种实现底部导航栏的方式，链接在这里。

至于孰优孰劣就要各位看官甄别啦。

今天的这种方式我认为是一种很不错的实现方式，利用FragmentTabHost+Fragment来完成。

下图是完成效果：

1.官方介绍

FragmentTabHost继承自我们熟悉的TabHost，Google是这么介绍它的：

Special TabHost that allows the use of Fragment objects for its tab content. When placing this in a view hierarchy, after inflating the hierarchy you must call setup(Context, FragmentManager, int) to complete the initialization of the tab host.

还提供了一个例子，有兴趣的可以去看

Example

从介绍来看，要使用FragmentTabHost就离不开Fragment以及setup()这个方法。

看看工程目录：

2.布局文件

activity_main.xml ：

<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"
android:background="@color/gray"
tools:context="com.example.administration.homepagerapplication2.MainActivity">

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</android.support.v4.view.ViewPager>

<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="gone">
</FrameLayout>

<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white">

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />

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

</LinearLayout>

由于我们要使用滑动效果，所以我这里加了ViewPager；如果只是一个单纯的底部导航栏，那么下面这部分代码是少不了的：

<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="gone">
</FrameLayout>

<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white">

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />

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

注意：

FragmentTabHost中间的那个Framelayout虽然什么都没做，也没有用到，但是确实必不可少的。

除此之外，我们还需要一个指示器，用来装载图片和文字：

tab_indicator.xml:

<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:id="@+id/tab_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>

<TextView
android:id="@+id/tab_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="@drawable/tab_txt_selector"/>

</LinearLayout>

四个Fragment的布局文件，这里我只贴出一个：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:textSize="20sp"
android:textColor="@color/colorAccent"
android:text="通讯录"/>

</LinearLayout>

3.资源文件

非常重要的图片选择器：

tab_icon_message_selector.xml:

<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/iworker_message_normal" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/iworker_message_press" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/iworker_message_press" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/iworker_message_press" />
<!-- Pressed -->
<item android:state_selected="true" android:state_pressed="true" android:drawable="@mipmap/iworker_message_press" />
<item android:state_pressed="true" android:drawable="@mipmap/iworker_message_press" />

</selector>

这里我也之贴出一个，其余三个一葫芦画瓢；

文字选择器：

tab_txt_selector.xml:

<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:color="@color/tab_tv_normal" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@color/tab_tv_selected" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@color/tab_tv_selected" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@color/tab_tv_selected" />
<!-- Pressed -->
<item android:state_selected="true" android:state_pressed="true" android:color="@color/tab_tv_selected" />
<item android:state_pressed="true" android:drawable="@color/tab_tv_selected" />

</selector>

4.Java文件

MainActivity.java:

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener,TabHost.OnTabChangeListener{
private LayoutInflater mInflater;
private FragmentTabHost mTabHost;
private ViewPager mViewPager;
private List<Tab> mTabs = new ArrayList<>(4);
private List<Fragment> list = new ArrayList<>();

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

initTab();//初始化tab
initPager();
}

private void initPager() {
Fragment messageFragment = new MessageFragment();
Fragment tableFragment = new TableFragment();
Fragment contactsFragment = new ContactsFragment();
Fragment mineFrament = new MineFragment();

list.add(messageFragment);
list.add(tableFragment);
list.add(contactsFragment);
list.add(mineFrament);

//绑定Fragment适配器
mViewPager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(), list));
}

private void initTab() {
mViewPager = (ViewPager) findViewById(R.id.viewPager);
mViewPager.addOnPageChangeListener(this);

Tab tab_home = new Tab(R.string.iworker_tab_home,R.drawable.tab_icon_message_selector,MessageFragment.class);
Tab tab_table = new Tab(R.string.iworker_tab_table,R.drawable.tab_icon_table_selector, TableFragment.class);
Tab tab_contacts = new Tab(R.string.iworker_tab_address,R.drawable.tab_icon_contact_selector, ContactsFragment.class);
Tab tab_mine = new Tab(R.string.iworker_tab_myself,R.drawable.tab_icon_mine_selector, MineFragment.class);

mTabs.add(tab_home);
mTabs.add(tab_table);
mTabs.add(tab_contacts);
mTabs.add(tab_mine);

mInflater = LayoutInflater.from(this);
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this,getSupportFragmentManager(),R.id.viewPager);

mTabHost.setOnTabChangedListener(this);
/*
*给每个Tab按钮设置图标、文字和内容
*/
for(Tab tab:mTabs){
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(getString(tab.getTitle()));
tabSpec.setIndicator(buildIndicator(tab));
// 将Tab按钮添加进Tab选项卡中
mTabHost.addTab(tabSpec,tab.getFragment(),null);

}

mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);//设置分割线不可见
mTabHost.setCurrentTab(0);//默认选择第一项Tab
}

/**
* 给每个Tab按钮设置图标和文字
*/
private View buildIndicator(Tab tab) {
View view = mInflater.inflate(R.layout.tab_indicator,null);
ImageView icon = (ImageView) view.findViewById(R.id.icon_tab);
TextView text = (TextView) view.findViewById(R.id.txt_indicator);

icon.setBackgroundResource(tab.getIcon());
text.setText(tab.getTitle());
return view;
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {

mTabHost.setCurrentTab(position);//根据位置Postion设置当前的Tab

}

@Override
public void onPageScrollStateChanged(int state) {

}

@Override
public void onTabChanged(String s) {
int position = mTabHost.getCurrentTab();
mViewPager.setCurrentItem(position);//把选中的Tab的位置赋给适配器，让它控制页面切换

}
}

最后，Fragment是必须的：

public class ContactsFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_contacts,null);
}
}

注意：

mTabHost.setup(this,getSupportFragmentManager(),R.id.viewPager);

在这个方法中，如果不需要viewPager效果，把R.id.viewpager换成R.id.realtabcontent（FrameLayout的id）。

因为需要重复用到图片、文字、以及Fragment类，因此我对此进行了封装，bean文件如下：

Tab.java:

public class Tab {
private  int title;
private  int icon;
private Class fragment;

public Tab(int title, int icon, Class fragment) {
this.title = title;
this.icon = icon;
this.fragment = fragment;
}

public int getTitle() {
return title;
}

public void setTitle(int title) {
this.title = title;
}

public int getIcon() {
return icon;
}

public void setIcon(int icon) {
this.icon = icon;
}

public Class getFragment() {
return fragment;
}

public void setFragment(Class fragment) {
this.fragment = fragment;
}
}

ViewPager的适配器：

MyFragmentAdapter.java:

public class MyFragmentAdapter extends FragmentPagerAdapter {
private List<Fragment> fragmentList;
public MyFragmentAdapter(FragmentManager fm,List<Fragment> list) {
super(fm);
this.fragmentList = list;
}

@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}

@Override
public int getCount() {
return fragmentList.size();
}
}