Android.support.v7.widget.Toolbar学习

Android.support.v7.widget.Toolbar 学习 android 5.0

android studio 使用:

  1. dependencies {  
  2.     compile 'com.android.support:appcompat-v7:23.0.1'  
  3.     compile 'com.android.support:design:23.1.1'  
  4. }  
以上的依赖包

要使用ToolBar首先我们要去掉ActionBar的主题风格,主要在res/values/style.xml和res/values-v21/style.xml(android 21API)

中配置如下内容:

res/values/style.xml和res/values-v21/style.xml

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <resources>  
  2.     <!-- Base application theme. -->  
  3.     <style name="AppTheme" parent="Theme.AppCompat">  
  4.         <!-- Customize your theme here. -->  
  5.         <item name="windowActionBar">false</item>  
  6.         <item name="windowNoTitle">true</item>  
  7.     </style>  
  8. </resources>  

去掉ActionBar的主题最简单的方法就是Theme.AppCompat主题

别忘在android 5.0的style也得改成Theme.AppCompat主题

接下来我们在布局文件main_activity.xml中加入v7支持包下ToolBar控件如下:

main_activity.xml:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="match_parent"  
  3.     android:layout_height="match_parent" >  
  4.     <android.support.v7.widget.Toolbar  
  5.         android:id="@+id/toolbar"  
  6.         android:layout_width="match_parent"  
  7.         android:layout_height="wrap_content"  
  8.         android:background="@color/colorPrimary"  
  9.         android:minHeight="?attr/actionBarSize"  
  10.         />  
  11.     <TextView  
  12.         android:layout_below="@+id/toolbar"  
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content"  
  15.         android:text="hello i am textview"/>  
  16. </RelativeLayout>  

布局文件设置好后,我们在代码中获取该控件并替换ActionBar:

[java]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. protected void onCreate(Bundle savedInstanceState) {  
  2.         super.onCreate(savedInstanceState);  
  3.         setContentView(R.layout.activity_main);  
  4.         toolbar= (Toolbar) findViewById(R.id.toolbar);  
  5.         //用toolbar替换actionbar  
  6.         setSupportActionBar(toolbar);  
  7.     }  


运行效果图,太难看了,而且完全不知道哪里是toolbar,我们希望的是右边的效果图。嗯,那么接下来我们就一步一步实现右边的效果图

首先我们来认识一下几个属性,直接上图:


我们从下往上说明:

1.navigationBarColor:这个是控制底部导航栏背景颜色的属性,而且仅在android 5.0以上版生效,低于API 21 版本无效。

2.windowBackground:顾名思义主视图窗体的背景颜色。

3.ToolBar:background:工具栏ToolBar的背景颜色,只需在布局文件设置即可

4.colorPrimaryDark:状态栏的背景颜色,在style.xml中设置

接下来,我们就需要对其进行配置了,首先我们先新建一个color.xml,颜色值均来自官方自动生成的模板:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <color name="colorPrimary">#3F51B5</color>  
  4.     <color name="colorPrimaryDark">#303F9F</color>  
  5.     <color name="colorAccent">#FF4081</color>  
  6.     <color name="colorBackground">#ffffff</color>  
  7. </resources>  

我们在style.xml和布局文件中分别加入以上属性配置

style.xml:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <resources>  
  2.     <!-- Base application theme. -->  
  3.     <style name="AppTheme" parent="Theme.AppCompat">  
  4.         <!-- Customize your theme here. -->  
  5.         <item name="windowActionBar">false</item>  
  6.         <item name="windowNoTitle">true</item>  
  7.         <!--status bar color-->  
  8.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
  9.         <!--window color-->  
  10.         <item name="android:windowBackground">@color/colorBackground</item>  
  11.     </style>  
  12. </resources>  
activity_main.xml

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <android.support.v7.widget.Toolbar  
  2.        android:id="@+id/toolbar"  
  3.        android:layout_width="match_parent"  
  4.        android:layout_height="wrap_content"  
  5.        android:background="@color/colorPrimary"  
  6.        android:minHeight="?attr/actionBarSize"  
  7.  />  


嗯,还不错!预期的效果已经开始出现了。接下来我们继续来为toolbar添加图标和菜单以及标题。

我们先在Java代码中添加logo,title 和 subtitle :

[java]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //app logo  
  2. toolbar.setLogo(R.mipmap.ic_android_white_24dp);  
  3. //title  
  4. toolbar.setTitle("  Material Design ToolBar");  
  5. //sub title  
  6. toolbar.setSubtitle("  ToolBar subtitle");  
  7. //以上3个属性必须在setSupportActionBar(toolbar)之前调用  
  8. setSupportActionBar(toolbar);  
  9. //设置导航Icon,必须在setSupportActionBar(toolbar)之后设置  
  10. toolbar.setNavigationIcon(R.mipmap.ic_menu_white_24dp);  
  11. //添加菜单点击事件  
  12. toolbar.setNavigationOnClickListener(new View.OnClickListener() {  
  13.     @Override  
  14.     public void onClick(View v) {  
  15.         Snackbar.make(toolbar, "Click setNavigationIcon", Snackbar.LENGTH_SHORT).show();  
  16.     }  
  17. });  

