使用Fragment+ViewPager+FragmentTabHost实现底部菜单栏

设计思路

Fragment：存放不同选项的页面内容
ViewPager：实现页面的左右滑动效果
FragmentTabHost：点击切换选项卡

这种方式我们可以分三步走：
第一步：实现ViewPager功能
第二步：实现FragmentTabHost功能
第三步：加监听事件，实现联动。

主体布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <android.support.v4.app.FragmentTabHost android:id="@+id/tab_host" android:layout_width="match_parent" android:layout_height="wrap_content"/>
</LinearLayout>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

实现ViewPager功能

要准备适配器和Fragment实例。
适配器MyFragmentPagerAdapter：

package com.ti.fragmenttabhostdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter { private List<Fragment> list; public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> list) { super(fm); this.list = list; } @Override public Fragment getItem(int i) {// 根据Item的位置返回对应位置的Fragment，绑定item和Fragment return list.get(i); } @Override public int getCount() {// 设置Item的数量 return list.size(); }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
 

fragment实例：

List<Fragment> list = new ArrayList<Fragment>();
HomeFragment fragment1 = new HomeFragment();
MeFragment fragment2 = new MeFragment();
list.add(fragment1);
list.add(fragment2);

  

 

  
1
  
2
  
3
  
4
  
5
 

ViewPager绑定适配器：

// 绑定Fragment适配器
vp.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), list));

  

 

  
1
  
2
 

这样ViewPager的功能就有了。

实现FragmentTabHost功能

FragmentTabHost的每一个tab标签都可以设置不同的视图布局（即为不同的tab指定不同的布局文件）。本例中，设置每个tab标签为上部分是图片下部分是文字
。
定义底部菜单栏tab的布局

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:background="#ffffff" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/tab_imageview" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/tab_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000000" />
</LinearLayout>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

定义tab选中状态的drawable文件
区分tab的选中状态，如home的drawable文件tab_home_btn.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 指定选择时和未被选择的图片 --> <item android:drawable="@drawable/home_selected" android:state_selected="true" /> <item android:drawable="@drawable/home" />
</selector>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

其他依次类推。

设置Tab选中时的背景颜色变化

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@android:color/white"/><!--被选中状态--> <item android:state_focused="true" android:drawable="@android:color/white"/><!--被焦点聚焦状态--> <item android:state_pressed="true" android:drawable="@android:color/white"/><!--被按下状态--> <item android:drawable="@android:color/white"/><!--默认状态-->
</selector>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

准备FragmentTabHost初始化的数据

 // 每个tab标签要关联的fragment private Class fragmentArray[] = { HomeFragment.class, MeFragment.class }; // 每个tab标签要显示的图片 private int imageArray[] = { R.drawable.tab_home_btn, R.drawable.tab_me_btn}; // 每个tab标签要显示的文字 private String textArray[] = { "首页", "我的"};

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

初始化FragmentTabHost

 // 绑定viewpager mFragmentTabHost.setup(this, getSupportFragmentManager(), R.id.vp); int count = textArray.length; // 新建Tabspec选项卡并设置Tab菜单栏的内容和绑定对应的Fragment for (int i = 0; i < count; i++) { // 给每个Tab按钮设置标签、图标和文字 // 将xml布局转换为view对象 View view = layoutInflater.inflate(R.layout.tab_content, null); // 利用view对象，找到布局中的组件,并设置内容，然后返回视图 ImageView mImageView = view.findViewById(R.id.tab_imageview); TextView mTextView = view.findViewById(R.id.tab_textview); mImageView.setBackgroundResource(imageArray[i]); mTextView.setText(textArray[i]); TabHost.TabSpec tabSpec = mFragmentTabHost.newTabSpec(textArray[i]).setIndicator(view); // 将Tab按钮添加进Tab选项卡中，并绑定Fragment mFragmentTabHost.addTab(tabSpec, fragmentArray[i], null); mFragmentTabHost.setTag(i); // 设置Tab被选中的时候颜色改变 mFragmentTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_tab_background); }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
 

第三步:实现联动

// 实现OnPageChangeListener接口,监听Tab选项卡的变化，然后通知ViewPager适配器切换界面
// 设置页面切换时的监听器,让ViewPager滑动的时候能够带着底部菜单联动
vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int i, float v, int i1) { //  表示在前一个页面滑动到后一个页面的时候，在前一个页面滑动前调用的方法 } @Override public void onPageScrollStateChanged(int arg0) { //arg0 ==1的时候表示正在滑动，arg0==2的时候表示滑动完毕了，arg0==0的时候表示什么都没做，就是停在那。 } @Override public void onPageSelected(int arg0) { // arg0是表示你当前选中的页面位置Postion，这事件是在你页面跳转完毕的时候调用的。 TabWidget widget = mFragmentTabHost.getTabWidget(); int oldFocusability = widget.getDescendantFocusability(); // 设置View覆盖子类控件而直接获得焦点 widget.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS); // 根据位置Postion设置当前的Tab mFragmentTabHost.setCurrentTab(arg0); // 设置取消分割线 widget.setDescendantFocusability(oldFocusability); }
});

// 实现setOnTabChangedListener接口,目的是为监听界面切换），然后实现TabHost里面图片文字的选中状态切换
// 当点击下面菜单时,上面的ViewPager能滑动到对应的Fragment
mFragmentTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { @Override public void onTabChanged(String tabId) {// Tab改变的时候调用 int position = mFragmentTabHost.getCurrentTab(); vp.setCurrentItem(position);// 把选中的Tab的位置赋给适配器，让它控制页面切换 }
});

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
 

Demo已上传到GitHub欢迎下载学习

文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_40763897/article/details/98664889