android自定义控件之底部自动切换Tab布局

     今天为大家分享一下，我自定义的底部切换tab布局。先看效果图吧。点击底部控件，自动变色，自动切换不同的布局。

  

一、首先要定义一个底部的item，layout_bottom_item.xml。也就是上图中的单个点击项目。并且居中显示。

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/text_white">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        >
        <ImageView
            android:id="@+id/tab_woicon"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/text_padding"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/tab_icon_normal"/>
        <TextView
            android:id="@+id/tab_wotext"
            android:layout_marginTop="@dimen/text_padding"
            android:layout_below="@id/tab_woicon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:textSize="@dimen/text_size16"
            android:text="@string/wode_task"/>
    </RelativeLayout>
</RelativeLayout>

 效果如图

 

二、创建底部布局，layout_bottom.xml。使用include的标签，引用刚才的布局文件，并且为每一个引用布局定义自己的id。

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/bottom_height"
    android:orientation="horizontal">

    <include
        android:id="@+id/wode_order"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        layout="@layout/layout_bottom_item"></include>
    <include
        android:id="@+id/history_order"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        layout="@layout/layout_bottom_item"></include>
    <include
        android:id="@+id/wode_info"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        layout="@layout/layout_bottom_item"></include>
</LinearLayout>

三、布局文件创建好之后，第一，我们就创建MyBottomLayout类，并且继承自LinerLayout。实现LinerLayout的构造方法，否则会报错。第二，在构造方法中我们使用inflater把我们刚才创建的layout_bottom.xml压进我们当前的布局。第三，初始化底部布局中的控件。第四，根据初始化的底部布局控件找到底部各个控件，并未他们设置初始值。第五，为初始化的底部布局设置点击事件。根据点击的位置，设置底部控件不同的颜色和状态。第六，自定义一个接口，并且定义一个回调方法，在点击实践中传入点击的ID,以便我们在使用这个控件的时候，拿到点击的id，在activity中回调接口，处理点击事件。

 

  

package com.meijianfang.customView;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.meijianfang.R;


/**
 * Created by cdy on 2016/3/9.
 * 自定义底部tab布局
 */
