Android标题栏Toolba和ActionBar对比精炼详解

最新推荐文章于 2024-08-10 07:47:37 发布

Chin_style

最新推荐文章于 2024-08-10 07:47:37 发布

阅读量1.3k

点赞数 3

分类专栏：基础知识文章标签： Toolbar ActionBar Andorid 标题栏

本文链接：https://blog.csdn.net/weixin_41101173/article/details/79854126

版权

基础知识专栏收录该内容

51 篇文章 6 订阅

订阅专栏

一、前期基础知识储备

上官方文档，A standard toolbar for use within application content.
A Toolbar is a generalization of action bars for use within application layouts. While an action bar is traditionally part of an Activity's opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy. An application may choose to designate a Toolbar as the action bar for an Activity using the setActionBar() method.
Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain a combination of the following optional elements:

由官方文档我们知道，Toolbar是一个标识应用程序和用户位置的窗口功能，并且给用户提供操作和导航模式。在大多数的情况下，当你需要突出展现用户行为或全局导航的activity中使用Toolbar，因为Toolbar能够使应用程序给用户提供一致的界面，并且系统能够很好根据不同的屏幕配置来适应操作栏的外观。你能够用Toolbar的对象的API来控制操作栏的行为和可见性。

二、上代码，具体实现

（1）先来看看Action Bar

在Android5.0之前，开发者定义标题栏的样式用的是Action Bar，Action Bar是一种新増的导航栏功能，在Android3.0之后加入到系统的API当中。不管是使用Toolbar还是ActionBar，定义好的标题栏都可以给提供一种全局统一的UI界面，使得用户在使用任何一款软件时都懂得该如何操作。

首先，我们看看AndroidStudio默认支持的样式，可以看到除了第一，其他都有标题栏的存在，我们选择“empty”新建一个项目，如图建立一个Application名为AnteaTaxt的应用程序。

进入第一个Activity界面，就会发现，该界面顶部已经出现了默认的背景为蓝色的标题栏，标题栏的文字就是应用程序的名字，这是系统默认的，如果开发者没有设置Activity的label标签，那么就会默认使用程序名。

1）修改标题栏文字

在AndroidManifest文件中的Activity中添加label标签，如下

       <activity
            android:name=".MainActivity"
            android:label="食蚁兽">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

运行效果如图：

2）删除默认标题栏

在Activity中调用hide()方法即可。

android.support.v7.app.ActionBar actionBar = getSupportActionBar();
        if(actionBar != null){
            actionBar.hide();
        }

运行效果如图：

3）为标题栏增加图标

ActionBar可以根据需要添加文字或者是图标，过多的话会隐藏在overflow按钮里面（右面的三点）当Activity启动时，调用onCreateOptionsMenu来取出所有按钮，加载menu资源，具体实现代码如下：

首先新建menu文件夹，在其中新建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_compose"
        android:icon="@drawable/search"
        app:showAsAction="always"
        android:title="搜索"/>
    <item
        android:id="@+id/action_delete"
        android:icon="@drawable/share"
        app:showAsAction="always"
        android:title="分享"/>
    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/touch"
        app:showAsAction="ifRoom"
        android:title="版本"/>
</menu>

这里用了三个item实现了三个Action按钮

id:每一个按钮的标识

icon : 定义的图标

title :要显示的文字（图标正常，通常不显示文字）

showAsAction :指定按钮显示位置

always表示永远显示在actionbar上，屏幕空间不足，不显示

ifRoom表示屏幕空间够显示在ActionBar中，不够就显示在overflow中

never则永远显示在overflow中

然后Activity中调用ActionBar的标准方法来加载menu资源

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }
    @Override
    public boolean onCreateOptionsMenu (Menu menu){
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu,menu);
        return super.onCreateOptionsMenu(menu);
    }
}

运行效果如图：

