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

一言不合就上图：
实现效果图：

实现效果图

自定义一个组件TabItem

显然，底部按钮不止一个，而且是同一个样式，这时候自定义一个组件十分必要，当然，这里实现的自定义组件只用到了TextView。看看自定义组件的xml文件：

一共两个TextView，一个用来显示图标和文字，一个用来显示通知消息数量。然后再对组件进行封装，先自定义几个属性：

分别是图标资源属性、文字属性、消息数量属性，可以在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); 
    }
}

组件封装完毕。

使用组件

我们定义一个布局文件：

在这里给各个item设置初始化的数据，用到了自定义的一些属性。然后，在MainActivity里就可以include使用了：

代码里处理响应事件：

@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

获取源码