运行效果图如下:


已经相当清晰了,就不过多说明了,对了,导航菜单的点击事件是通过toolbar.setNavigationOnClickListener设置的。

那么到这里与最终的效果图就差3个小菜单了,嗯,接着完善,首先我们需要在menu文件夹下的新建一个菜单文件menu_main.xml(名称自定义即可),然后在menu_main.xml添加如下内容:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <menu xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:app="http://schemas.android.com/apk/res-auto">  
  3.     <!--搜索菜单-->  
  4.     <item  
  5.         android:id="@+id/action_search"  
  6.         android:icon="@mipmap/ic_search_white_24dp"  
  7.         android:orderInCategory="80"  
  8.         android:title="search"  
  9.         app:actionViewClass="android.support.v7.widget.SearchView"  
  10.         app:showAsAction="ifRoom" />  
  11.      <!--分享菜单-->  
  12.     <item  
  13.         android:id="@+id/action_share"  
  14.         android:icon="@mipmap/ic_share_white_24dp"  
  15.         android:orderInCategory="90"  
  16.         android:title="share"  
  17.         app:showAsAction="ifRoom" />  
  18.      <!--更多菜单-->  
  19.      <item  
  20.         android:id="@+id/action_more"  
  21.         android:icon="@mipmap/ic_more_vert_white_24dp"  
  22.         android:orderInCategory="100"  
  23.         android:title="more"  
  24.         app:showAsAction="ifRoom" />  
  25. </menu>  

其中search菜单用的是 android.support.v7.widget.SearchView类

关于菜单详细内容这里就不过介绍,需要补一下知识的话可以看一下这篇文章http://blog.csdn.net/ganlijianstyle/article/details/7566071

声明完xml文件,我们需要在代码中重写onCreateOptionsMenu(Menu menu)方法如下代码:

[java]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.      * 该方法是用来加载菜单布局的 
  3.      * @param menu 
  4.      * @return 
  5.      */  
  6.     @Override  
  7.     public boolean onCreateOptionsMenu(Menu menu) {  
  8.         //加载菜单文件  
  9.         getMenuInflater().inflate(R.menu.menu_main, menu);  
  10.         return true;  
  11.     }  

接下来,我们为菜单添加点击事件,这是可以通过Toolbar.OnMenuItemClickListener来设置监听事件

我们先创建Toolbar.OnMenuItemClickListener监听类:

[java]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. private Toolbar.OnMenuItemClickListener onMenuItemClickListener=new Toolbar.OnMenuItemClickListener() {  
  2.         @Override  
  3.         public boolean onMenuItemClick(MenuItem menuItem) {  
  4.             switch (menuItem.getItemId()){  
  5. //                case R.id.action_search://因为使用android.support.v7.widget.SearchView类,可以在  
  6.                                             onCreateOptionsMenu(Menu menu)中直接设置监听事件  
  7. //                    Snackbar.make(toolbar,"Click Search",Snackbar.LENGTH_SHORT).show();  
  8. //                    break;  
  9.                 case R.id.action_share:  
  10.                     Snackbar.make(toolbar,"Click Share",Snackbar.LENGTH_SHORT).show();  
  11.                     break;  
  12.                 case R.id.action_more:  
  13.                     Snackbar.make(toolbar,"Click More",Snackbar.LENGTH_SHORT).show();  
  14.                     break;  
  15.             }  
  16.             return true;  
  17.         }  
  18.     };  

把监听器设置给toolbar:
[java]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. toolbar.setOnMenuItemClickListener(onMenuItemClickListener);  
到此监听事件就添加完成。我们运行程序,动态图如下:


好了,到此toolbar的基本用法已经介绍完了。下面我们介绍一下style.xml中其他属性:
[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <item name="colorAccent">@color/colorAccent</item>  
  2. <item name="android:textColorPrimary">@color/textColorPrimary</item>  
  3. <item name="colorControlNormal">#000000</item>  
  4. <item name="colorControlHighlight">@color/colorControlHighlight</item>  
  5. <!--<item name="colorControlActivated">@color/colorControlActivated</item> -->  

1.colorAccent:这个属性是用于配置控件被选中时显示的颜色,eg:radio,checkBox等等。

2.textColorPrimary:Toolbar中的标题与小标题以及更多菜单中文字的颜色。

3.colorControlNormal:配置控件初始化显示时的颜色。

4.colorControlHighlight:配置点击控件时的效果颜色

5.colorControlActivated:点击控件(或者控件被选中)后显示的颜色,如果使用该属性,那么colorAccent的效果将被覆盖。

下面给出效果图:





最后附上动态图:


好了到此,都介绍完整了,下一篇我会结合侧滑菜单draglayout控件和导航Toolbar实现交换......

代码下载地址:http://download.csdn.net/detail/javazejian/9388065



评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值