android 底部tab效果,Android TabContainerView 实现底部导航栏效果 V1.0

本篇文章已授权微信公众号 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