App Bar Google官方课程翻译

最新推荐文章于 2024-04-21 16:34:55 发布

痕迹天涯119

最新推荐文章于 2024-04-21 16:34:55 发布

阅读量7.1k

点赞数

文章标签： app-bar 谷歌 toolbar actionbar Android

原文参见：https://developer.android.com/training/appbar/index.html

添加App Bar

app bar,也叫做action bar，在你应用的Activity中是最重要的设计元素之一。因为它提供一个可视化的结构和可互动的元素为用户所熟知的。使用app bar使你的应用与其他应用保持一致，有利于用户更快的使用你的应用并获得较好的体验。app bar的主要功能如下：

作为一个专用空间用于标识你的应用程序和指示用户的位置
通过可预见的方式访问一个重要的操作：例如搜索
支持应用的导航和视图切换（通过Tab或下拉列表）

设置App Bar

在大多数app布局中，action bar在一边展示了activity的title，并且在另一边展示了一个(overflow)
溢出菜单。即使在非常简单的app结构中，app bar（action 是app
bar的具体表现）仍然对用户提供了有用的信息，并且给app带来了一致的感觉和体验。

这里写图片描述

下面的小字简述（不翻译了，直接概述）：

用toolbar吧用toolbar吧用toolbar,为啥子要用toolbar？toolbar兼容好啊兼容好，属于support library库的toolbar可以支持更丰富的效果以及特性，比如md风格设计，更好的可扩性等等，，，

在Activity上添加一个ToolBar

一. 在工程中添加v7 appcompat 支持包。

二. 让activity继承AppCompatActivity:

public class MyActivity extends AppCompatActivity {
  // ...
}

三. 在manifest文件中，在元素中设置任意一个appcompat中带有NoActionBar的主题。

<application
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

四. 在activity的布局文件中添加toolbar，例如下面的代码，给toolbar添加一个浮动效果（也就是在Z轴上有一定的dp，material design）：

<android.support.v7.widget.Toolbar
   android:id="@+id/my_toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background="?attr/colorPrimary"
   android:elevation="4dp"
   android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

material design 建议为app bar 的elevation设置为4dp。

五. 在activity的onCreate()方法中调用setSupportActionBar()方法，来设置toolbar作为app bar:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
    setSupportActionBar(myToolbar);
    }

现在，app就有了一个toolbar，默认情况下toolbar只包含app的名字（或者还有一个overflow menu），自己可以在toolbar或者overflow menu中添加更多的action

使用App Bar 的工具方法

一旦在activity中设置了toolbar，你就可以使用各种各样的由v7 appcompat support library 提供的各种各样的方法。

使用方法时，首先调用getSupportActionBar() 方法，得到一个ActionBar对象的索引，一旦得到了索引，就可以调用任何的ActionBar方法了，例如，隐藏app bar时，调用 ActionBar.hide().

添加行为处理

app bar 允许用户自己增加action，可以把比较重要的action放在app bar的右边，例如，一个相册应用可以在app bar上增加分享和创建相簿的
action，这样用户在浏览照片的时候就可以直接点击app bar上的按钮来对照片进行操作。

app bar的空间是有限的，如果定义的action超过了app bar可以容纳的最大数，这些action就会被放入overflow menu中，当然，action也可以
被设置为只在overflow中显示。

这里写图片描述

增加Action Buttons

不论是在app bar上直接显示的，还是在overflow中的action button都是在menu resource中定义的，想要创建一个action，
首先要在res/menu/目录下创建一个xml文件。

下面是一个xml例子：

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- "Mark Favorite", should appear as action button if possible -->
    <item
        android:id="@+id/action_favorite"
        android:icon="@drawable/ic_favorite_black_48dp"
        android:title="@string/action_favorite"
        app:showAsAction="ifRoom"/>

    <!-- Settings, should always be in the overflow -->
    <item android:id="@+id/action_settings"
          android:title="@string/action_settings"
          app:showAsAction="never"/>

</menu>

