只用TextView实现知乎主页底部Tab

一言不合就上图：

实现效果图：

自定义一个组件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，配个色以后是不是一毛一样呢？



获取源码