如何在Android应用中实现如下示例图所示的ActionBar样式
嘿,我来帮你搞定Android里ActionBar的样式定制!虽然没看到你说的示例图,但我把最常用的几种实现方式整理好了,基本能覆盖大部分常见的样式需求,你可以对着你的示例图对应调整~
一、自定义ActionBar布局(最灵活的方式)
如果你的示例图是那种完全自定义的样式——比如标题居中、左侧返回键+右侧自定义按钮、中间带图标之类的,用自定义布局绝对是最靠谱的选择:
- 首先在
res/layout目录下创建一个自定义布局文件,比如命名为custom_action_bar.xml,这里给你一个通用示例:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/your_action_bar_bg" android:gravity="center_vertical" android:orientation="horizontal" android:paddingHorizontal="16dp"> <!-- 左侧返回按钮 --> <ImageView android:id="@+id/iv_back" android:layout_width="24dp" android:layout_height="24dp" android:src="@drawable/ic_back" /> <!-- 中间标题区域(可以是文字+图标的组合) --> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="horizontal"> <ImageView android:layout_width="28dp" android:layout_height="28dp" android:src="@drawable/ic_app_logo" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:text="你的应用标题" android:textColor="@color/white" android:textSize="18sp" android:textStyle="bold" /> </LinearLayout> <!-- 右侧自定义按钮 --> <TextView android:id="@+id/tv_menu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="菜单" android:textColor="@color/white" android:textSize="16sp" /> </LinearLayout>
- 接着在Activity的
onCreate方法里启用这个自定义布局:
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 获取ActionBar实例 ActionBar actionBar = getSupportActionBar(); if (actionBar != null) { // 隐藏默认的标题和图标 actionBar.setDisplayShowTitleEnabled(false); actionBar.setDisplayShowHomeEnabled(false); // 开启自定义布局模式 actionBar.setDisplayShowCustomEnabled(true); // 设置我们刚创建的自定义布局 actionBar.setCustomView(R.layout.custom_action_bar); // 适配不同屏幕的宽度问题,可选但建议加上 View customView = actionBar.getCustomView(); ActionBar.LayoutParams params = new ActionBar.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT ); customView.setLayoutParams(params); // 给自定义控件绑定点击事件 ImageView ivBack = customView.findViewById(R.id.iv_back); ivBack.setOnClickListener(v -> onBackPressed()); TextView tvMenu = customView.findViewById(R.id.tv_menu); tvMenu.setOnClickListener(v -> { // 这里写你的菜单点击逻辑 }); } }
二、修改默认ActionBar的基础样式(无需自定义布局)
如果你的示例图只是需要修改背景色、标题文字样式、返回箭头颜色这类基础样式,直接通过主题配置就能搞定:
- 在
res/values/styles.xml里定义一个自定义的ActionBar主题:
<style name="CustomActionBarTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- 设置ActionBar的背景色 --> <item name="colorPrimary">@color/your_action_bar_bg</item> <!-- 设置标题文字的颜色 --> <item name="android:titleTextColor">@color/white</item> <!-- 设置ActionBar的高度 --> <item name="actionBarSize">56dp</item> <item name="android:actionBarSize">56dp</item> <!-- 设置返回箭头等控件的颜色 --> <item name="colorControlNormal">@color/white</item> </style>
- 最后在
AndroidManifest.xml里给对应的Activity应用这个主题:
<activity android:name=".MainActivity" android:theme="@style/CustomActionBarTheme"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>
三、给ActionBar添加右侧菜单按钮
如果示例图里有右侧的菜单选项,可以通过菜单文件快速实现:
- 在
res/menu目录下创建menu_action_bar.xml文件:
<?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"> <!-- 显示在ActionBar上的搜索按钮 --> <item android:id="@+id/action_search" android:icon="@drawable/ic_search" android:title="搜索" app:showAsAction="ifRoom" /> <!-- 隐藏在更多菜单里的选项 --> <item android:id="@+id/action_more" android:icon="@drawable/ic_more" android:title="更多" app:showAsAction="never" /> </menu>
- 在Activity里重写菜单相关的方法:
@Override public boolean onCreateOptionsMenu(Menu menu) { // 加载菜单布局 getMenuInflater().inflate(R.menu.menu_action_bar, menu); return true; } @Override public boolean onOptionsItemSelected(@NonNull MenuItem item) { int id = item.getItemId(); if (id == R.id.action_search) { // 处理搜索按钮的点击逻辑 return true; } else if (id == R.id.action_more) { // 处理更多按钮的点击逻辑 return true; } return super.onOptionsItemSelected(item); }
内容的提问来源于stack exchange,提问作者abhi
相关产品推荐
相关产品推荐

