android底部导航（带小红点提示）

来源：互联网发布：unity3d 衣服模型编辑：程序博客网时间：2024/06/05 22:52

本帖只实现了底部导航（带小红点提示）的前台布局和tab切换功能，后续会把小红点动态显示与隐藏即根据新数据来控制底部提示的功能加上。

实现原理TabHost+RadioButton，底部提示角标（小红点）使用FrameLayout布局。
布局代码：

<?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:layout_width="fill_parent"        android:layout_height="fill_parent" >        <LinearLayout            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:orientation="vertical" >            <FrameLayout                android:id="@android:id/tabcontent"                android:layout_width="fill_parent"                android:layout_height="0.0dip"                android:layout_weight="1.0" />            <TabWidget                android:id="@android:id/tabs"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_weight="0.0"                android:visibility="gone" />            <LinearLayout                android:id="@+id/main_tab_group"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_gravity="bottom"                android:background="@drawable/main_tab_bg"                android:gravity="bottom"                android:orientation="horizontal"                android:paddingTop="2.0dip"                android:paddingBottom="2.0dip" >                <FrameLayout                    android:layout_width="0.0dip"                    android:layout_height="fill_parent"                    android:layout_weight="1.0"                    android:background="@null" >                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent"                        android:gravity="bottom|center" >                        <RadioButton                            android:id="@+id/main_tab_first"                            style="@style/MMTabButton"                            android:checked="true"                            android:drawableTop="@drawable/main_tab_selector1"                            android:text="@string/main_tab_first_text" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent"                        android:gravity="top|right|center"                        android:paddingRight="10.0dip" >                        <TextView                            android:id="@+id/main_tab_first_unread_tv"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:background="@drawable/main_tab_unread_bg"                            android:gravity="center"                            android:text="@null"                            android:textColor="@color/white"                            android:textSize="10.0dip"                            android:visibility="invisible" />                    </LinearLayout>                </FrameLayout>                <FrameLayout                    android:layout_width="0.0dip"                    android:layout_height="fill_parent"                    android:layout_weight="1.0"                    android:background="@null" >                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent"                        android:gravity="bottom|center" >                        <RadioButton                            android:id="@+id/main_tab_second"                            style="@style/MMTabButton"                            android:drawableTop="@drawable/main_tab_selector2"                            android:text="@string/main_tab_second_text" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent"                        android:gravity="top|right|center"                        android:paddingRight="10.0dip" >                        <TextView                            android:id="@+id/main_tab_second_unread_tv"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:background="@drawable/main_tab_unread_bg"                            android:gravity="center"                            android:text="@null"                            android:textColor="@color/white"                            android:textSize="10.0dip"                            android:visibility="invisible" />                    </LinearLayout>                </FrameLayout>                <FrameLayout                    android:layout_width="0.0dip"                    android:layout_height="fill_parent"                    android:layout_weight="1.0"                    android:background="@null" >                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent"                        android:gravity="bottom|center" >                        <RadioButton                            android:id="@+id/main_tab_three"                            style="@style/MMTabButton"                            android:drawableTop="@drawable/main_tab_selector3"                            android:text="@string/main_tab_three_text" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent"                        android:gravity="top|right|center"                        android:paddingRight="10.0dip" >                        <TextView                            android:id="@+id/main_tab_three_prospect_tv"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:background="@drawable/main_tab_newnotice"                            android:gravity="center"                            android:textColor="@color/white"                            android:textSize="10.0dip"                            android:visibility="invisible" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent"                        android:gravity="top|right|center"                        android:paddingRight="10.0dip" >                        <TextView                            android:id="@+id/main_tab_three_new_tv"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:background="@drawable/main_tab_unread_bg"                            android:gravity="center"                            android:text="@string/app_new"                            android:textColor="@color/white"                            android:textSize="10.0dip"                            android:visibility="invisible" />                    </LinearLayout>                </FrameLayout>                <FrameLayout                    android:layout_width="0.0dip"                    android:layout_height="fill_parent"                    android:layout_weight="1.0"                    android:background="@null" >                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent"                        android:gravity="bottom|center" >                        <RadioButton                            android:id="@+id/main_tab_four"                            style="@style/MMTabButton"                            android:drawableTop="@drawable/main_tab_selector4"                            android:text="@string/main_tab_four_text" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent"                        android:gravity="top|right|center"                        android:paddingRight="10.0dip" >                        <TextView                            android:id="@+id/main_tab_four_new_tv"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:background="@drawable/main_tab_unread_bg"                            android:gravity="center"                            android:minWidth="40.0dip"                            android:paddingLeft="6.0dip"                            android:paddingRight="6.0dip"                            android:text="@string/app_new"                            android:textColor="@color/white"                            android:textSize="10.0dip"                            android:visibility="invisible" />                    </LinearLayout>                </FrameLayout>            </LinearLayout>        </LinearLayout>    </FrameLayout></TabHost>

