Android 仿微信底部滑动切换Tab

一.首先分析微信的底部样式

如上图，可以看出每一个样式都是又一个ImageView和一个TextView组成的，所以我们先创建一个item的布局

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

    <ImageView
        android:layout_gravity="center"
        android:layout_marginTop="5dp"
        android:id="@+id/tab_item_image"
        android:layout_width="25dp"
        android:layout_height="25dp" />

    <TextView
        android:layout_gravity="center"
        android:id="@+id/tab_item_text"
        android:layout_marginTop="6dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

二.如何做到item随着viewpager的滑动改变颜色

所以我们需要创建一个自定义的viewgroup，将每一个item都add进去，并监听viewpager的滑动

首先创建declare-styleable，添加自定义属性

    <declare-styleable name="TabMenu">
        <attr name="selected" format="integer" />
        <attr name="item_count" format="integer" />
        <attr name="icon_size" format="dimension" />
        <attr name="android:textSize" />
        <attr name="text_color" format="color" />
        <attr name="text_select_color" format="color" />
        <attr name="item_bg" format="reference|color" />
    </declare-styleable>

继承LinearLayout，创建自定义View

public class TabMenu extends LinearLayout{

    int mItemCount; //子布局个数
    int mTextSize;  
    int mIconSize;
    int mTextColor;
    int mTextSelectColor;
    int mItemBg;
    int mSelectedItem; //选中中item
    Context mContext;
    private List<ImageView> mImageViews;
    private List<TextView> mTextViews;
    private int[] mIcons = new int[10];
    private int[] mSelectIcons = new int[10];
    private String[] mTexts = new String[10];
    private ViewPager mViewPager;
    private TabViewPagerListener mTabViewPagerListener;

    public TabMenu(Context context){
        this(context,null);
        Log.i("lzq","TabMenu1");
    }

    public TabMenu(Context context , AttributeSet attributeSet){
        this(context,attributeSet,0);
        Log.i("lzq","TabMenu2");
    }

