只用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，配个色以后是不是一毛一样呢？

获取源码