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

来源：互联网发布：广发交易软件编辑：程序博客网时间：2024/06/01 08:21

一言不合就上图：

实现效果图：

自定义一个组件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接口：

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

获取源码

0 0