一言不合就上图：
实现效果图：
实现效果图
自定义一个组件TabItem
显然，底部按钮不止一个，而且是同一个样式，这时候自定义一个组件十分必要，当然，这里实现的自定义组件只用到了TextView。看看自定义组件的xml文件：
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="@dimen/basicPadding"> <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"> <TextView android:id="@+id/tab_item_label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:drawableTop="@drawable/main_selector_setting" android:paddingLeft="@dimen/smallPadding" android:paddingRight="@dimen/smallPadding" android:gravity="center" android:textColor="@drawable/main_selector_text_color" android:paddingTop="@dimen/smallPadding" android:text="Tab Item" /> <TextView android:id="@+id/tab_item_count" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|top" android:background="@drawable/ic_new_msg" android:gravity="center" android:text="N" android:textColor="@android:color/white" android:textSize="@dimen/smaller_text_size" /> </FrameLayout> </FrameLayout>
一共两个TextView，一个用来显示图标和文字，一个用来显示通知消息数量。然后再对组件进行封装，先自定义几个属性：
<declare-styleable name="TabItem"> <attr name="android:src"/> <attr name="tab_item_label" format="string"/> <attr name="tab_item_count" format="integer"/> </declare-styleable>
分别是图标资源属性、文字属性、消息数量属性，可以在xml中设置参数。然后是代码封装，贴一下获取自定义属性的代码：
private void initXMLParams(AttributeSet attrs) {
TypedArray array = mContext.obtainStyledAttributes(attrs, R.styleable.TabItem);
Drawable background = array.getDrawable(R.styleable.TabItem_android_src);
if (null != background) {
background.setBounds(0, 0, background.getMinimumWidth(), background.getMinimumHeight());
tabItemLabel.setCompoundDrawables(null, background, null, null);
}
String label_Str = array.getString(R.styleable.TabItem_tab_item_label);
tabItemLabel.setText(label_Str);
int iCount = array.getInt(R.styleable.TabItem_tab_item_count, 0);
if (iCount != 0) {
tabItemMsgCount.setText(String.valueOf(iCount));
} else {
tabItemMsgCount.setVisibility(View.GONE);
}
}因为要处理点击选中事件，所以继承FrameLayout，实现Checkable接口：
@Override
public void setChecked(boolean checked) {
if (isChecked != checked) {
isChecked = checked;
tabItemLabel.setSelected(isChecked);
setSelected(isChecked);
}
}
@Override public boolean isChecked() {
return isChecked;
}
@Override public void toggle() {
setChecked(!isChecked);
}同时要对外部提供一个设置消息数量的接口：
public void setMsgCount(int msgCount) {
if (msgCount != 0) {
tabItemMsgCount.setVisibility(View.VISIBLE);
tabItemMsgCount.setText(String.valueOf(msgCount));
} else {
tabItemMsgCount.setVisibility(View.GONE);
}
}组件封装完毕。
使用组件
我们定义一个布局文件：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="vertical"> <View android:layout_width="match_parent" android:layout_height="@dimen/divider_height" android:background="@color/listview_divider" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <com.github.mvp.widgets.TabItem android:id="@+id/tab_item_main_0" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/main_selector_space" app:tab_item_count="0" app:tab_item_label="首页" /> <com.github.mvp.widgets.TabItem android:id="@+id/tab_item_main_1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/main_selector_department" app:tab_item_count="99" app:tab_item_label="发现" /> <com.github.mvp.widgets.TabItem android:id="@+id/tab_item_main_2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/main_selector_mipian" app:tab_item_count="3" app:tab_item_label="通知" /> <com.github.mvp.widgets.TabItem android:id="@+id/tab_item_main_3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/main_selector_message" app:tab_item_count="2" app:tab_item_label="私信" /> <com.github.mvp.widgets.TabItem android:id="@+id/tab_item_main_4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/main_selector_setting" app:tab_item_count="0" app:tab_item_label="更多" /> </LinearLayout> </LinearLayout>
在这里给各个item设置初始化的数据，用到了自定义的一些属性。然后，在MainActivity里就可以include使用了：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".main.MainActivity"> <include android:id="@+id/main_tab_bar_layout" layout="@layout/view_bottom_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" /> <FrameLayout android:id="@+id/fragment_content" android:layout_above="@id/main_tab_bar_layout" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> </RelativeLayout>
代码里处理响应事件：
@OnClick({R.id.tab_item_main_0, R.id.tab_item_main_1, R.id.tab_item_main_2,
R.id.tab_item_main_3, R.id.tab_item_main_4})
public void onClick(View view) {
clearChecked();
switch (view.getId()) {
case R.id.tab_item_main_0:
tabItemMain0.setChecked(true);
showFragment(TagStatic.TAG_FRAGMENT_TODAY);
break;
case R.id.tab_item_main_1:
tabItemMain1.setChecked(true);
showFragment(TagStatic.TAG_FRAGMENT_INTEREST);
break;
case R.id.tab_item_main_2:
tabItemMain2.setChecked(true);
showFragment(TagStatic.TAG_FRAGMENT_SAFETY);
break;
case R.id.tab_item_main_3:
tabItemMain3.setChecked(true);
showFragment(TagStatic.TAG_FRAGMENT_SPORT);
break;
case R.id.tab_item_main_4:
tabItemMain4.setChecked(true);
showFragment(TagStatic.TAG_FRAGMENT_OTHER);
break;
}大功告成，so easy，对八对？
对比一下知乎IOS版本底部Tab，配个色以后是不是一毛一样呢？
知乎IOS版本底部Tab