如上图所示，按照showAsAction指定值的不同，标题栏的加载样式也不同。控件足够就按第一幅图加载，空间不够就按第二幅图样式加载，点击右边的三个点的按钮之后，会得到第三幅图，可以看到之前的按钮都在里面了。

我们也可以再次修改代码，这次让图标和文字一起显示出来：

protected boolean onPrepareOptionsPanel(View view, Menu menu) {
        if (menu != null) {
            if (menu.getClass() == MenuBuilder.class) {
                try {
                    Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    }

运行效果如图：

———————————————————我是分隔线——————————————————

（2）接着我们在看看Toolbar

Toolbar是Android5.0（API 21）引入的，取代之前的ActionBar，它的本质是一个View，使用起来更加灵活，功能也更加强大。

1）Toolbar的组成如下：

①为Toolbar整体，继承ViewGroup，是个容器控件，自己包含了①—⑥，而⑦是Activity中引入的；

②为导航按钮，类型为ImageButton，可设置点击事件，用于返回上个页面或者滑出侧滑菜单；

xml属性：app:navigationIcon="@drawable/xxx"//引入一张图标；

③为Logo展示图，类型为ImageView，不响应事件，仅仅作为展示。

xml属性：app:logo="@drawable/xxx"//引入一张图标；

④为主标题，类型为TextView；xml属性：app:title

⑤为副标题，类型为TextView；xml属性：app:subtitle

⑥为普通子View，标题和菜单之间是留给我们添加子View的区域；

⑦为菜单ActionMenuView，负责管理选项菜单，菜单本身可以点击。

注意：Toolbar控件在布局文件中可以2个图标，3段文字，只有第一个图标可设置点击事件，标题栏的这个位置最常用来放置返回按钮图标。

2）具体使用Toolbar创建一个标题栏

①在主布局XML文件中使用Toolbar

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.administrator.anteatext.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:navigationIcon="@drawable/returrn"
        app:logo="@drawable/other"
        app:title="标题"
        app:subtitle="小标题">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:padding="4dp"
            android:text="其他文字区域"
            android:id="@+id/free_child"
            android:layout_gravity="center"
            android:background="#ffffff"/>
    </android.support.v7.widget.Toolbar>
</LinearLayout>

②在Activity代码中处理Toolbar

这是完整的代码段；

public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        android.support.v7.app.ActionBar actionBar = getSupportActionBar();
        if(actionBar != null){
            actionBar.hide();
        }
        //生成选项菜单
        mToolbar.inflateMenu(R.menu.main);
        //设置选项菜单的菜单项的点击事件
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                Toast.makeText(MainActivity.this, "点击了菜单项" + item.getTitle(), Toast.LENGTH_SHORT).show();
                return true;
            }
        });

        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "点击了导航按钮！", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

接着来拆分一下这段代码，可以分为三个部分：

//像获取普通控件那样获取Toolbar  
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);

//设置导航按钮的点击事件  
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {  
    @Override  
    public void onClick(View v) {  
        Toast.makeText(MainActivity.this, "点击了导航按钮！", Toast.LENGTH_SHORT).show();  
    }  
});

//生成选项菜单  
mToolbar.inflateMenu(R.menu.action_menu_main);  
//设置选项菜单的菜单项的点击事件  
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
    @Override  
    public boolean onMenuItemClick(MenuItem item) {  
        Toast.makeText(MainActivity.this, "点击了菜单项" + item.getTitle(), Toast.LENGTH_SHORT).show();  
        return true;  
    }  
});

③新建menu菜单文件main.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:title="item_01"  
        android:id="@+id/item_01"  
        app:actionViewClass="android.support.v7.widget.SearchView"  
        app:showAsAction="always"/>  
    <item android:title="item_02"  
        android:id="@+id/item_02"  
        />  
    <item android:title="item_03"  
        android:id="@+id/item_03"/>  
    <item android:title="item_04"  
        android:id="@+id/item_04"/>  
</menu>

运行效果如图，重点观察一共有三个元素可以创建交互操作：