AndroidToolbar学习

参考博客地址:原博客地址

1.概述:

Android3.0 Android推了ActionBar这个控件,而到了2013年Google开始大力推动所谓的AndroidStyle,想要逐渐改善过去纷乱的android界面设计,希望让Android终端使用者尽可能在android手机里有一个一致的体验,ActionBar过去最多人使用的两大套件就是ActionBarSharelock,及官方在support library v7里的AppCompat.

既然介绍Toolbar,也意味着官方在某些程度上认为ActionBar限制了android app的开发与设计的弹性,而在material design也对之做了名称的定义:App bar,那么如何在android app中用toolbar这个控件来做出一个基本的app bar

2.基础套用

2.1风格

风格要调整的地方有二:

• 一在res/values/styles.xml里面
• 二在res/values-21/styles.xml里面

为了之后的方便,先在values/styles.xml里增加一个名为AppTheme.Base的风格

<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>

这里试用AndroidAPI22和以上要去掉"android:"否则会报错

AppCompat does not support the current theme features: { windowActionBar: false, windowActionBarOverlay: false, android:windowIsFloating: false, windowActionModeOverlay: false, windowNoTitle: false }```

因为此范例只要用Toolbar,所以我们要让原本的ActionBar隐藏起来,然后将原本的AppTheme的parent属性改为上面的AppTheme.Base

2.2.界面

在activity_main里面添加

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:background="@android:color/white"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</android.support.v7.widget.Toolbar>

###2.3Java程序
在Activity里面加入ToolBar声明:
>```
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

3.自定义颜色

• colorPrimaryDark(状态栏底色):在风格(style)或者主题(Theme)里设定

• AppBar底色
  这个设定分为二,若你的android app仍然是使用ActionBar,则直接在风格(style)或者主题(themes)里面设定colorPrimary参数即可;
  可视若采用Toolbar的话,则要在界面(layout)里面设置Toolbar的background属性.

• navigationBarColor(导航栏底色):仅能在API21+也就是Android5.0之后的版本使用,因此要将之设定在res/values-21/styles.xml里面

• 主视窗底色:windowBackground
  所以我们在这里设置的地方有三,一是style中(res/values/styles.xml)

<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowBackground">@color/windowBackground</item></style>

二是v21(res/values-v21/styles.xml)中
>```
<style name="AppTheme" parent="AppTheme.Base">    
<!-- Customize your theme here. -->    
<item name="android:navigationBarColor">@color/colorAccent</item>
</style>```

三是本篇主角Toolbar的background设定
>```
<android.support.v7.widget.Toolbar   
  android:background="@color/toolbar"    
  android:id="@+id/toolbar"    
  android:layout_height="wrap_content"    
  android:layout_width="match_parent">
</android.support.v7.widget.Toolbar>

toolbar是设定在activity_main.xml中,对其设定值background属性可以设定为

android:background="?attr/colorPrimary" 

这样就可以沿用ActionBar的颜色设定了

4控件(Compoment)

大概来说,预设常用的几个元素:

• setNavigationIcon:即设定up Button的图标
• setLogo:设定APP的图标
• setTitle:主标题
• setSubtitle:副标题
• setOnMenuItemClickListener:设定菜单各按钮的动作

写代码
除了菜单以外的部分

Toolbar toolbar =(Toolbar)findViewById(R.id.toolbar);
//AppLogo
toolbar.setLogo(R.drawable.ic_launcher);
//Title
toolbar.setTitle(R.string.app_name);
//SubTitle
toolbar.setSubtitle("subtitle");
setSupportActionBar(toolbar);
//navigationIcon必须在setSupportActionBar之后才会有作用
//否则会出现backButton
toolbar.setNavigationIcon(R.drawable.ab_android);

菜单部分
需要先在res/menu/menu_main.xml作定义
>```
<menu    
xmlns:android="http://schemas.android.com/apk/res/android"    
xmlns:app="http://schemas.android.com/apk/res-auto"    
xmlns:tools="http://schemas.android.com/tools"    
tools:context=".ToolbarActivity"    >    
<item        
android:id="@+id/action_edit"        
android:title="@string/action_edit"        
android:orderInCategory="80"        
android:icon="@drawable/ab_edit"        
app:showAsAction="ifRoom"/>    
<item        
android:id="@+id/action_share"        
android:title="@string/action_share"        
android:orderInCategory="90"        
android:icon="@drawable/ab_share"        
app:showAsAction="ifRoom"/>    
<item        
android:id="@+id/action_setting"        
android:title="@string/action_setting"        
android:orderInCategory="100"        
app:showAsAction="never"/>
</menu>

回到Activity写OnMenuItemClickListener

public boolean onMenuItemClick(MenuItem item) {
String message = ""
switch (item.getItemId()){
case R.id.action_edit:
message += "";
break;
case R.id.action_share:
message += "";
break;
case R.id.action_setting:
message += "";
break;
}
if (!message.equals(""))
Toast.makeText(this,message,Toast.LENGTH_SHORT).show();
return true;
}

这个是让Activity实现了OnMenuItemClickListener,复写的方法,然后将这个监听器设置给Toolbar
```toolbar.setOnMenuItemClickListener(this);```
**和 setNavigationIcon 一样，需要將之设定在 setSupportActionBar 之后才有作用。**


做个简单的说明：
- colorPrimaryDark
状态栏背景色。在 style 的属性中设置。
- textColorPrimary
App bar 上的标题与更多菜单中的文字颜色。
在 style 的属性中设置。
- App bar 的背景色
Actionbar 的背景色设定在 style 中的 colorPrimary。
Toolbar 的背景色在layout文件中设置background属性。
- colorAccent
各控制元件(如：check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色。
在 style 的属性中设置。
- colorControlNormal
各控制元件的预设颜色。
在 style 的属性中设置
- windowBackground
App 的背景色。
在 style 的属性中设置
- navigationBarColor
导航栏的背景色，但只能用在 API Level 21 (Android 5) 以上的版本
在 style 的属性中设置
**最后需要注意的是：使用material主题的时候，必须设定targetSdkVersion =21，否则界面看起来是模糊的                                **