本节引言
前面我们已经跟大家讲解了实现底部导航栏的两种方案,但是这两种方案只适合普通的情况,如果
是像新浪微博那样的,想在底部导航栏上的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"></