    public TabMenu(Context context , AttributeSet attributeSet , int defStyle){
        super(context,attributeSet,defStyle);
        Log.i("lzq","TabMenu");
        this.setOrientation(LinearLayout.HORIZONTAL);

        mContext = context;
        mImageViews = new ArrayList<>();
        mTextViews = new ArrayList<>();
        //获取自定义的属性
        TypedArray a = context.getTheme().obtainStyledAttributes(attributeSet, R.styleable.TabMenu,defStyle,0);
        mItemCount = a.getInt(R.styleable.TabMenu_item_count,4);
        mTextSize = a.getDimensionPixelSize(R.styleable.TabMenu_android_textSize,0);
        mIconSize = (int)a.getDimension(R.styleable.TabMenu_icon_size, TypedValue
                .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30,
                        getResources().getDisplayMetrics()));
        mTextColor = a.getColor(R.styleable.TabMenu_text_color,0x777777);
        mTextSelectColor = a.getColor(R.styleable.TabMenu_text_select_color,0x222222);
        mItemBg = a.getResourceId(R.styleable.TabMenu_item_bg,0);
        mSelectedItem = a.getInt(R.styleable.TabMenu_selected,0);
        a.recycle();
        initItemView();
        mTabViewPagerListener = new TabViewPagerListener();
    }

    public void initItemView(){
        LayoutInflater mInflater = LayoutInflater.from(mContext);
         //循环添加item
        for(int i = 0; i < mItemCount ; i++){
            //通过LayoutInflater加载item布局
            View view = mInflater.inflate(R.layout.tab_menu_item,this,false);
            view.setClickable(true);
            final ImageView imageView = (ImageView)view.findViewById(R.id.tab_item_image);
            final TextView textView = (TextView)view.findViewById(R.id.tab_item_text);
            textView.setTextSize(mTextSize);
            textView.setTextColor(mTextColor);
            //item通过LayoutParams向父布局传递自己的意愿，设置布局属性 
            LayoutParams param = new LayoutParams(
                    0, LayoutParams.MATCH_PARENT);
            //param.gravity = Gravity.CENTER_VERTICAL;
            param.weight = 1;
            view.setLayoutParams(param);
            addView(view,i);//通过add，添加item
            mImageViews.add(imageView);
            mTextViews.add(textView);
            final int j = i;
            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    setSelectedItem(j);
                    setImageBg();
                    setTextColor();
                    mViewPager.setCurrentItem(j);
                }
            });
        }
    }

    /*
     *设置选中的item
     */
    public void setSelectedItem(int selected){
        mSelectedItem = selected;
    }

    /*
     *对外获取图标资源，设置图标背景
     */    
    public void setImageBg(int[] icons ,int[] selectIcons){
        if(icons != null && selectIcons != null) {
            for (int i = 0; i < mItemCount; i++) {
                if (i > mIcons.length - 1) {
                    break;
                }
                mIcons[i] = icons[i];
                mSelectIcons[i] = selectIcons[i];
                if(mSelectedItem == i){
                    mImageViews.get(i).setBackgroundResource(mSelectIcons[i]);
                }else {
                    mImageViews.get(i).setBackgroundResource(mIcons[i]);
                }
            }
        }
    }

    /*
     *设置图标背景
     */
    public void setImageBg(){
        for (int i = 0; i < mItemCount; i++) {
            if (i > mIcons.length - 1) {
                break;
            }
            if(mSelectedItem == i){
                mImageViews.get(i).setBackgroundResource(mSelectIcons[i]);
            }else {
                mImageViews.get(i).setBackgroundResource(mIcons[i]);
            }
        }
    }

    public void setTexts(String[] texts){
        if(texts != null){
            for(int i = 0 ; i <mItemCount;i++){
                if (i > mTexts.length - 1) {
                    break;
                }
                mTexts[i] = texts[i];
                mTextViews.get(i).setText(mTexts[i]);
            }
        }
    }

    public void setTextColor(int color , int selectColor){
        mTextColor = color;
        mTextSelectColor = selectColor;
    }

    public void setTextColor(){
        for(int i = 0 ; i <mItemCount;i++){
            if (i > mTexts.length - 1) {
                break;
            }
            if(mSelectedItem == i){
                mTextViews.get(i).setTextColor(mTextSelectColor);
            }else{
                mTextViews.get(i).setTextColor(mTextColor);
            }

        }
    }

    /*
     *得到viewPager，并设置viewPager的滑动监听
     */
    public void setViewPager( ViewPager viewPager){
        mViewPager = viewPager;
        mViewPager.setOnPageChangeListener(mTabViewPagerListener);
    }


    /*
     *OnPageChangeListener
     */
    private class TabViewPagerListener implements ViewPager.OnPageChangeListener{

        public TabViewPagerListener(){

        }
        @Override
        public void onPageScrollStateChanged(int i) {

        }

        @Override
        public void onPageScrolled(int i, float v, int i1) {

        }

        @Override
        public void onPageSelected(int i) {
            setSelectedItem(i);
            setImageBg();
            setTextColor();
        }
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
}

三.使用TabMenu

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:lzq="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.administrator.myok.activity.TestActivity">


    <com.example.administrator.myok.view.TabMenu
        android:id="@+id/tab_menu"
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        lzq:icon_size="20dp"
        lzq:text_color="@color/color_text"
        lzq:text_select_color="@color/color_select_text">

    </com.example.administrator.myok.view.TabMenu>

</LinearLayout>

public class TestActivity extends AppCompatActivity {

    TabMenu mTabMenu;
    String[] mText = {"1","2","3","4"};
    int[] mIcon = {R.mipmap.svg_tab_bar_main,R.mipmap.svg_tab_bar_kind,R.mipmap.svg_tab_bar_find,R.mipmap.svg_tab_bar_mine};
    int[] mSelectIcon = {R.mipmap.svg_tab_bar_main_hl,R.mipmap.svg_tab_bar_kind_hl,R.mipmap.svg_tab_bar_find_hl,R.mipmap.svg_tab_bar_mine_hl};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_avtivity);
        mTabMenu = (TabMenu)findViewById(R.id.tab_menu);
        mTabMenu.setTexts(mText);
        //mTabMenu.setTextColor(0x777777,0x777777);
        mTabMenu.setImageBg(mIcon,mSelectIcon);
        int a = R.mipmap.svg_tab_bar_main;
    }
}