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

知乎IOS版本底部Tab

获取源码