Android底部导航栏—FragmentTabHost+Fragment

介绍

Android开发中使用底部菜单栏的频次非常高，主要的实现手段有以下：

- TabWidget

- 隐藏TabWidget，使用RadioGroup和RadioButton

- FragmentTabHost

- 5.0以后的TabLayout

- 最近推出的 Bottom navigation

案例1：简单使用

简单使用 FragmentTabHost

1 在布局文件使用 FragmentTabHost，并提供 Fragment 的容器

2 在 Activity 里查找 FragmentTabHost，并使用 setUp 方法关联到 Fragment 的容器

3 向 FragmentTabHost 里添加 Tab，注意 Tab 需要设置 indicate 文本

4 使用newInstance创建fragment

布局文件：

<?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="cn.itcast.demo.MainActivity">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f0f">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:src="@drawable/actionbar_search_icon" />
</android.support.v7.widget.Toolbar>

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f00"
android:orientation="vertical">

<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
//特殊之处，高设置0dp  weight设置1
android:layout_height="0dp"
android:layout_weight="1"></FrameLayout>

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

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#00f"></LinearLayout>
</android.support.v4.widget.DrawerLayout>

</LinearLayout>

MainActivity

public class MainActivity extends AppCompatActivity {

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

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("heihehie");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.app_name,R.string.app_name);
drawerLayout.addDrawerListener(toggle);// 面板展开的监听设置给 Toogle
toggle.syncState();// 初始化 toogle 的绘制内容

// 设置底部栏
FragmentTabHost tabHost = (FragmentTabHost) findViewById(R.id.tabhost);
tabHost.setup(this,getSupportFragmentManager(),R.id.container);// 初始化 tabhost

// 添加一个 tab
TabHost.TabSpec tab1 = tabHost.newTabSpec("news");// 创建tab对象
tab1.setIndicator("资讯");// 设置tab 内容

Bundle arg = new Bundle();
arg.putString("content","资讯界面");

tabHost.addTab(tab1,TestFragment.class,arg);// 将tab添加到底部栏

// 再添加一个 Tab
TabHost.TabSpec tab2 = tabHost.newTabSpec("tweet");
tab2.setIndicator("动弹");
Bundle arg2 = new Bundle();
arg2.putString("content","动弹界面");
tabHost.addTab(tab2,TestFragment.class,arg2);
}

@Override
// 为 Activity 生成菜单，ToolBar已经被设置为标题栏，这个菜单会自动显示到 ToolBar 上
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main,menu);

return super.onCreateOptionsMenu(menu);
}

@Override
// 目录菜单的点击响应
public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()){
case R.id.menu_search:
Toast.makeText(this, "跳转到搜索界面", Toast.LENGTH_SHORT).show();
break;
}

return super.onOptionsItemSelected(item);
}
}

TestFragment

public class TestFragment extends Fragment {

public static TestFragment newInstance(String content){
Bundle arg = getBundle(content);

TestFragment fragment = new TestFragment();
fragment.setArguments(arg);
return fragment;
}

@NonNull
public static Bundle getBundle(String content) {
Bundle arg = new Bundle();
arg.putString("content",content);
return arg;
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
Bundle arg = getArguments();
String content = arg.getString("content");

TextView textView = new TextView(getActivity());
textView.setText(content);
return textView;
}
}

案例 2

1.调用FragmentTabHost的setup方法；

2.创建TabHost.TabSpec对象，每一个对象对应一个item；

3.调用FragmentTabHost的addTab方法，把TabHost.TabSpec对象添加进来。



布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />

<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>

</LinearLayout>

这个文件中需要注意的是，FragmentTabHost跟它里面的FrameLayout中的id都是引入的id，而真正的id写在FragmentTabHost外面的FrameLayout中

tab_item代码如下：

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

<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>

<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textColor="@drawable/selector_tab_text" >
</TextView>

</LinearLayout>

我们定义了五个子item，每个item对应一张图片跟一个标题，相信上面的布局大家都能看懂。每个item对应一个fragment，那么接下来我们把fragment的代码写出来，这里因为f五个ragment的代码差不多，我只给出HomeFragment的代码。fragment_home.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:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页Fragment"
android:textSize="20sp" />

</LinearLayout></span>

HomeFragment.Java代码如下所示：

public class HomeFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_home, container, false);
}
}

HomeFragment.java，这个里面不用讲吧，就是把fragment_home.xml文件中的内容填充到fragment中。接下来，我们还要继续写状态选择器selector，Eclipse在res下新建一个文件夹drawable，里面创建5个图片状态选择器跟一个文字状态选择器，这里图片状态选择器我只贴出一个，selector_icon_home.xml代码如下所示：

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

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