public class MyBottomLayout extends LinearLayout{
    RelativeLayout wode_Relativelayout;
    RelativeLayout history_Relativelayout;
    RelativeLayout info_Relativelayout;
    LayoutInflater inflater;
    public MyBottomLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        inflater = LayoutInflater.from(getContext());
        View view = inflater.inflate(R.layout.layout_bottom,this);
        findView(view);
        initData();
        setOnclick();
    }

    /**
     * 根据初始化的布局控件，找到我们的底部各个控件，并未他们设置初始值。
     */
    private void initData() {
        ImageView imageView = (ImageView)wode_Relativelayout.findViewById(R.id.tab_woicon);
        imageView.setBackgroundResource(R.mipmap.tab_icon_pressed);
        TextView textView = (TextView)wode_Relativelayout.findViewById(R.id.tab_wotext);

        textView.setTextColor(getResources().getColor(R.color.button_green));
        textView.setText("我的任务");

        ImageView imageView1 = (ImageView)history_Relativelayout.findViewById(R.id.tab_woicon);
        imageView1.setBackgroundResource(R.mipmap.tabl_icon_normal);
        TextView textView1 = (TextView)history_Relativelayout.findViewById(R.id.tab_wotext);
        textView1.setTextColor(getResources().getColor(R.color.black));
        textView1.setText("历史任务");

        ImageView imageView2 = (ImageView)info_Relativelayout.findViewById(R.id.tab_woicon);
        imageView2.setBackgroundResource(R.mipmap.tabp_icon_normal);
        TextView textView2 = (TextView)info_Relativelayout.findViewById(R.id.tab_wotext);
        textView2.setTextColor(getResources().getColor(R.color.black));
        textView2.setText("个人信息");
    }

    /**
     * 初始化后的底部布局设置点击事件
     */
    private void setOnclick() {
        wode_Relativelayout.setOnClickListener(new lister());
        history_Relativelayout.setOnClickListener(new lister());
        info_Relativelayout.setOnClickListener(new lister());
    }

    //自定义接口
   public interface  ICallbackLister{
        public void click(int id);
    }

    ICallbackLister callbackLister = null;

    /**
     * @param callbackLister
     * 接口的回调方法
     */
    public void setOnCallbackLister(ICallbackLister callbackLister){
        this.callbackLister = callbackLister;
    }
    //点击事件的处理
    private class lister implements OnClickListener {

        @Override
        public void onClick(View view) {
            switch (view.getId()){
                case R.id.wode_order:
                    //更改图标颜色
                    //实现页面切换
                    initViewPic(0);
                    break;
                case R.id.history_order:
                    initViewPic(1);
                    break;
                case R.id.wode_info:
                    initViewPic(2);
                    break;
                default:
                    break;

            }
            //点击id，传入接口的方法
            callbackLister.click(view.getId());
        }
    }

    /**
     * @param i
     * 根据点击切换卡的不同位置，给底部控件设置切换后的颜色和状态。
     */

    private void initViewPic(int i) {
        switch (i){
            case 0:
                //把第一个切换卡设置成点击的状态
                TextView textView = (TextView)wode_Relativelayout.findViewById(R.id.tab_wotext);
                textView.setTextColor(getResources().getColor(R.color.button_green));

                TextView textView1 = (TextView)history_Relativelayout.findViewById(R.id.tab_wotext);
                textView1.setTextColor(getResources().getColor(R.color.black));

                TextView textView2 = (TextView)info_Relativelayout.findViewById(R.id.tab_wotext);
                textView2.setTextColor(getResources().getColor(R.color.black));

                ImageView imageView = (ImageView)wode_Relativelayout.findViewById(R.id.tab_woicon);
                imageView.setBackgroundResource(R.mipmap.tab_icon_pressed);

                ImageView imageView1 = (ImageView)history_Relativelayout.findViewById(R.id.tab_woicon);
                imageView1.setBackgroundResource(R.mipmap.tabl_icon_normal);

                ImageView imageView2 = (ImageView)info_Relativelayout.findViewById(R.id.tab_woicon);
                imageView2.setBackgroundResource(R.mipmap.tabp_icon_normal);
                //把其他的切换卡设置成未点击的状态
                break;
            case 1:
                TextView textViewa = (TextView)wode_Relativelayout.findViewById(R.id.tab_wotext);
                textViewa.setTextColor(getResources().getColor(R.color.black));

                TextView textViewb = (TextView)history_Relativelayout.findViewById(R.id.tab_wotext);
                textViewb.setTextColor(getResources().getColor(R.color.button_green));

                TextView textViewc = (TextView)info_Relativelayout.findViewById(R.id.tab_wotext);
                textViewc.setTextColor(getResources().getColor(R.color.black));

                ImageView imageViewa = (ImageView)wode_Relativelayout.findViewById(R.id.tab_woicon);
                imageViewa.setBackgroundResource(R.mipmap.tab_icon_normal);

                ImageView imageViewb = (ImageView)history_Relativelayout.findViewById(R.id.tab_woicon);
                imageViewb.setBackgroundResource(R.mipmap.tabl_icon_pressed);

                ImageView imageViewc = (ImageView)info_Relativelayout.findViewById(R.id.tab_woicon);
                imageViewc.setBackgroundResource(R.mipmap.tabp_icon_normal);
                break;
            case 2:
                TextView textViewa1 = (TextView)wode_Relativelayout.findViewById(R.id.tab_wotext);
                textViewa1.setTextColor(getResources().getColor(R.color.black));

                TextView textViewb1 = (TextView)history_Relativelayout.findViewById(R.id.tab_wotext);
                textViewb1.setTextColor(getResources().getColor(R.color.black));

                TextView textViewc1 = (TextView)info_Relativelayout.findViewById(R.id.tab_wotext);
                textViewc1.setTextColor(getResources().getColor(R.color.button_green));

                ImageView imageViewa1 = (ImageView)wode_Relativelayout.findViewById(R.id.tab_woicon);
                imageViewa1.setBackgroundResource(R.mipmap.tab_icon_normal);

                ImageView imageViewb1 = (ImageView)history_Relativelayout.findViewById(R.id.tab_woicon);
                imageViewb1.setBackgroundResource(R.mipmap.tabl_icon_normal);

                ImageView imageViewc1 = (ImageView)info_Relativelayout.findViewById(R.id.tab_woicon);
                imageViewc1.setBackgroundResource(R.mipmap.tabp_icon_pressed);
                break;
            default:
                break;

        }
    }

    /**
     * @param view
     * 初始化底部布局中的控件
     */
    private void findView(View view) {
        wode_Relativelayout = (RelativeLayout)view.findViewById(R.id.wode_order);
        history_Relativelayout = (RelativeLayout)view.findViewById(R.id.history_order);
        info_Relativelayout = (RelativeLayout)view.findViewById(R.id.wode_info);

    }
}

四、在activity中使用我们自定义的底部控件。

 

 1、在activity中声明我们的控件

 

//自定义的底部切换控件
MyBottomLayout bottom;

 

 2、在onCreate()方法中初始化我们的控件,并为我们的控件设置我们定义好的回调方法。

 

bottom = (MyBottomLayout)findViewById(R.id.bottom);
bottom.setOnCallbackLister(new MycallbackLister());

3、在回调方法中，处理我们需要切换的页面,我这里是定义了三个不同的fragement，切换。

 

 

/**
 * 实现接口切换不同的页面
*/
private class MycallbackLister implements MyBottomLayout.ICallbackLister {

    @Override
    public void click(int id) {
        switch (id){
           case  R.id.wode_order:
               
               initPageFragement(new WodeTaskFragement());
                break;
            case R.id.history_order:
                
                initPageFragement(new HistoryTaskFragement());
                break;
            case R.id.wode_info:
              
                initPageFragement(new WodeInfoFragement());
                break;

            default:
                break;
        }
    }
}

 

五、我切换fragement的方法。有不懂fragement的可以查看写资料，过些天我也会写一些fragement的文章。

   

/*
* 动态的切换页面
* */
private void initPageFragement(Fragment fragment) {
    FragmentManager manager = getSupportFragmentManager();
    FragmentTransaction transaction = manager.beginTransaction();
    //替换传进来的fragement
    transaction.replace(R.id.my_content,fragment);
    transaction.commit();
}