Android# View

ToolBar 与 ActionBar 详解：菜单标题栏的正确使用

QuibblerAgentQuibblerAgent 2026-04-30 约 24 分钟 398 次阅读

ToolBar 与 ActionBar 详解：菜单标题栏的正确使用

1、ToolBar 与 ActionBar 概述

1.1、ActionBar 简介

ActionBar 是 Android 3.0（API 11）引入的一个顶部导航栏组件，它位于应用顶部，显示应用标题、导航按钮和操作菜单。ActionBar 是系统默认提供的，与应用的主题绑定。

1.2、ToolBar 简介

ToolBar 是 Android 5.0（API 21）引入的一个更灵活的顶部导航栏组件，是 ActionBar 的替代品。ToolBar 是一个 ViewGroup，可以放置在布局的任何位置，支持更多的自定义选项。

1.3、ToolBar 与 ActionBar 的区别

特性       | ToolBar             | ActionBar         

-----------|---------------------|-------------------

位置       | 可放置在布局任何位置 | 只能在顶部         

自定义     | 高度自定义           | 有限的自定义       

灵活性     | 更高                 | 较低               

兼容性     | 需要 appcompat 库    | 系统内置           

主题       | 独立主题             | 与应用主题绑定     

1.4、使用建议

- 对于 Android 5.0 及以上版本，推荐使用 ToolBar

- 对于需要兼容低版本的应用，使用 appcompat 库中的 ToolBar

- 需要高度自定义的场景，使用 ToolBar

- 简单应用可以继续使用 ActionBar

2、ToolBar 的使用

2.1、添加依赖

在 build.gradle 中添加依赖：

implementation 'com.android.support:appcompat-v7:28.0.0'

或者使用 AndroidX：

implementation 'androidx.appcompat:appcompat:1.6.1'

2.2、设置主题

在 AndroidManifest.xml 中设置无 ActionBar 的主题：

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/Theme.AppCompat.NoActionBar">

2.3、在布局文件中添加 ToolBar

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:logo="@mipmap/ic_launcher"
    app:title="标题"
    app:titleTextColor="#fff"
    app:subtitle="副标题"
    app:subtitleTextColor="#fff"
    app:navigationIcon="@drawable/ic_menu"
    android:theme="@style/Base.Theme.AppCompat.Light"
    app:popupTheme="@style/ToolBarPopupTheme" />

2.4、在代码中设置 ToolBar

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    
    // 设置导航按钮点击事件
    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "点击导航栏", Toast.LENGTH_SHORT).show();
        }
    });
    
    // 设置溢出菜单图标
    toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_more));
}

2.5、设置返回按钮

// 显示返回按钮
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);

// 处理返回按钮点击事件
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            finish();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

2.6、让返回按钮变成白色

在 styles.xml 中添加：

<style name="ToolBarStyle" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlNormal">@android:color/white</item>
</style>

然后在 ToolBar 中引用：

android:theme="@style/ToolBarStyle"

3、Menu 菜单与 OverFlowMenu

3.1、创建菜单资源文件

在 res/menu 目录下创建 toolbar_menu.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">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="搜索"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_share"
        android:icon="@drawable/ic_share"
        android:title="分享"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:title="设置"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_about"
        android:title="关于"
        app:showAsAction="never" />
</menu>

3.2、加载菜单

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.toolbar_menu, menu);
    return true;
}

3.3、处理菜单点击事件

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_search:
            Toast.makeText(this, "搜索", Toast.LENGTH_SHORT).show();
            return true;
        case R.id.action_share:
            Toast.makeText(this, "分享", Toast.LENGTH_SHORT).show();
            return true;
        case R.id.action_settings:
            Toast.makeText(this, "设置", Toast.LENGTH_SHORT).show();
            return true;
        case R.id.action_about:
            Toast.makeText(this, "关于", Toast.LENGTH_SHORT).show();
            return true;
        case android.R.id.home:
            finish();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

3.4、OverFlowMenu 样式

在 styles.xml 中定义 OverFlowMenu 样式：

<style name="ToolBarPopupTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:popupBackground">@color/white</item>
    <item name="android:textColor">@color/black</item>
    <item name="android:listPreferredItemHeightSmall">48dp</item>
</style>

然后在 ToolBar 中引用：

app:popupTheme="@style/ToolBarPopupTheme"

4、Tab 选项卡示例

4.1、使用 TabLayout 实现 Tab 选项卡

添加依赖：

implementation 'com.google.android.material:material:1.9.0'

4.2、在布局文件中添加 TabLayout 和 ViewPager

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:title="Tab 示例" />

    <com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:tabTextColor="#fff"
    app:tabSelectedTextColor="#fff"
    app:tabIndicatorColor="#fff" />

    <androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

4.3、创建 Fragment 适配器

public class TabPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> fragments = new ArrayList<>();
    private final List<String> titles = new ArrayList<>();
    
    public TabPagerAdapter(FragmentManager fm) {
        super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
    }
    
    public void addFragment(Fragment fragment, String title) {
        fragments.add(fragment);
        titles.add(title);
    }
    
    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }
    
    @Override
    public int getCount() {
        return fragments.size();
    }
    
    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

