偶尔看到一篇文章 封装实践——打造微信底部tab栏就对着敲了一下代码。然后这个感觉很好了我就改了一些东西给大家看看吧。 参考本文原创作者：谷哥的小弟 作者博客地址：http://blog.csdn.net/lfdfhl ###1.新建一个tab的布局文件tab_view
###2.建立一个tabitem的基类来描述相关的属性（有什么可以自己加）这里的isselect就是我自己加上的，你还可以加一个int来重载这个类的构造方法，让他有多种构造方法。
package com.jaydenxiao.androidfire.zhou;
/**
* Created by on 2017/2/28.
*/
public class TabItem{
/**
* 定义一个布尔值来确定这个选项是否是选中状态
*/
public boolean isselect = false;
public int imagenormal;
public int imageselect;
public int textResId;
public String text;
public TabItem(int imagenormal, int imageselect, String text) {
this.imagenormal = imagenormal;
this.imageselect = imageselect;
this.text = text;
}
// public TabItem(int imagenormal, int imageselect, int textid) {
// this.imagenormal = imagenormal;
// this.imageselect = imageselect;
// this.text = getContext().getString(textid);
// }
}
###3.建立一个viewgooup来解析我们的这个tab_view布局文件，并将基类的值对应
package com.jaydenxiao.androidfire.zhou;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.jaydenxiao.androidfire.R;
import com.jaydenxiao.androidfire.widget.PullBackLayout;
import com.jaydenxiao.common.commonutils.LogUtils;
/**
* Created by on 2017/2/28.
*/
public class TabView extends LinearLayout implements View.OnClickListener{
private ImageView tab_image;
private TextView tab_lable;
private View rootview;
private TabItem item;
public TabView(Context context) {
super(context);
initView(context);
}
public TabView(Context context, AttributeSet attrs) {
super(context, attrs);
initView(context);
}
public TabView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
}
private void initView(Context context) {
setOrientation(VERTICAL);
setGravity(Gravity.CENTER);
rootview = LayoutInflater.from(context).inflate(R.layout.tab_view,this,true);
tab_image = (ImageView) rootview.findViewById(R.id.tab_image);
tab_lable = (TextView) rootview.findViewById(R.id.tab_lable);
}
public void confirmItem(TabItem item){
if (item.isselect){
tab_image.setImageResource(item.imageselect);
}else{
tab_image.setImageResource(item.imagenormal);
}
tab_lable.setText(item.text);
}
@Override
public void onClick(View view) {
}
}
###4.最终的父布局来一个个添加这个小的tabview，你想添加几个就几个。这里我稍微改了点，让我们点击的时候先默认实现切换我们tabitem的背景图的方法，然后再添加接口让我们去实现。可以对着原版和我的对比一下就看出来le
package com.jaydenxiao.androidfire.zhou;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import java.util.ArrayList;
/**
* Created by on 2017/2/28.
*/
public class TabLayout extends LinearLayout implements View.OnClickListener{
private TabView mTabView;
private ArrayList tabs;
private OnTabClickListener listener;
public TabLayout(Context context) {
super(context);
initView();
}
public TabLayout(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
public TabLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initView();
}
private void initView(){
setOrientation(HORIZONTAL);
}
public void initData(ArrayListtabs, OnTabClickListener listener){
this.tabs=tabs;
this.listener=listener;
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT);
params.weight=1;
if(tabs!=null && tabs.size()>0){
for(int i=0;i< tabs.size();i++){
mTabView=new TabView(getContext());
// mTabView.setTag(tabs.get(i));
mTabView.setTag(i);
mTabView.confirmItem(tabs.get(i));
mTabView.setOnClickListener(this);
addView(mTabView,params);
}
}else{
throw new IllegalArgumentException("tabs can not be empty");
}
}
@Override
public void onClick(View v) {
int x = (int)v.getTag();
for(int i=0;i< tabs.size();i++){
if (i != x ){
tabs.get(i).isselect = false;
mTabView = (TabView) getChildAt(i);
mTabView.confirmItem(tabs.get(i));
}else if (i == x){
tabs.get(i).isselect = !tabs.get(i).isselect;
mTabView = (TabView) getChildAt(i);
mTabView.confirmItem(tabs.get(i));
}
}
// listener.onTabClick((TabItem)v.getTag());
listener.onTabClick(tabs.get((Integer) v.getTag()));
}
public interface OnTabClickListener{
void onTabClick(TabItem tabItem);
}
}
###5.然后就是在布局和java中去调用了
datas = new ArrayList();
datas.add(new TabItem(R.mipmap.ic_care_normal,R.mipmap.ic_care_selected,"测试一"));
datas.add(new TabItem(R.mipmap.ic_girl_normal,R.mipmap.ic_girl_selected,"测试二"));
datas.add(new TabItem(R.mipmap.ic_home_normal,R.mipmap.ic_home_selected,"测试三"));
datas.add(new TabItem(R.mipmap.ic_video_normal,R.mipmap.ic_video_selected,"测试四"));
tl_bottom.initData(datas, new TabLayout.OnTabClickListener() {
@Override
public void onTabClick(TabItem tabItem) {
//在这里执行你想tab点击切换时的功能
}
});
ok 这只是简陋傍，后期打算在item中添加imageview小红点提示还有和viewpager绑定等等功能，后期再补吧 ！