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

方法一:多层嵌套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就好了。