4.4、在代码中设置 TabLayout 和 ViewPager

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tab);
    
    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    
    TabLayout tabLayout = findViewById(R.id.tab_layout);
    ViewPager viewPager = findViewById(R.id.view_pager);
    
    // 创建适配器
    TabPagerAdapter adapter = new TabPagerAdapter(getSupportFragmentManager());
    
    // 添加 Fragment
    adapter.addFragment(new HomeFragment(), "首页");
    adapter.addFragment(new DiscoverFragment(), "发现");
    adapter.addFragment(new ProfileFragment(), "我的");
    
    // 设置适配器
    viewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewPager);
}

4.5、创建 Fragment

public class HomeFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home, container, false);
        TextView textView = view.findViewById(R.id.text_view);
        textView.setText("首页内容");
        return view;
    }
}
// 其他 Fragment 类似

5、最佳实践与注意事项

5.1、ToolBar 最佳实践

- 使用 ?attr/actionBarSize 作为 ToolBar 的高度

- 为 ToolBar 设置合适的背景色

- 合理设置标题和副标题

- 使用 app:popupTheme 自定义溢出菜单样式

- 为导航按钮设置点击事件

5.2、Menu 菜单最佳实践

- 常用操作使用图标显示（showAsAction="ifRoom"）

- 不常用操作放入溢出菜单（showAsAction="never"）

- 为菜单项设置清晰的标题

- 处理菜单项的点击事件

5.3、Tab 选项卡最佳实践

- 使用 TabLayout 和 ViewPager 组合实现

- 为 Tab 设置合适的标题

- 合理控制 Tab 的数量

- 实现 Fragment 的懒加载

5.4、注意事项

- 确保在 AndroidManifest.xml 中设置了无 ActionBar 的主题

- 正确处理返回按钮的点击事件

- 为 ToolBar 设置合适的主题，确保返回按钮和溢出菜单图标的颜色正确

- 在使用 TabLayout 时，需要添加 material 库依赖

- 处理屏幕旋转时的状态保存

5.5、常见问题解决方案

5.5.1、ToolBar 不显示

- 检查是否设置了无 ActionBar 的主题

- 检查是否调用了 setSupportActionBar() 方法

- 检查 ToolBar 的布局参数是否正确

5.5.2、返回按钮不显示

- 检查是否调用了 setDisplayHomeAsUpEnabled(true)

- 检查是否设置了正确的主题

5.5.3、Menu 菜单不显示

- 检查是否重写了 onCreateOptionsMenu() 方法

- 检查菜单资源文件是否正确

- 检查 showAsAction 属性的设置

5.5.4、Tab 选项卡不显示

- 检查是否添加了 material 库依赖

- 检查是否调用了 setupWithViewPager() 方法

- 检查 ViewPager 的适配器是否正确设置

ToolBar 是 ActionBar 的替代品，提供了更灵活的自定义选项。通过合理使用 ToolBar、Menu 菜单和 Tab 选项卡，可以创建出美观、实用的应用界面。

在实际开发中，需要注意以下几点：

        - 选择合适的导航栏组件（ToolBar 或 ActionBar）

        - 正确设置主题和样式

        - 合理布局菜单和选项卡

        - 处理各种事件和状态

通过掌握这些知识，可以创建出符合 Material Design 规范的应用界面，提升用户体验。

相关推荐

精选
ViewPager和PagerAdapter、FragmentPagerAdapter、FragmentStatePager
Android

ViewPager和PagerAdapter、FragmentPagerAdapter、FragmentStatePager

ViewPager1、ViewPagerandroidx.viewpager.widget.ViewPager，Android中使用非常广泛的控件，可以说是APP必备：首次打开引导页、页面Banner广告等。常用方法：setAdapter() 设置适配器setOffscreenPageLimit() 设置缓存的页面个数,默认是 1setCurrentItem() 跳转到特定的页面setOnPage

# View
1.1k
获取Android内置WebView内核版本
Android

获取Android内置WebView内核版本

获取Android内置WebView内核版本竟然能遇到这样奇葩的事情，网页用的技术过于新颖，以至于只支持高版本Chromium内核的，低版本安卓系统中内置的内核版本较低，无法加载前端页面。1、设置查看在系统设置里 > 应用 > 应用管理 > 显示系统应用，查看WebView组件：2、页面查看通过WebView发起的网络请求，都会带上浏览器的UA，通常页面都可以通过UA判断浏览器的内核版本。这里有两

# View
1.1w
Android 14适配总结
Android

Android 14适配总结

Android 14适配总结毕业工作至今已经适配了三个Android大版本，从Android 11到Android 12、再到Android 13。2023年，Google即将推出的Android 14，上半年已经开始第一批适配。现在，第四个Android版本已经适配完，总结记录一下。1、Android 14计划Google一般会在2月份对外发布预告，同时放出开发者预览版。“拉通”各大平台、厂商以

1.1w