设置应用栏（Setting Up the App Bar）

今天星期五，刚从体育场打完球回来，洗了洗脚。明天还要继续上班，也是非常艰难。近期我的小腰有点不舒服，就早点睡觉歇息。

所以今天就简单的翻译一篇Android官方站点上的文章，我会加一些补充。

原文地址：http://developer.android.com/intl/zh-cn/training/appbar/setting-up.html

兴许翻译的文章链接：http://blog.csdn.net/leilifengxingmw/article/details/51174113，有兴趣的能够接着看。

这节课程教你

1给一个Activity加入工具栏
2运用应用栏有用的方法

你还应该阅读

设置支持库

工具栏最主要的形式是在一端显示Activity的标题，在还有一端显示一个overflow菜单。

即使是这样的最简单的形式，工具栏依旧能够给用户提供有用的信息，使应用看起来更加协调。

这里写图片描写叙述

图表1.一个有应用标题和overflow菜单的应用栏

从Android3.0（APIlevel 11）開始，全部的Activity使用默认主题的Action Bar（工具栏）作为app bar（应用栏）。可是，随着Android的公布，应用栏的特性被逐渐加入到了原生的工具栏上。因此，原生的工具栏在执行不同Android版本号的设备上表现有所不同。

相反，近期的特性被加入到了支持库的ToolBar（工具栏）上。不论什么能够使用支持库的设备都能够使用ToolBar.

因此。你应该使用这些支持库里的ToolBar类来实现你的Acitivity的应用栏（App Bar）。使用支持库的toolBar能够保证你在不同设备上有同样的特性。比如，toolBar会给执行Android2.1（API level 7）或更高版本号的设备提供材料设计（Material design）体验，可是原生的工具栏（action bar）仅仅有在执行Android5.0（API level 21）或更高版本号的设备上才提供材料设计体验。

给一个Activity加入ToolBar

Toolbar
1加入 v7 accompat支持库到你的project中，在 Support Library Setup章节中描写叙述的那样。
2保证Activity继承自 AppCompatActivity

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

注意：更改你的app中的全部的Activity都继承自AppCompactActivity以使用ToolBar取代 app bar。

3 在app的mainfest.xml 文件里设置节点使用appcompat的一个没有NoActionBar（工具栏）的主题。

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

4 在 Activity的不居中加入一个ToolBar。
比如以下的布局代码加入了一个Toolbar并且使它浮动在activity的上面。

<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"/>

材料设计说明建议 app bars 有4dp的仰角（elevation）。由于你要使用toolBar作为app bar。所以要把toolbar放在activity布局的顶部

5 在Activity的onCreate（）方法中调用Activity的setSupportActionBar()方法来传递这个activity的toolbar。
这种方法设置传递过来的toolbar作为这个activity的app 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);
    }

你的应用如今有了一个主要的 action bar。

默认情况下，这个action bar 仅仅包括app的标题和一个overflow 菜单。overflow菜单中的菜单选项在初始的时候仅仅包括一个settings项。亦能够向action bar和overflowmenu加入很多其它的 actions项，就像 Adding and Handling Actions.（我会在兴许的文章中接着翻译这篇文章）描写叙述的那样。

使用 App Bar有用的方法

一旦你设置了toolbar作为activity的app bar，你就能够使用v7 accompat支持库里ActionBar类中的非常多用用的方法了。

这些方法能够让你做非常多有用的事情，比如隐藏和显示 app bar。

使用ActionBar的方法，首先调用Activity的getSupportActionBar（）方法。

这种方法会返回一个 appcompat ActionBar 的引用。一旦你得到了这些引用你就能够 ActionBar的任一方法来调整app bar。比如能够调用 ActionBar的hide（）方法来隐藏app bar。

上面说的都是理论性的东西，如今在实际的project中实践一下。实践是检验真理的唯一标准。
1 打开android studio 新建一个Phone&Tablet Module,点击next，选择 add no activity，点击finish。例如以下图所看到的。
这里写图片描写叙述
2 在新建好的module的java/learntoolbar/文件夹下新建一个MainActivity.java继承自AccompatActivity。在res文件夹下新建一个layout文件夹在layout文件夹下新建一activity_main.xml文件作为MainActivity的布局。最后要在androidmanifest.xml文件里注冊MainActivity。文件夹结构例如以下所看到的。
这里写图片描写叙述
3 androidmanifest.xml 文件

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.learntoolbar">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>

    </application>

</manifest>

注意：上面application节点的android:theme=”@style/AppTheme”。这个AppTheme是系统自己主动生成的，而activity节点的android:theme=”@style/AppTheme.NoActionBar” 是自己加入的，如今打开values文件夹下的style。xml文件看一看。
style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

</resources>

4接下来在activity_main.xml文件里加入一个toolbar控件

<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" />

5接下来在MainActivity中找到这个toolbar

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

    }

这时我们执行一下先看看效果。
这里写图片描写叙述

什么情况，说好的我的overflow 菜单怎么没显示，打脸是不是，不是，这时候不要着急。由于我创建project的时候，并没有加入一个默认的activity。所以还有很多自己主动生成的文件要自己去写。
6接下来在res文件夹下新建一个menu文件夹在menu文件夹下新建一个mymenu.xml文件

mymenu.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_settings"
        app:showAsAction="never"
        android:title="settings" />
</menu>

然后在MainActivity中重写两个方法

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //这句话的意思是把mymenu载入到menu中
        getMenuInflater().inflate(R.menu.mymenu,menu);

        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.action_settings:
                Toast.makeText(this,"you click action_settings",Toast.LENGTH_SHORT).show();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

看看效果图
这里写图片描写叙述

7 接下来简单的展示一下App Bar有用的方法。

首先在activity_main.xml文件里加入两个button

  <Button
        android:id="@+id/btnHideToolBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="隐藏toolBar"/>
    <Button
        android:id="@+id/btnShowToolBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="显示toolBar"/>

在MainActivity作对应操作

 Button btnHideToolBar, btnShowToolBar;

 btnHideToolBar = (Button) findViewById(R.id.btnHideToolBar);
        btnHideToolBar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
            //隐藏ActionBar
                getSupportActionBar().hide();
            }
        });
        btnShowToolBar = (Button) findViewById(R.id.btnShowToolBar);
        btnShowToolBar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
            //显示ActionBar
                getSupportActionBar().show();
            }
        });

看看效果吧。

这里写图片描写叙述

这篇文章基本翻译的几乎相同了，还有相关的几篇我会接着翻译。

事实上这篇文章就强调了一件事：just 使用toolbar！

！

相关的演示效果已经给出了。有什么疑问和错误欢迎指出。感激不尽！

posted @ 2017-08-02 10:46 zsychanpin 阅读(447) 评论(0) 编辑收藏举报

刷新页面返回顶部