</selector>

这里简单介绍一下，android:state_focused=”false”是没有聚焦状态，相反若为true，则为获得焦点状态。

android:state_pressed=”false”是没有按下状态，相反若为true，则为按下状态。

android；state_selected=”false”是没有被选择状态，相反则被选择。

最后，到了最重要的MainActivity，代码如下：

public class MainActivity extends FragmentActivity {

/**
* 定义FragmentTabHost对象
*/
private FragmentTabHost mTabHost;

/**
* 定义一个布局填充器对象
*/
private LayoutInflater mInflater;

/**
* 定义一个ArrayList来存放Tab
*/
private List<Tab> mTabs = new ArrayList<Tab>(5);

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

initTab();
}

/**
* 初始化Tab
*/
private void initTab() {
Tab tab_home = new Tab(HomeFragment.class, R.string.home, R.drawable.selector_icon_home);
Tab tab_hot = new Tab(HotFragment.class, R.string.hot, R.drawable.selector_icon_hot);
Tab tab_category = new Tab(CategoryFragment.class, R.string.catagory, R.drawable.selector_icon_category);
Tab tab_cart = new Tab(CartFragment.class, R.string.cart, R.drawable.selector_icon_cart);
Tab tab_mine = new Tab(MineFragment.class, R.string.mine, R.drawable.selector_icon_mine);

mTabs.add(tab_home);
mTabs.add(tab_hot);
mTabs.add(tab_category);
mTabs.add(tab_cart);
mTabs.add(tab_mine);

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

for (Tab tab : mTabs) {

TabHost.TabSpec tabSpec = mTabHost.newTabSpec(getString(tab.getTitle()));

tabSpec.setIndicator(buildIndicator(tab));

mTabHost.addTab(tabSpec, tab.getFragment(), null);

}
}

/**
* 给Tab设置图标跟文字
*
* @param tab
* @return
*/
private View buildIndicator(Tab tab) {

View view = mInflater.inflate(R.layout.tab_item, null);
ImageView img = (ImageView) view.findViewById(R.id.imageview);
TextView text = (TextView) view.findViewById(R.id.textview);

img.setBackgroundResource(tab.getIcon());
text.setText(tab.getTitle());

return view;
}

}

看到MainActivity中的Tab了吗？我们创建一个package:com.example.fragmenttabhostdemo.bean，然后在该目录下新建一个java文件，Tab代码如下所示：

public class Tab {

private int title;

private int icon;

private Class fragment;

public Tab(Class fragment, int title, int icon) {
super();
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;
}

}

案例3：彷新浪微博底部栏

1、主tab布局界面，main_tab_layout：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />

<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/maintab_toolbar_bg">

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>

</LinearLayout>

2、Tab按钮选项布局，tab_item_view.xml：

<?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:gravity="center"
android:orientation="vertical" >

<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:padding="3dp"
android:src="@drawable/tab_home_btn">
</ImageView>

<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:textSize="10sp"
android:textColor="#ffffff">
</TextView>

</LinearLayout>

3、fragment布局界面，这里只列出一个，fragment_1.xml：

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ImageView
android:id="@+id/imageview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="@drawable/xianjian01" >
</ImageView>

</LinearLayout></span>

4、Tab选项的自定义按钮资源文件，列出其中一个按钮，tab_home_btn：

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/icon_home_sel" android:state_selected="true"/>
<item android:drawable="@drawable/icon_home_nor"/>

</selector></span>

5、Tab选项按钮背景资源文件，selector_tab_background.xml：

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/home_btn_bg" android:state_pressed="true"/>
<item android:drawable="@drawable/home_btn_bg" android:state_selected="true"/>

</selector></span>

6、主Activity类，MainTabActivity.Java：

public class MainTabActivity extends FragmentActivity{
//定义FragmentTabHost对象
private FragmentTabHost mTabHost;

//定义一个布局
private LayoutInflater layoutInflater;

//定义数组来存放Fragment界面
private Class fragmentArray[] = {FragmentPage1.class,FragmentPage2.class,FragmentPage3.class,FragmentPage4.class,FragmentPage5.class};

//定义数组来存放按钮图片
private int mImageViewArray[] = {R.drawable.tab_home_btn,R.drawable.tab_message_btn,R.drawable.tab_selfinfo_btn,
R.drawable.tab_square_btn,R.drawable.tab_more_btn};

//Tab选项卡的文字
private String mTextviewArray[] = {"首页", "消息", "好友", "广场", "更多"};

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_tab_layout);

