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

huitailang_1988 2014-10-29 11:24:34

本帖只实现了底部导航（带小红点提示）的前台布局和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>



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

最终效果图：
...全文
22225 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
__sumile 2015-09-23
  • 打赏
  • 举报
 回复
妈蛋，我没看到楼上的！！我不是复制的！！ 那就看这个，里面好多：https://github.com/Trinea/android-open-project#%E5%8D%81%E4%B8%80tipviewhttps://github.com/Trinea/android-open-project#%E5%8D%81%E4%B8%80tipview
__sumile 2015-09-23
  • 打赏
  • 举报
 回复
看看这个： https://github.com/jgilfelt/android-viewbadger
haoxiang12345 2015-09-23
  • 打赏
  • 举报
 回复
github 上有开源的viewbadge 类库 其demo也是用tahost实现的你参考下 https://github.com/jgilfelt/android-viewbadger
qq_26763799 2015-09-22
  • 打赏
  • 举报
 回复
引用 6 楼 u010144771 的回复:
关于底部的那些图片应该设置多大？安卓的适配真让人蛋疼，公司美工也不懂，让我拿主意
ipone研究出人操作时中指点击的大小大概是44px*44px这么大，大拇指点击的大小是99px*99px区域，一般设成这两个之间美观就行
u011096354 2015-09-22
  • 打赏
  • 举报
 回复
楼主 demo直接上比较容易理解
bai1124 2015-08-13
  • 打赏
  • 举报
 回复
给一下包吧~这么弄总是有错~麻烦楼主了
你看咩啊 2015-05-04
  • 打赏
  • 举报
 回复
关于底部的那些图片应该设置多大？安卓的适配真让人蛋疼，公司美工也不懂，让我拿主意
sinat_27138995 2015-04-09
  • 打赏
  • 举报
 回复
不错的资源。。。
Hare_ 2015-04-09
  • 打赏
  • 举报
 回复
不错的资源。。。
ccc43542876 2015-01-22
  • 打赏
  • 举报
 回复
能否直接给个link呢。。我们去下
huitailang_1988 2014-10-29
  • 打赏
  • 举报
 回复
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;

	@Override
	protected 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;
        }
    }

	@Override
	public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
		// TODO Auto-generated method stub
		if (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;
			}
		}
	}

}
huitailang_1988 2014-10-29
  • 打赏
  • 举报
 回复
操蛋的CSDN竟然给出“创建失败文章内容 必须在10到10000字之内”的提示，死活发不了全文续接上文 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>
由于布局文件中没有使用RadioGroup包着四个RadioButton，并且其中的RadioButton之间又掺杂着其他布局。所以简单的通过使用RadioGroup包着四个RadioButton是满足不了需求的，只能在代码中控制点击操作，即通过switchState方法模拟RadioGroup只能单选的事件。
Android带数字或红点的底部导航拦和联网等待加载动画示例
主要介绍了Android带数字或红点的底部导航拦和联网等待加载动画示例，具有一定的参考价值，有兴趣的同学可以了解一下。
Kotlin中使用BottomNavigationView实现底部导航
Kotlin中使用BottomNavigationView实现底部导航+小红点消息提示
Android底部导航栏（带加号、红点提示、数字消息）
前言 因为公司好多项目会用到底部导航栏，大都千篇一律，无非2-5个Tab（可能会有些点击动画、红点提示或者中间多个加号）总是重复相同的操作...所以...很懒的我希望几行代码就能实现这个效果（少敲一行是一行） 效果图 实现 依赖 Step 1. Add it in your root build.gradle at the end of repositories: allp...
android加号底部导航栏,EasyNavigation Android 底部导航栏████几行代码实现 Tab 导航（随意定制加号，带红点消息提示） @codeKK Android开源站...
几行代码轻松实现底部导航栏(Tab 文字图片高度随意更改)；中间可添加加号按钮，也可添加文字；(足够的属性满足你需要实现的加号样式)如果还不能满足、中间可添加自定义 View；Tab 中随意添加小红点提示、数字消息提示；点击按钮可跳转界面、也可作为 Tab 切换 Fragment；2.0.+迁移 AndroidX、支持 ViewPager2;剥离导航栏、不传 Fragment 则不会创建 View...
Android

80,359

社区成员

91,290

社区内容

发帖
与我相关
我的任务
社区描述
移动平台 Android
androidandroid-studioandroidx 技术论坛（原bbs）
社区管理员
  • Android
  • yechaoa
  • 失落夏天
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章