zoukankan      html  css  js  c++  java
  • 设置应用栏(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!

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

  • 相关阅读:
    用C++读写EXCEL文件的几种方式比较
    20个值得收藏的网页设计开放课件
    char* 应用, 去除字符串内多余空格, 用算法而非库函数
    东拉西扯:王建硕主义
    Lisp 的本质(The Nature of Lisp)
    web前端:html
    [原译]理解并实现原型模式实现ICloneable接口.理解深浅拷贝
    [原译]理解并实现装饰器模式
    3分钟理解Lambda表达式
    [原译]实现IEnumerable接口&理解yield关键字
  • 原文地址:https://www.cnblogs.com/zsychanpin/p/7272668.html
Copyright © 2011-2022 走看看