initView();
}

/**
* 初始化组件
*/
private void initView(){
//实例化布局对象
layoutInflater = LayoutInflater.from(this);

//实例化TabHost对象，得到TabHost
mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

//得到fragment的个数
int count = fragmentArray.length;

for(int i = 0; i < count; i++){
//为每一个Tab按钮设置图标、文字和内容
TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i]).setIndicator(getTabItemView(i));
//将Tab按钮添加进Tab选项卡中
mTabHost.addTab(tabSpec, fragmentArray[i], null);
//设置Tab按钮的背景
mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_tab_background);
}
}

/**
* 给Tab按钮设置图标和文字
*/
private View getTabItemView(int index){
View view = layoutInflater.inflate(R.layout.tab_item_view, null);

ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
imageView.setImageResource(mImageViewArray[index]);

TextView textView = (TextView) view.findViewById(R.id.textview);
textView.setText(mTextviewArray[index]);

return view;
}
}

7、Fragment页面，FragmentPage1.java：

public class FragmentPage1 extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_1, null);
}
}

案例4：顶部栏导航

主要包括:

(1) 自定义Tab的图片资源和去掉分割线.

(2) 缓存Fragment的布局, 减少填充.

在切换页面时, 控件会调用Fragment的onCreateView, 重新创建页面.

通过缓存页面, 可以增强性能.

1. 布局

FragmentTabHost是原生控件, 并不需要添加其他的maven库.

包括标签组Tabs和页面TabContainer, 标签组固定大小, 页面填充.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"/>

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

</LinearLayout>

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

注意控件的id必须是Android提供的标准id, 即”@android:id”.

Fragment布局, 包含一行文字提示.

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

<TextView
android:id="@+id/tab_tv_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="40sp"
tools:text="Test"/>

</LinearLayout>

Tab布局, 包含一个图片控件.

<?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="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">

<ImageView
android:id="@+id/tab_iv_image"
android:padding="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@null"
tools:src="@drawable/tab_assistant"/>

</LinearLayout>

2. 主页

setup设置页面组合, 却掉分割线etDividerDrawable(null), 设置Tab.

使用自定义的图片资源, newTabSpec设置Fragment的Tag标签.

/**
* 主页, 切换Tab标签显示不同页面.
*
* @author C.L.Wang
*/
public class MainActivity extends AppCompatActivity {

@Bind(android.R.id.tabhost) FragmentTabHost mTabHost;

// 图片
@DrawableRes
private int mImages[] = {
R.drawable.tab_counter,
R.drawable.tab_assistant,
R.drawable.tab_contest,
R.drawable.tab_center
};

// 标题
private String mFragmentTags[] = {
"counter",
"assistant",
"contest",
"center"
};

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

ButterKnife.bind(this);

mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
mTabHost.getTabWidget().setDividerDrawable(null); // 去掉分割线

for (int i = 0; i < mImages.length; i++) {
// Tab按钮添加文字和图片
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mFragmentTags[i]).setIndicator(getImageView(i));
// 添加Fragment
mTabHost.addTab(tabSpec, FragmentTab.class, null);
// 设置Tab按钮的背景
mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.color.pedo_actionbar_bkg);
}
}

// 获得图片资源
private View getImageView(int index) {
@SuppressLint("InflateParams")
View view = getLayoutInflater().inflate(R.layout.view_tab_indicator, null);
ImageView imageView = (ImageView) view.findViewById(R.id.tab_iv_image);
imageView.setImageResource(mImages[index]);
return view;
}
}

3. 切换页

显示不同Tag标签. 缓存页面, 注意关联前, 删除父控件关联. 页面显示Tag信息.

public class FragmentTab extends Fragment {

@Bind(R.id.tab_tv_text) TextView mTvText;

private View mViewContent; // 缓存视图内容

@Nullable @Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
if (mViewContent == null) {
mViewContent = inflater.inflate(R.layout.fragment_tab, container, false);
}

// 缓存View判断是否含有parent, 如果有需要从parent删除, 否则发生已有parent的错误.
ViewGroup parent = (ViewGroup) mViewContent.getParent();
if (parent != null) {
parent.removeView(mViewContent);
}

ButterKnife.bind(this, mViewContent);
return mViewContent;
}

@Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
// 显示Fragment的Tag信息
mTvText.setText(String.valueOf("Page: " + getTag()));
}

@Override public void onDestroyView() {
super.onDestroyView();
ButterKnife.unbind(this);
}
}