用RadioGroup实现底栏Tab

最新推荐文章于 2020-02-14 13:08:57 发布

原创最新推荐文章于 2020-02-14 13:08:57 发布 · 635 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Android #RadioGroup #RadioButton #布局 #界面

Android 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个主界面布局设计方案，使用RelativeLayout作为容器，并包含一个FrameLayout用于显示内容区域和底部导航栏。导航栏由RadioGroup组成，包含四个RadioButton，分别对应首页、管理、推荐和设置功能。通过定制样式实现美观的UI效果。

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

主界面的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/navigation"
        android:layout_alignParentTop="true"
        android:background="#e9e7e7" />

    <RadioGroup
        android:id="@+id/navigation"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="#ffffff"
        android:gravity="center"
        android:orientation="horizontal" >

        <RadioButton
            style="@style/navi" 
            android:id="@+id/navi_home"
            android:checked="true"
            android:drawableTop="@drawable/icon_home_act"
            android:paddingTop="3dp"
            android:text="@string/home" >
        </RadioButton>

        <RadioButton
            style="@style/navi" 
            android:id="@+id/navi_manager"
            android:drawableTop="@drawable/icon_manager_act"
            android:paddingTop="3dp"
            android:text="@string/manager" >
        </RadioButton>
        <RadioButton
            style="@style/navi" 
            android:id="@+id/navi_recommend"
            android:drawableTop="@drawable/icon_recommend_act"
            android:paddingTop="3dp"
            android:text="@string/recommend" >
        </RadioButton>

        <RadioButton
            style="@style/navi" 
            android:id="@+id/navi_settings"
            android:drawableTop="@drawable/icon_setting_act"
            android:paddingTop="3dp"
            android:text="@string/settings" >
        </RadioButton>
    </RadioGroup>

</RelativeLayout>

每个RadioButton的Style

<!-- navigation RadioButton -->
    <style name="navi">
        <item name="android:button">@null</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:layout_margin">1dip</item>
        <item name="android:layout_weight">1.0</item>
        <item name="android:paddingTop">5.0dip</item>
        <item name="android:paddingBottom">0dip</item>
        <item name="android:paddingLeft">0dip</item>
        <item name="android:paddingRight">0dip</item>
        <item name="android:textColor">@drawable/icon_text_selector</item>
        </style>

textColor的selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:state_checked="true" android:color="@color/green" />
    <item android:state_pressed="true" android:color="@color/green" /> 
    <item android:state_focused="false" android:color="@color/black" /> 
    <item android:color="@color/black"></item>

</selector>