• Androd Toolbar 的简单使用（转）

    14年Android开发者大会提出了Android5.0 系统以及 材料设置 Material Design。在 材料设计中推出了大量的UI效果，其中某些功能 已添加进 兼容包，所以可以在低版本中来实现一些材料设计效果。今天主要介绍的就是 ActionBar的替代品 Toolbar。Toolbar 是在V7包兼容的，所以需要下载最新的V7包。

    使用ToolBar主要从以下3个步骤开始：

    1. 样式定义显示效果，属性
    2. 在布局中使用ToolBar
    3. 在代码中设置属性    

            1.  首先，来看下如何设置样式。由于Toolbar是替代ActionBar的，还需要使用 ActionBar兼容的Theme，但是需要做一些简单修改。

             a. 先把ActionBar隐藏，为了 方便修改可以將原本 AppTheme 的 parent 属性改为 AppTheme.Base，修改文件 res/values/styles.xml

    [java] view plaincopy
     
    1. <resources>  
    2.   
    3.     <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">  
    4.         <item name="windowActionBar">false</item>  
    5.         <item name="android:windowNoTitle">true</item>  
    6.     </style>  
    7.   
    8.     <style name="AppTheme" parent="AppTheme.Base"/>  
    9.   
    10. </resources>  

            b. 同样，为统一风格，需要将  /res/values-v21/styles.xml  的样式 parent 属性设置为 AppTheme.Base

    [html] view plaincopy
     
    1. <resources>  
    2.       <style name="AppTheme" parent="AppTheme.Base"></style>  
    3. </resources>  


    2. 在 Activity 布局中 加入 Toolbar 组件。注意：为了向下兼容，要使用 V7包下的 Toolbar，并且去掉最外层布局的padding属性。为了确保Toolbar的高度，需要设置 最小高度为ActionBar高度 android:minHeight="?attr/actionBarSize"。

    [html] view plaincopy
     
    1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent"  
    5.     tools:context=".MainActivity">  
    6.   
    7.     <android.support.v7.widget.Toolbar  
    8.         android:layout_width="match_parent"  
    9.         android:layout_height="<span style="font-family: Arial, Helvetica, sans-serif;">?attr/actionBarSize</span><span style="font-family: Arial, Helvetica, sans-serif;">"</span>  
    10.         android:id="@+id/toolbar" />  
    11.   
    12. </RelativeLayout>  


    3. 在代码中设置Toolbar。需要Activity 继承 ActionBarActivity。通过setSupportActionBar（）替代ActionBar，在OnCreate() 方法中加入以下代码。

    [java] view plaincopy
     
    1. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
    2. setSupportActionBar(toolbar);  


          完成之后，效果如下：

          

     

               

    这个 效果不怎么好，需要对其进行简单的修改，改变一些颜色，修整修整就可以见人了。修改的颜色可以参见下图。

       

    通过上图，不难发现，修改颜色主要从这几个方面开始：

    • 状态栏背景色  colorPrimaryDark 属性
    • 如果还是使用ActionBar，colorPrimary 属性设置背景  如果时Toolbar，布局中background 属性设置背景
    • 导航栏背景色 navigationBarColor 属性 ，需要在 5.0 才可以使用，所以属性只可以在 /res/values-v21/styles.xml  设置
    • 主界面背景色 windowBackground 
     
    如果要使用这些属性，需要从三个地方开始
    a.  主样式中设置基本属性  res/values/styles.xml
    [java] view plaincopy
     
    1. <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">  
    2.        <item name="windowActionBar">false</item>  
    3.        <item name="android:windowNoTitle">true</item>  
    4.        <item name="colorPrimary">#66cc99</item>  
    5.        <item name="colorPrimaryDark">#66cc99</item>  
    6.        <item name="android:windowBackground">@color/back</item>  
    7. </style>  
     
    b.   v21中设置导航栏背景
    [java] view plaincopy
     
    1. <style name="AppTheme" parent="AppTheme.Base">  
    2.        <item name="android:navigationBarColor">#66cc99</item>  
    3. </style>  
    c.   布局中设置 Toolbar背景
    [html] view plaincopy
     
    1. <android.support.v7.widget.Toolbar  
    2.         android:layout_width="match_parent"  
    3.         android:layout_height="wrap_content"  
    4.         android:id="@+id/toolbar"  
    5.         android:background="#339999"  
    6.         android:minHeight="?attr/actionBarSize" />  

    设置完成后，效果如下：
     
     

    上一篇简单的介绍了如何简单使用Toolbar,这篇主要介绍Toolbar的进一步设置。

    既然Toolbar要替代ActionBar，那么Toolbar的功能应该更为强大，在Toolbar上有一些默认的显示效果，先来看下。

            

    通过上图，不难看出，我们其实是可以为Toolbar设置以下属性的：

    • 上级按钮 (upbutton)   setNavigationIcon
    • APP 的图标      setLogo
    • 主标题  setTitle
    • 副标题  setSubtitle
    • 设定菜单各按鈕的动作 setOnMenuItemClickListener
    在MainActivity的OnCreate() 方法中加入以下代码：
    [java] view plaincopy
     
    1. toolbar.setLogo(R.drawable.ic_launcher);  
    2. toolbar.setNavigationIcon(R.drawable.ic_launcher);  
    3. toolbar.setTitle(getResources().getString(R.string.app_name));  
    4. toolbar.setSubtitle("ToolBar");  
    5. toolbar.setOnMenuItemClickListener(this);  
    6. toolbar.setTitleTextColor(0xffffffff);  
    7. toolbar.setSubtitleTextColor(0xffffffff);  


    注意：setNavigationIcon(),setOnMenuItemClickListener() 需要放在 setSupportActionBar之后才会生效

    Toolbar菜单效果与ActionBar的实现一样，都是OptionsMenu。需要在Menu中添加 item ，然后通过Toolbar显示出来。

    res/menu/menu_main.xml

    [java] view plaincopy
     
    1. <menu xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
    3.     xmlns:tools="http://schemas.android.com/tools"  
    4.     tools:context=".MainActivity">  
    5.     <item  
    6.         android:id="@+id/action_settings"  
    7.         android:title="@string/action_settings"  
    8.         android:orderInCategory="100"  
    9.         android:icon="@drawable/ic_launcher"  
    10.         app:showAsAction="always" />  
    11.     <item  
    12.         android:id="@+id/action_test"  
    13.         android:title="@string/action_settings"  
    14.         android:orderInCategory="10"  
    15.         android:icon="@drawable/ic_launcher"  
    16.         app:showAsAction="ifRoom" />  
    17.   
    18. </menu>  

    然后在MainActivity中添加以下代码

    [java] view plaincopy
     
    1. @Override  
    2. public boolean onCreateOptionsMenu(Menu menu) {  
    3.     getMenuInflater().inflate(R.menu.menu_main, menu);  
    4.     return true;  
    5. }  
    6.   
    7. @Override  
    8. public boolean onMenuItemClick(MenuItem menuItem) {  
    9.     Toast.makeText(this, menuItem.getTitle(), Toast.LENGTH_SHORT).show();  
    10.     return false;  
    11. }  

    运行效果如下：

     

    通过点击 菜单，可以发现能够触发 onMenuItemClick() 方法，但是，点击上级按钮 (upbutton)并没有触发该事件，因为它有自己独立的点击事件。

    [java] view plaincopy
     
    1. toolbar.setNavigationOnClickListener(new View.OnClickListener() {  
    2.    @Override  
    3.    public void onClick(View v) {  
    4.        Toast.makeText(MainActivity.this, "HOME", Toast.LENGTH_SHORT).show();  
    5.    }  
    6. });  

     

    在Android 原生样式应用中，有一个特别漂亮的效果，在使用抽屉布局的时候，展开或关闭抽屉时，Toolbar的 navigation drawer（upButton） 有一个动画，由三个横线旋转成箭头，大概如下：


    静态图片展示不出来动画效果，请自行补脑！

    这个效果其实是由 Toolbar+DrawerLayout 实现的。 

    可以通过以下几步实现：

    1. 在布局中加入DrawerLayout
    2. 在代码中找到DrawerLayout，将DrawerLayout 与 Toolbar关联
    3. 通过样式修改 navigation drawer 的颜色
    1. 在布局中加入DrawerLayout   res/layout/activity_main.xml
    [java] view plaincopy
     
    1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent"  
    5.     tools:context=".MainActivity">  
    6.   
    7.     <android.support.v7.widget.Toolbar  
    8.         android:layout_width="match_parent"  
    9.         android:layout_height="?attr/actionBarSize"  
    10.         android:id="@+id/toolbar"  
    11.         android:background="#339999" />  
    12.   
    13.     <android.support.v4.widget.DrawerLayout  
    14.         android:layout_below="@+id/toolbar"  
    15.         android:id="@+id/drawerlayou"  
    16.         android:layout_width="match_parent"  
    17.         android:layout_height="match_parent">  
    18.   
    19.         <!--Main Content-->  
    20.   
    21.         <LinearLayout  
    22.             android:layout_width="match_parent"  
    23.             android:layout_height="match_parent"  
    24.             android:background="#123456">  
    25.   
    26.         </LinearLayout>  
    27.   
    28.         <!--DrawerLayout Content-->  
    29.         <LinearLayout  
    30.             android:layout_width="300dp"  
    31.             android:layout_height="match_parent"  
    32.             android:background="#345678"  
    33.             android:layout_gravity="start" />  
    34.   
    35.     </android.support.v4.widget.DrawerLayout>  
    36.   
    37. </RelativeLayout>  
     
    2. 在MainActivity中找到DrawerLayout，将DrawerLayout 与 Toolbar关联
    [java] view plaincopy
     
    1. final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayou);  
    2.   
    3. ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.app_name, R.string.app_name);  
    4. toggle.syncState();  
    5.   
    6. drawerLayout.setDrawerListener(toggle);  
    7.  //通过 NavigationDrawer 打开关闭 抽屉  
    8. toolbar.setNavigationOnClickListener(new View.OnClickListener() {  
    9.      @Override  
    10.      public void onClick(View v) {  
    11.          Toast.makeText(MainActivity.this, "HOME", Toast.LENGTH_SHORT).show();  
    12.   
    13.          if (drawerLayout.isDrawerOpen(Gravity.START))  
    14.               drawerLayout.closeDrawer(Gravity.START);  
    15.           else  
    16.               drawerLayout.openDrawer(Gravity.START);  
    17.       }  
    18. });  
     
    3. 修改样式 为如下：
    [java] view plaincopy
     
    1. <resources>  
    2.   
    3.     <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">  
    4.         <item name="windowActionBar">false</item>  
    5.         <item name="android:windowNoTitle">true</item>  
    6.         <item name="colorPrimary">#66cc99</item>  
    7.         <item name="colorPrimaryDark">#66cc99</item>  
    8.         <item name="android:windowBackground">@color/back</item>  
    9.         <!-- 使用自定义样式-->  
    10.         <item name="drawerArrowStyle">@style/AppTheme.MyDrawerArrowStyle</item>  
    11.     </style>  
    12.   
    13.     <style name="AppTheme" parent="AppTheme.Base" />  
    14.   
    15.     <!--自定义 navigation drarwer 的样式-->  
    16.     <style name="AppTheme.MyDrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">  
    17.         <item name="spinBars">false</item>  
    18.         <item name="color">#FFFFFF</item>  
    19.     </style>  
    20. </resources>  
     
    其中：
    spinBars  旋转效果      默认值为 true，有旋转效果 ；false则无旋转效果。
    color navigation icon 的顏色

    如果想要抽屉遮住 Toolbar，只需要改下布局，将Toolbar放入DrawerLayout的主界面即可：
    [java] view plaincopy
     
    1. <android.support.v4.widget.DrawerLayout  
    2.         android:id="@+id/drawerlayou"  
    3.         android:layout_width="match_parent"  
    4.         android:layout_height="match_parent">  
    5.   
    6.         <!--Main Content-->  
    7.   
    8.         <LinearLayout  
    9.             android:layout_width="match_parent"  
    10.             android:layout_height="match_parent"  
    11.             android:background="#123456">  
    12.             <!-- android:elevation="5dp" 加上阴影-->  
    13.             <android.support.v7.widget.Toolbar  
    14.                 android:layout_width="match_parent"  
    15.                 android:layout_height="?attr/actionBarSize"  
    16.                 android:id="@+id/toolbar"  
    17.                 android:elevation="5dp"  
    18.                 android:background="#339999" />  
    19.         </LinearLayout>  
    20.   
    21.         <!--DrawerLayout Content-->  
    22.         <LinearLayout  
    23.             android:layout_width="300dp"  
    24.             android:layout_height="match_parent"  
    25.             android:background="#345678"  
    26.             android:layout_gravity="start" />  
    27.   
    28. </android.support.v4.widget.DrawerLayout> 

      Toolbar 相对于 ActionBar的强大之处在于，ToolBar有更强大的自定义效果。因为ToolBar本身就是一个ViewGroup，可以往Toolbar中放入各种组件。

      [java] view plaincopy
       
      1. <android.support.v7.widget.Toolbar  
      2.         android:layout_width="match_parent"  
      3.         android:layout_height="?attr/actionBarSize"  
      4.         android:id="@+id/toolbar"  
      5.         android:elevation="5dp"  
      6.         android:background="#339999">  
      7.   
      8.         <RelativeLayout  
      9.             android:layout_width="match_parent"  
      10.             android:layout_height="match_parent"  
      11.             android:background="#F00">  
      12.   
      13.             <Button  
      14.                 android:id="@+id/toolbar_btn"  
      15.                 android:layout_width="wrap_content"  
      16.                 android:layout_height="match_parent"  
      17.                 android:text="Button"/>  
      18.   
      19.             <ImageView  
      20.                 android:layout_width="20dp"  
      21.                 android:layout_height="20dp"  
      22.                 android:src="@drawable/ic_launcher"  
      23.                 android:layout_centerInParent="true" />  
      24.   
      25.             <TextView  
      26.                 android:layout_alignParentRight="true"  
      27.                 android:layout_centerVertical="true"  
      28.                 android:layout_width="wrap_content"  
      29.                 android:layout_height="wrap_content"  
      30.                 android:text="邓紫棋" />  
      31.   
      32.         </RelativeLayout>  

      可以根据自己的需求，设置各种效果。但是，左边的边距一直去不了，如果知道的朋友，请给我留言，谢谢！
  • 相关阅读:
    毫秒时间格式转换
    Gulp前端服务器本地搭建
    前端构建工具Gulp的学习和使用
    Grunt入门学习之(3) -- Gruntfile具体示例
    Grunt入门学习之(2) -- Gruntfile的编写
    Grunt入门学习之(1) -- 环境安装
    toLocaleTimeString()方法在IE和谷歌浏览器上 根据本地时间格式，把 Date 对象的时间部分(不含日期)转换为“时间字符串”存在区别
    zTree 学习笔记之(一)
    C语言 在VS环境下一个很有意思的报错：stack around the variable was corrupted
    C#.Net 调用方法，给参数赋值的一种技巧
  • 原文地址：https://www.cnblogs.com/bvin/p/4311240.html
Copyright © 2020-2023  润新知