自定义组件之封装底部导航栏

偶尔看到一篇文章 封装实践——打造微信底部tab栏就对着敲了一下代码。然后这个感觉很好了我就改了一些东西给大家看看吧。 参考本文原创作者：谷哥的小弟 作者博客地址：http://blog.csdn.net/lfdfhl ###1.新建一个tab的布局文件tab_view

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/tab_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <TextView
    android:id="@+id/tab_lable"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />
</merge>

###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<TabItem> 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(ArrayList<TabItem>tabs, 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中去调用了

    <com.jaydenxiao.androidfire.zhou.TabLayout
        android:id="@+id/tl_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"


   private void initView() {
        tl_bottom = (TabLayout) findViewById(R.id.tl_bottom);
//        bnb_bottom = (BottomNavigationBar) findViewById(R.id.bnb_bottom);
//        vp_fragment = (ViewPager) findViewById(R.id.vp_fragment);
        ArrayList<TabItem> datas = new ArrayList<TabItem>();
        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绑定等等功能，后期再补吧 ！

转载于:https://my.oschina.net/u/3292760/blog/847921