app:showAsAction属性定义了action在app bar上的显示方式，如果设置为app:showAsAction=”ifRoom”，就代表如果app bar上面有空间，
就进行显示，如果没有空间，就放在overflow中显示（默认在overflow中只显示title）；如果设置为app:showAsAction=”never”，
就表示此action将总是显示在overflow中。

系统使用action icon作为action button显示在app bar上，你可以在Material Icons
找到很多有用的icons.

对Actions做出响应

当用户点击app bar上的一个action的时候，系统会调用activity的onOptionsItemSelected()回调方法，并且通过MeunItem
对象来表明哪一个action被点击，在onOptionsItemSelected()中，调用MenuItem.getItemId()方法来确定被点击的action，
此方法返回的ID就是你在中为Android:id定义的值。

例如，下面的代码检查了哪一个action被点击，用过没有辨别出来用户点击的那个action，就会调用父类中的方法：

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_settings:
            // User chose the "Settings" item, show the app settings UI...
            return true;

        case R.id.action_favorite:
            // User chose the "Favorite" action, mark the current item
            // as a favorite...
            return true;

        default:
            // If we got here, the user's action was not recognized.
            // Invoke the superclass to handle it.
            return super.onOptionsItemSelected(item);

    }
}

添加回退按钮

一个好的app应该让用户方便的回到app的主界面，一个比较简单的方法是为每一个activity设置一个回退按钮（除了mainActivity），当用户
点击回退按钮的时候可以回到上一个activity(这里我译者感觉和back按钮就有点像了，所以我们可以自定义其他的动作)。

本课程向你展示了怎么通过在manifest声明一个activity的parent来向app bar中添加一个回退按钮。

定义一个Parent Activity

要支持回退操作，需要在manifest设置一个Android:parentActivityName属性，此属性在android4.1（API 16）被使用，如果
要想向下兼容旧的android版本，可以通过定义键值对的方式来设置，此属性中key是android.support.PARENT_ACTIVITY,值是
parent activity的名字.

例如,假如你的app有一个main activity，名字是MainActivity，并且有一个子Activity(也就是从MainActivity可以跳转到此Activity),
下面的manifest文件声明了两个activity并定义了parent和child之间的关系：

<application ... >
    ...

    <!-- The main/home activity (it has no parent activity) -->

    <activity
        android:name="com.example.myfirstapp.MainActivity" ...>
        ...
    </activity>

    <!-- A child of the main activity -->
    <activity
        android:name="com.example.myfirstapp.MyChildActivity"
        android:label="@string/title_activity_child"
        android:parentActivityName="com.example.myfirstapp.MainActivity" >

        <!-- Parent activity meta-data to support 4.0 and lower -->
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.example.myfirstapp.MainActivity" />
    </activity>
</application>

显示并激活回退按钮

显示回退按钮，需要调用app bar的setDisplayHomeAsUpEnabled()方法，通常此方法在activity被创建的时候调用，例如下
面的代码示例：

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

    // my_child_toolbar is defined in the layout file
    Toolbar myChildToolbar =
        (Toolbar) findViewById(R.id.my_child_toolbar);
    setSupportActionBar(myChildToolbar);

    // Get a support ActionBar corresponding to this toolbar
    ActionBar ab = getSupportActionBar();

    // Enable the Up button
    ab.setDisplayHomeAsUpEnabled(true);
}

你不需要在onOptionsItemSelected()中去手动捕获回退按钮，而是此action应该被其超类所调用，超类方法响应这个回退按钮，并返回到在manifest所定义的parent activity。

Action Views 和 Ation Providers

v7 appcompat support library toolbar 为了使用户能够更好的和app进行互动，而提供了很多种不同的方式，先前的课程描述了怎么去定义一个action，它既可以是一个app bar上的按钮，也可以是overflow menu中的一个item，本课程将要介绍的是如何去添加两个通用的组件：

行为视图作为一个行为，它可以在app bar 内部提供丰富的操作，例如，一个搜索视图允许用户在app bar 的内部去输入他们的搜索文本，而不用去跳转activity或者fragments.
行为提供器可自定义其布局，它可以以一个按钮或者菜单项的形式初始化显示，当用户点击它的时候，行为提供器以任何你想定义的方式控制action 的行为，例如，点击action provider的时候，响应显示出一个menu。

