总结一下安卓底部导航栏的实现流程。
导航栏效果图：
方法一：多层嵌套LinearLayout
- 放置一个横向的LinearLayout；
- 在里面依次放置若干纵向的LinearLayout；
- 再在里面放置一个ImageView和一个TextView，分别显示图片和文字说明。
这种方式的问题是当布局嵌套过多时，可能会产生性能问题，引起卡顿。
首先准备好适当尺寸的图片：
然后编写布局文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
| <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/id_diverline" />
<View
android:id="@+id/id_diverline"
android:layout_above="@+id/id_bottom_tags"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#C2C5CE"/>
<LinearLayout
android:id="@+id/id_bottom_tags"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:background="@drawable/bt_tag_bg"
android:orientation="horizontal">
<RadioGroup
android:id="@+id/radio_group"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="@color/transparent"
android:gravity="center"
android:orientation="horizontal">
<RadioButton
android:id="@+id/id_nav_message"
android:layout_width="0dp"
android:checked="true"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="@color/transparent"
android:button="@null"
android:clickable="true"
android:drawablePadding="2dp"
android:drawableTop="@drawable/nav_menu_message"
android:gravity="center"
android:onClick="switchView"
android:text="消息"
android:textColor="@drawable/nav_text_color"
android:textSize="10sp" />
<RadioButton
android:id="@+id/id_nav_personal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="@color/transparent"
android:button="@null"
android:clickable="true"
android:drawablePadding="2dp"
android:drawableTop="@drawable/nav_menu_personal"
android:gravity="center"
android:onClick="switchView"
android:text="我的"
android:textColor="@drawable/nav_text_color"
android:textSize="10sp" />
</RadioGroup>
</LinearLayout>
</RelativeLayout>
|
此处需要注意一下几点：
android:background属性指定为自定义的透明背景；android:checked属性只在第一个标签上添加；android:button="@null"貌似是去掉RadioButton原生按钮的（不太清楚）；android:onClick属性指定在点击时响应哪个方法；android:drawableTop属性指定为自定义的图片；android:textColor指定为需要的字体颜色；
以下为个人使用的颜色，仅供参考：
1
2
3
4
5
6
7
8
9
10
11
| <?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#6200EE</color>
<color name="colorPrimaryDark">#3700B3</color>
<color name="colorAccent">#03DAC5</color>
<color name="normal_btn_bg">#4674FD</color>
<color name="selected_btn_bg">#0F46AF</color>
<color name="transparent">#50FFFFFF</color>
<color name="not_selected">#999999</color>
<color name="selected">#D075EA</color>
</resources>
|
接下来实现switchView方法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| private fun changeFragment(fragment: Fragment) {
val fragmentManager: FragmentManager = supportFragmentManager
val transaction: FragmentTransaction = fragmentManager.beginTransaction()
transaction.replace(R.id.fragment, fragment)
transaction.commit()
}
fun switchView(view: View){
when (view.id) {
R.id.id_nav_message -> changeFragment(MessageFragment())
R.id.id_nav_personal -> changeFragment(PersonalFragment())
}
}
|
然后自己再动态添加需要的Fragment就好了。
