码迷，mamicode.com
首页 > 其他好文 > 详细

Androd Toolbar 的简单使用（转）

时间：2015-03-03 16:26:26      阅读：207      评论：0      收藏：0      [点我收藏+]

标签：

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>  

     

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

    技术分享


Androd Toolbar 的简单使用（转）

标签：

原文地址：http://www.cnblogs.com/bvin/p/4311240.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！