阅读排行
首页 > 技术文章

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>  

     

    可以根据自己的需求，设置各种效果。但是，左边的边距一直去不了，如果知道的朋友，请给我留言，谢谢！

    技术分享


文章来自：http://www.cnblogs.com/bvin/p/4311240.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案：鲁ICP备09046678号-3