You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Android应用中实现如下示例图所示的ActionBar样式

嘿,我来帮你搞定Android里ActionBar的样式定制!虽然没看到你说的示例图,但我把最常用的几种实现方式整理好了,基本能覆盖大部分常见的样式需求,你可以对着你的示例图对应调整~

一、自定义ActionBar布局(最灵活的方式)

如果你的示例图是那种完全自定义的样式——比如标题居中、左侧返回键+右侧自定义按钮、中间带图标之类的,用自定义布局绝对是最靠谱的选择:

  1. 首先在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>
  1. 接着在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的基础样式(无需自定义布局)

如果你的示例图只是需要修改背景色、标题文字样式、返回箭头颜色这类基础样式,直接通过主题配置就能搞定:

  1. 在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>
  1. 最后在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添加右侧菜单按钮

如果示例图里有右侧的菜单选项,可以通过菜单文件快速实现:

  1. 在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>
  1. 在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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 10:12:18