Android摸索——高仿微博Tab界面

最新推荐文章于 2021-05-29 23:40:09 发布

zuse_ko

最新推荐文章于 2021-05-29 23:40:09 发布

阅读量775

点赞数

CC 4.0 BY-SA版权

分类专栏：布局 Android

本文链接：https://blog.youkuaiyun.com/zuse_ko/article/details/13612685

Android 同时被 2 个专栏收录

5 篇文章

订阅专栏

布局

1 篇文章

订阅专栏

本文介绍了一种模仿新浪微博4.0.1版Tab页面效果的方法。通过使用隐藏的TabWidget和RadioButton替代的方式，实现了底部导航栏的切换效果。文章详细展示了如何自定义样式和背景以实现选中状态的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：本文参考自农民伯伯的博客园，但在那基本之上又做了改善，原文链接http://www.cnblogs.com/over140/archive/2011/03/02/1968042.html#!comments

Tab页面效果是很多应用都会涉及到的，思路一般是tabwidget+radiobutton，而tab项的效果是将button设为null+文字+top图（selec实现）

反编译新浪微博4.0.1apk文件，研究其tab布局，做了个高仿品

首先是主布局文件：

将tabwidget隐藏，并用radiobutton取代，为单选按钮设置的style，其中最重要的是为其background设置了home_btn_bg.xml，也就是自定义了选中效果

<?xml version="1.0" encoding="UTF-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:paddingBottom="@dimen/toolbar_height" >
    </FrameLayout>
    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:visibility="gone" >
    </TabWidget>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="@dimen/toolbar_height"
        android:layout_gravity="bottom"
        android:gravity="center_vertical"
        android:orientation="horizontal" >
        <RadioGroup
            android:id="@+id/main_radio"
            android:layout_width="fill_parent"
            android:layout_height="@dimen/toolbar_height"
            android:layout_gravity="bottom"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <RadioButton
                android:id="@+id/radio_button0"
                style="@style/main_tab_bottom"
                android:checked="true"
                android:drawableTop="@drawable/weibo_home"
                android:text="@string/main_home"
            <RadioButton
                android:id="@+id/radio_button1"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/weibo_message"
                android:text="@string/main_news" />
            <RadioButton
                android:id="@+id/radio_button2"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/weibo_myinfo"
                android:text="@string/main_my_info" />
            <RadioButton
                android:id="@+id/radio_button3"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/weibo_discover"
                android:text="@string/menu_search" />
            <RadioButton
                android:id="@+id/radio_button4"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/weibo_more"
                android:text="@string/more" />
        </RadioGroup>
    </LinearLayout>
</TabHost>

button样式控制代码：

<style name="main_tab_bottom">
        <item name="android:textSize">@dimen/bottom_tab_font_size</item>
        <item name="android:textColor">@color/tab_text_color</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@drawable/home_btn_bg</item>
        <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">@dimen/toolbar_height</item>
        <item name="android:button">@null</item>
        <item name="android:singleLine">true</item>
        <item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>
        <item name="android:layout_weight">1.0</item>
    </style>

为每个button top图设置其selector，实现选中前后不同效果。以第一个为例：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tabbar_home_highlighted" android:state_checked="true" android:state_enabled="true"></item>
    <item android:drawable="@drawable/tabbar_home"></item>
</selector>

将tab上的文字也做类似处理：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#FFFFFF"></item>
    <item android:color="#ff666666"></item>
</selector>

附上源码下载地址：

http://download.youkuaiyun.com/detail/zuse_ko/8147527