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();
}