android底部导航 fragment,5.2.3 Fragment实例精讲——底部导航栏的实现(方法3)

本节引言

前面我们已经跟大家讲解了实现底部导航栏的两种方案，但是这两种方案只适合普通的情况，如果

是像新浪微博那样的，想在底部导航栏上的item带有一个红色的小点，然后加上一个消息数目这样，

前面两种方案就显得无力了，我们来看看别人的APP是怎么做的，打开手机的开发者选项，勾选里面的：

显示布局边界，然后打开我们参考的那个App，可以看到底部导航栏是这样的：

从上面这个图我们就可以看出，这种底部导航栏不是简单的TextView或者RadioGroup构成的，

大概布局方案可能是：外层一个LinearLayout，中间一个RelativeLayout，而在中间有一个TextView，

然后再在TextView的右上角有一个红色圆圈背景的TextView或者一个红色的小点；

大概就这样，而这些小点平时的时候应该设置的不可见，当收到信息推送，即有相关类别信息的

时候再可见，并且显示对应的信息数目！那么下面我们就来实现下这种底部导航栏的效果，

另外，为了方便演示，这里就不演示Fragment的切换效果了！另外顺道复习下Fragment获得Activity

中的组件的知识点！

1.实现效果图：

为了方便理解，这里通过点击按钮的形式，模拟收到推送信息，然后显示红色点！

运行效果图：

2.实现流程：

好的，接下来我们就来实现上面这个效果~

Step 1：相关资源文件的准备：

和前面一样，准备好drawable系列的资源：

文字资源：tab_menu_text.xml

图标资源：tab_menu_better.xml

照着把其他三个也撸出来~！

Step 2：编写activity的布局代码：

因为四个选项的TextView以及右上角的红点数字属性都差不多，如下：

android:id="@+id/tab_menu_channel"

android:layout_marginTop="5dp"

android:layout_width="wrap_content"

android:layout_height="48dp"

android:layout_centerInParent="true"

android:textColor="@drawable/tab_menu_text"

android:drawableTop="@drawable/tab_menu_channel"

android:text="@string/tab_menu_alert"/>

android:layout_width="20dp"

android:layout_height="20dp"

android:background="@mipmap/bg_num"

android:layout_toRightOf="@+id/tab_menu_channel"

android:layout_marginLeft="-10dp"

android:text="99+"

android:textSize="12sp"

android:gravity="center"

android:textColor="@color/text_white"/>

我们将他们抽取出来，写到style.xml里：

5dp

wrap_content

48dp

true

@drawable/tab_menu_text

20dp

20dp

@mipmap/bg_num

-10dp

12sp

center

@color/text_white

然后开始编写我们的activity.xml布局：

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

android:id="@+id/ly_top_bar"

android:layout_width="match_parent"

android:layout_height="48dp"

android:background="@color/bg_topbar"></