Android 自带的顶部导航栏的自定义
ActionBar 解析
理论上,actionBar 包含三部分,左侧的 NavigationIcon(也是用来唤醒侧滑菜单的按钮),中间的 CustomView 部分,以及右侧的 Menu 部分。每一部分需要使用不同的方式进行自定义。
左侧 - NavigationIcon
调用 appBarMain.toolbar 的 setNavigationIcon 方法设置自定义的图片。
// 获取图片资源
Resources res = MainActivity.this.getResources();
Bitmap bmp= BitmapFactory.decodeResource(res, R.raw.avatar);
// 修改图片大小
Bitmap newBmp = Utils.zoomImg(bmp, 120, 120);
Drawable drawable = new BitmapDrawable(getResources(), newBmp);
// 设置图片
binding.appBarMain.toolbar.setNavigationIcon(drawable);
这部分只能放置一个图片(按钮),用于页面跳转,或者唤醒侧滑菜单。
中间 - 可自定义的部分:
ActionBar actionBar = getSupportActionBar();
if(actionBar != null){
// Enable 自定义的 View
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
//绑定自定义的布局
actionbar_layout.xml actionBar.setCustomView(R.layout.actionbar_layout);
}
拿到 actionBar 后,调用 setCustomView 方法,把自定义的 layout(我这里就是一个搜索框)怼进去。
R.layout.actionbar_layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
<!-- 搜索框 -->
<LinearLayout
android:id="@+id/search_view_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="@drawable/search_view_bg"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@raw/search"
android:layout_gravity="center"
android:layout_marginLeft="5dp"/>
<TextSwitcher
android:id="@+id/search_text_switcher"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp">
</TextSwitcher>
</LinearLayout>
</FrameLayout>
这一部分的自由度是很高的,可以看到 layout 文件中的 FrameLayout 中理论上是可以添加任何你想要的东西。
右侧 - Menu
这个需要在 onCreateOptionsMenu 中调用 getMenuInflater
方法进行设计。
@SuppressLint({"ResourceType", "UseCompatLoadingForDrawables"})
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// 使用 Infalter 加载 menu layout
getMenuInflater().inflate(R.menu.main, menu);
}
R.menu.main:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<item
android:id="@+id/song_detail_toolbar_menu_share"
android:orderInCategory="100"
android:icon="@raw/menu"
app:showAsAction="always"
android:title="Specification" />
</menu>
这一部分使用的是 menu 控件,在其中添加 item 来添加按钮。
结语
Android 自带的 actionBar 的自定义功能其实是比较弱的,如果又想要去自定义它的话,可以按照上面的模式,分而治之。
个人实践,如有问题或疏漏,敬请指正。