Android底部导航栏实现

Android底部导航栏实现

总结一下安卓底部导航栏的实现流程。

导航栏效果图:

方法一:多层嵌套LinearLayout

  • 放置一个横向的LinearLayout;
  • 在里面依次放置若干纵向的LinearLayout;
  • 再在里面放置一个ImageView和一个TextView,分别显示图片和文字说明。

这种方式的问题是当布局嵌套过多时,可能会产生性能问题,引起卡顿。

方法二:RadioGroup+RadioButton

首先准备好适当尺寸的图片:

然后编写布局文件:

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

<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

<resources>
<color name="colorPrimary">#6200EEcolor>
<color name="colorPrimaryDark">#3700B3color>
<color name="colorAccent">#03DAC5color>
<color name="normal_btn_bg">#4674FDcolor>
<color name="selected_btn_bg">#0F46AFcolor>
<color name="transparent">#50FFFFFFcolor>
<color name="not_selected">#999999color>
<color name="selected">#D075EAcolor>
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.addToBackStack(null)//是否使用返回栈
transaction.commit()
}

fun switchView(view: View){
when (view.id) {
R.id.id_nav_message -> changeFragment(MessageFragment())
R.id.id_nav_personal -> changeFragment(PersonalFragment())
}
}

然后自己再动态添加需要的Fragment就好了。

作者

Luan Blesson

发布于

2020-09-24

更新于

2020-09-28

许可协议

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×