本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布
xiaoguo.gif
上图效果大家应该都很熟悉了，基本市面上的App都会用到这种布局效果，实现起来也很简单，就是上面一个ViewPager，下面一个线性布局
TabContainerView就是把实现逻辑封装起来，让开发者可以通过更简单的代码实现这种布局效果，提高工作效率。
使用
TabContainerView tabContainerView = (TabContainerView) findViewById(R.id.container_tab);
//设置适配器配置数据
tabContainerView.setAdapter(new MainTabContainerAdapter(getSupportFragmentManager(),
new Fragment[] {new MainFragment(), new WorkFragment(), new AppFragment(), new MineFragment()}));
就是这么简单，调用两行代码就可以实现了，不过需要我们自己创建一个适配器，MainTabContainerAdapter就是自己创建的，它需要继承BaseAdapter来实现里面的抽象方法，BaseAdapter是此项目当中自定义的抽象类。
思路
TabContainerView是一个RelativeLayout布局，整个布局由两部分组成：底部布局，内容布局
底部布局为一个LinearLayout布局，里面的单个Tab也是一个LinarLayout布局；中间的内部区域是一个ViewPager。
实现
项目由6个类组成
//暴露给开发者的View，主要负责添加底部和ViewPager的布局
TabContainerView
//底部布局的单个布局，包含单个布局的文本，图片属性信息
Tab
//底部布局的整体布局，负责Tab布局的添加和状态切换
TabHost
//Tab选中的监听
OnTabSelectedListener
//适配器提供了底部文本内容，图片内容，fragment内容
BaseAdapter
//内容ViewPager的适配器
TabViewPagerAdapter
我们先来分析调用的第一行代码
TabContainerView tabContainerView = (TabContainerView) findViewById(R.id.container_tab);
看看它的构造方法
public TabContainerView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
构造方法调用了init方法
private void init(Context context, AttributeSet attrs) {
initStyle(context, attrs);
initTabHost(context);
initDivideLine(context);
initViewPager(context);
tabHost.setContentViewPager(contentViewPager);
}
分别初始化了自定义属性，底部的TabHost，分割线，ViewPager等；
initStyle就是初始化一些自定义的属性，没啥好说的；
我们来看下initTabHost方法
private void initTabHost(Context context) {
tabHost = new TabHost(context);
addView(tabHost.getRootView());
}
public TabHost(Context context) {
this.context = context;
initView();
}
private void initView() {
rootView = new LinearLayout(context);
rootView.setOrientation(LinearLayout.HORIZONTAL);
rootView.setId(R.id.linearlayout_tab);
RelativeLayout.LayoutParams rootViewLp = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
rootViewLp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
rootView.setLayoutParams(rootViewLp);
}
initTabHost方法里创建了一个TabHost，TabHost的构造方法里调用initView方法，方法创建RootView布局，设置长宽, 位置等属性，然后把TabHost的根布局添加到TabContainerView布局当中。
initDivideLine方法创建一个分割线View添加到布局当中
initViewPager方法创建一个ViewPager添加到布局当中
下面再来看看第二行代码里面做了些什么事情
tabContainerView.setAdapter(new MainTabContainerAdapter(getSupportFragmentManager(),
new Fragment[] {new MainFragment(), new WorkFragment(), new AppFragment(), new MineFragment()}));
public void setAdapter(BaseAdapter baseAdapter) {
setAdapter(baseAdapter, 0);
}
public void setAdapter(BaseAdapter baseAdapter, int index) {
if (baseAdapter == null) return;
tabHost.addTabs(baseAdapter, textSize, textColor, selectedTextColor);
contentViewPager.setAdapter(new TabViewPagerAdapter(baseAdapter.getFragmentManager(), baseAdapter.getFragmentArray()));
setCurrentItem(index);
}
BaseAdapter是个抽象类
public abstract class BaseAdapter {
/**
* tab数量
*/
public abstract int getCount();
/**
* tab text 数组
*/
public abstract String[] getTextArray();
/**
* tab icon 数组
*/
public abstract int[] getIconImageArray();
/**
* tab icon 选中 数组
*/
public abstract int[] getSelectedIconImageArray();
/**
* fragment 数组
*/
public abstract Fragment[] getFragmentArray();
public abstract FragmentManager getFragmentManager();
}
它提供了容器当中需要的文本，图片，还有内容区的fragment信息
方法里调用TabHost的addTabs方法给TabHost添加Tab
tabHost.addTabs(baseAdapter, textSize, textColor, selectedTextColor);
public void addTabs(BaseAdapter baseAdapter, int textSize, int textColor, int selectedTextColor) {
int count = baseAdapter.getCount();
String[] textArray = baseAdapter.getTextArray();
int[] iconImageArray = baseAdapter.getIconImageArray();
int[] selectedIconImageArray = baseAdapter.getSelectedIconImageArray();
if (count == 0 || textArray == null || iconImageArray == null || selectedIconImageArray == null) return;
if (textArray.length != count || iconImageArray.length != count || selectedIconImageArray.length != count) return;
for (int i = 0; i < count; i++) {
Tab tab = new Tab(context, textArray[i], textSize, textColor, selectedTextColor, iconImageArray[i], selectedIconImageArray[i], i);
addTab(tab);
}
}
通过方法得到文本，图片等数组，然后通过循环创建Tab对象，添加到TabHost布局当中，我们来看看Tab的构造方法
public Tab(Context context, String text, int textSize, int textColor, int selectedTextColor, int iconImage, int selectedIconImage, int index) {
this.context = context;
this.text = text;
this.textSize = textSize;
this.textColor = textColor;
this.selectedTextColor = selectedTextColor;
this.iconImage = iconImage;
this.selectedIconImage = selectedIconImage;
this.index = index;
init();
}
private void init() {
initView();
rootView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tabSelected();
}
});
}
private void initView() {
rootView = new LinearLayout(context);
rootView.setOrientation(LinearLayout.VERTICAL);
rootView.setGravity(Gravity.CENTER_HORIZONTAL);
rootView.setPadding(0, 25, 0, 0);
LinearLayout.LayoutParams rootViewLp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
rootViewLp.weight = 1;
rootView.setLayoutParams(rootViewLp);
/**
* icon view
*/
iconImageView = new ImageView(context);
iconImageView.setImageResource(iconImage);
iconImageView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
rootView.addView(iconImageView);
/**
* text view
*/
textTextView = new TextView(context);
textTextView.setText(text);
textTextView.setTextColor(textColor);
textTextView.setTextSize(textSize);
textTextView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
rootView.addView(textTextView);
}
Tab的构造方法就是给文本和图片的属性设值，添加监听，创建Tab需要的文本，图片布局
接下来给ViewPager设置适配器，添加fragment
contentViewPager.setAdapter(new TabViewPagerAdapter(baseAdapter.getFragmentManager(), baseAdapter.getFragmentArray()));
这样底部的Tab和内容区域的ViewPager数据都填充完成了
接下来需要设置点击状态的切换，从Tab类的init方法里可以看出给RootView添加了点击事件，onClick方法会调用TabHost设置给Tab的监听回调类，下面的代码就是TabHost给Tab添加的监听
//TabHost里给Tab添加Tab选中的监听
private void addTabChangeListener(Tab tab) {
tab.setOnTabSelectedListener(new OnTabSelectedListener() {
@Override
public void onTabSelected(Tab tab) {
contentViewPager.setCurrentItem(tab.getIndex());
}
});
}
onTabSelected方法里设置contentViewPager当前选中的Item，然后会回调到ViewPager监听类OnPageChangeListener的onPageSelected方法
public void onPageSelected(int position) {
tabHost.onChangeTabHostStatus(position);
Tab selectedTab = tabHost.getTabForIndex(position);
if (onTabSelectedListener != null && selectedTab != null)
onTabSelectedListener.onTabSelected(selectedTab);
}
首先调用onChangeTabHostStatus方法
public void onChangeTabHostStatus(int index) {
for (int i = 0, size = tabList.size(); i < size; i++) {
Tab tab = tabList.get(i);
tab.setTabIsSelected(index == i ? true : false);
}
}
.```
循环TabList，根据index判断Tab状态的选中与否
然后调用回调监听onTabSelectedListener的onTabSelected方法
到此为止整个项目的实现过程就分析完了。
####结束语
整个项目的实现并没有任何难度，把它封装成一个View是为了以后在项目中更好更快的实现这种效果，提升开发效率
想看完整代码的可以移步至：https://github.com/chenpengfei88/TabContainerView
欢迎大家Star，Follow，谢谢。
TabContainerView V2.0版本（http://www.jianshu.com/p/9aaff43bbf9f ）
我还有一篇封装布局状态切换的文章，大家有兴趣也可以看看
http://www.jianshu.com/p/9d53893b3eda
网友评论