android support libraries提供了几个专门的action view和action provider组件，例如，SearchView可以使用户进入搜索框，而ShareActionProvider提供了向其它app分享信息的功能，你也可以定义自己的action views和action providers.

添加Action View

要添加一个action view，和添加action button一样，需要在menu资源文件中增加，在内增加以下两个元素：

actionViewClass:实现了actin的类。
actionLayout:描述action 组件的布局资源。

设置showAsAction属性为ifRoom|collapseActionView或者never|collapseActionView, collapseActionView标签指明了action view的显示方式，如果action view在appbar上，actionview应该作为一个图标被显示，如果是在overflow中，应该作为一个item被显示，当用户点击action view时，action view 填充app bar。

以下代码展示了在app bar中添加一个SearchView:

<item android:id="@+id/action_search"
     android:title="@string/action_search"
     android:icon="@drawable/ic_search"
     app:showAsAction="ifRoom|collapseActionView"
     app:actionViewClass="android.support.v7.widget.SearchView" />

如果用户没有点击action view，actionview展示由Android:icon 定义的图片（如果没有足够的空间，actionview会被添加到overflow中）。当用户点击icon或者menu item时，search组件将会填充整个toolbar，允许用户去进行交互。

这里写图片描述
图示：当用户点击action view 时，view的UI填充了整个app bar.

如果你需要配置action view，可以在onCreateOptionsMenu()回调方法中进行操作，可以通过调用静态方法getActionView()来获取action view的对象索引，例如，下面的代码获得了先前样例中定义的SearchView的对象索引：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main_activity_actions, menu);

    MenuItem searchItem = menu.findItem(R.id.action_search);
    SearchView searchView =
            (SearchView) MenuItemCompat.getActionView(searchItem);

    // Configure the search info and add any event listeners...

    return super.onCreateOptionsMenu(menu);
}

当action view扩展时做出响应

如果action view的元素中有collapseActionView 标签，当用户点击actionview时，内置的处理方法–onOptionItemSelected()扩展action view，如果你的actiity子类覆写了onOptionItemSelected()方法，在你覆写的方法中必须调用super.onOptionsItemSelected()，使超类可以扩展action view。

如果想要在action view 扩展或者collapsed时做一些其它事，你可以定义一个实现了MenuItem.OnActionExpandListener的类，并通过setOnActionExpandListener()设置监听，例如，当一个actionview扩展或者collapse的时候，你想要更新activity，正如下面代码所展示的：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.options, menu);
    // ...

    // Define the listener
    OnActionExpandListener expandListener = new OnActionExpandListener() {
        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            // Do something when action item collapses
            return true;  // Return true to collapse action view
        }

        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            // Do something when expanded
            return true;  // Return true to expand action view
        }
    };

    // Get the MenuItem for the action item
    MenuItem actionMenuItem = menu.findItem(R.id.myActionItem);

    // Assign the listener to that action item
    MenuItemCompat.setOnActionExpandListener(actionMenuItem, expandListener);

    // Any other things you have to do when creating the options menu…

    return true;
}

添加一个Action Provider

和action view一样，首先在menu文件中添加一个，在中增加一个actionProviderClass属性，并且设置它的值为action provider类的全类名。

例如，接下来的代码定义了一个ShareActionProvider,这是一个定义在support library中的部件，它可以让你分享数据到其他的app：

<item android:id="@+id/action_share"
    android:title="@string/share"
    app:showAsAction="ifRoom"
    app:actionProviderClass="android.support.v7.widget.ShareActionProvider"/>

在这个例子中，不需要定义一个icon，因为ShareActionProvider提供有自己的图标，如果你正在使用一个自定义的action，请定义一个图标。

在前面MD（一）中已经详细介绍了toolbar的使用，本次主要是在翻译的同时进行一个全面的概括，且第四篇是对前文未提到的扩充，OK，翻译完毕，如有遗漏或错误，欢迎指正。