MMTabButton样式

<style name="MMTabButton">        <item name="android:textSize">12.0dip</item>        <item name="android:textColor">@color/main_tab_textcolor</item>        <item name="android:gravity">center_horizontal</item>        <item name="android:background">@null</item>        <item name="android:layout_width">0.0dip</item>        <item name="android:layout_height">wrap_content</item>        <item name="android:layout_marginLeft">0.70000005dip</item>        <item name="android:layout_marginRight">0.70000005dip</item>        <item name="android:button">@null</item>        <item name="android:layout_weight">1.0</item>    </style>

其中main_tab_textcolor和main_tab_selector1/2/3/4定义的都为selector，目的是为了实现点击改变图标和文字颜色

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/main_tab_selector1_selected" android:state_checked="true"/>    <item android:drawable="@drawable/main_tab_selector1_normal"/></selector>

下面是Java代码的实现：

import android.app.TabActivity;import android.content.Intent;import android.os.Bundle;import android.view.Menu;import android.widget.CompoundButton;import android.widget.RadioButton;import android.widget.TabHost;import android.widget.CompoundButton.OnCheckedChangeListener;public class MainActivity extends TabActivity implements OnCheckedChangeListener {private TabHost tabHost;      private Intent firstIntent;      private Intent secondIntent;      private Intent thirdIntent;      private Intent fourthIntent;      private RadioButton firstBt;      private RadioButton secondBt;      private RadioButton thirdBt;      private RadioButton fourthBt;    private int mState = 0;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);firstIntent = new Intent(this, ActionItems.class);secondIntent = new Intent(this, ActionItems.class);thirdIntent = new Intent(this, ActionItems.class);fourthIntent = new Intent(this, ActionItems.class);firstBt = (RadioButton) findViewById(R.id.main_tab_first);secondBt = (RadioButton) findViewById(R.id.main_tab_second);thirdBt = (RadioButton) findViewById(R.id.main_tab_three);fourthBt = (RadioButton) findViewById(R.id.main_tab_four);tabHost = getTabHost();tabHost.addTab(tabHost.newTabSpec("first").setIndicator("first").setContent(firstIntent));          tabHost.addTab(tabHost.newTabSpec("second").setIndicator("second").setContent(secondIntent));          tabHost.addTab(tabHost.newTabSpec("third").setIndicator("third").setContent(thirdIntent));          tabHost.addTab(tabHost.newTabSpec("fourth").setIndicator("fourth").setContent(fourthIntent));                firstBt.setOnCheckedChangeListener(this);        secondBt.setOnCheckedChangeListener(this);        thirdBt.setOnCheckedChangeListener(this);        fourthBt.setOnCheckedChangeListener(this);}public void setCurrentTab(int index) {        switchState(index);    }    private void switchState(int state) {    if (mState == state) {            return;        } // else continue        mState = state;        firstBt.setChecked(false);        secondBt.setChecked(false);        thirdBt.setChecked(false);        fourthBt.setChecked(false);        switch (mState) {            case 0:            firstBt.setChecked(true);            tabHost.setCurrentTabByTag("first");                break;            case 1:            secondBt.setChecked(true);            tabHost.setCurrentTabByTag("second");                break;            case 2:            thirdBt.setChecked(true);            tabHost.setCurrentTabByTag("third");                break;            case 3:            fourthBt.setChecked(true);            tabHost.setCurrentTabByTag("fourth");                break;            default:                break;        }    }@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {// TODO Auto-generated method stubif (isChecked) {switch (buttonView.getId()) {case R.id.main_tab_first:switchState(0);break;case R.id.main_tab_second:switchState(1);break;case R.id.main_tab_three:switchState(2);break;case R.id.main_tab_four:switchState(3);break;default:break;}}}}

由于布局文件中没有使用RadioGroup包着四个RadioButton，并且其中的RadioButton之间又掺杂着其他布局。所以简单的通过使用RadioGroup包着四个RadioButton是满足不了需求的，只能在代码中控制点击操作，即通过switchState方法模拟RadioGroup只能单选的事件。

0 2