Android_ToolBar基础

Android_ToolBar基础

一、ToolBar发展史

用来取代过去 actionbar 的控件，在Meterial design中也有统一名称：app bar

二、概述

Android3.0推出了ActionBar,自2013年Google大力推动所谓的android style,想要改变过去android纷乱的界面设计，希望让终端使用者尽可能在android手机有个一致的操作体验。ActionBar过去最多人使用的两大套件就是ActionBarSherlock以及官方提供在support library v 7里的AppCompat.

三、基础套用

1) 风格（style）

风格要调整的地方有二

l 在res/values/styles.xml

l 在res/values-v21/styles.xml

我们先在res/values/styles.xml里面添加一个AppTheme.Base风格

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

隐藏原本的ActionBae,修改parent属性为新添加的AppTheme.Base

然后调整Android5.0的style(res/values-v21/styles.xml)修改parent属性为新添加的AppTheme.Base

<style name="AppTheme" parent="AppTheme.Base"></style>

2) 界面（Layout）

在布局文件中添加ToolBar控件，要使用support v7里面的ToolBar,否则就只有android5.0以上的版本才能使用

<?xml version="1.0" encoding="utf-8"?><RelativeLayout         xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="match_parent"        android:layout_height="match_parent">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize">   //这样可以沿用ActionBar大小    </android.support.v7.widget.Toolbar>    <TextView        android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_below="@+id/toolbar"   //必须设置这个                android:text="Hello World!" /></RelativeLayout>

3) 程序（java）

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);

四、自定义颜色

android5.0以下直接使用res/values/styles.xml

<resources><style name="AppTheme" parent="AppTheme.Base"></style><style name="AppTheme.Base" parent="Theme.AppCompat"><item name="windowActionBar">false</item><item name="windowNoTitle">true</item><!-- ToolBar color --><item name="colorPrimary">@color/colorPrimary</item><!--Window color（内容布局背景颜色）--><item name="android:windowBackground">@color/colorAccent</item></style></resources>

Android5.0以及以上使用res/values-v21/styles.xml

<?xml version="1.0" encoding="utf-8"?><resources><style name="AppTheme" parent="AppTheme.Base"><!-- 下面的导航栏颜色设置（API 21以上，并有下面的导航栏）--><item name="android:navigationBarColor">@color/accent_material_light</item><!-- 下面的状态栏颜色设置（API 21以上）--><item name="android:statusBarColor">@android:color/holo_blue_bright</item></style></resources>

注：android5.0以下的没有专门设置状态栏颜色的style

Style设置完成后，设置布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout         xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="match_parent"        android:layout_height="match_parent">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary"> //可沿用ActionBar的颜色设定    </android.support.v7.widget.Toolbar><!-- 注：android:fitsSystemWindows="true" 防止ToolBar与StatusBar融合   -->    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/toolbar"        android:text="Hello World!" /></RelativeLayout>

五、控件设置

Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);mToolbar.setTitle("这是标题");mToolbar.setSubtitle("副标题");/** *上面设置必须在setSupportActionBar(mToolbar)之前设置，否则无效；要不就放在onResume中 *下面设置必须在setSupportActionBar(mToolbar)之后设置，否则无效 */setSupportActionBar(mToolbar);mToolbar.setNavigationIcon(getResources().getDrawable(R.mipmap.ic_launcher));mToolbar.setLogo(getResources().getDrawable(R.mipmap.ic_launcher_round));

 

<!--标题的字体颜色 API 21以上-->

<item name="android:textColorPrimary">@color/colorAccent</item>

六、自定义控件

布局文件：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                android:layout_width="match_parent"                android:layout_height="match_parent">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary"        android:fitsSystemWindows="true">        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="match_parent">            <ImageView                android:id="@+id/back"                android:layout_width="wrap_content"                android:layout_height="match_parent"                android:layout_alignParentLeft="true"                android:layout_alignParentStart="true"                android:layout_alignParentTop="true"                android:src="@mipmap/ic_launcher"/>            <TextView                android:id="@+id/title"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:layout_toLeftOf="@+id/share"                android:layout_toRightOf="@+id/back"                android:gravity="center"                android:text="这是标题"/>            <ImageView                android:id="@+id/share"                android:layout_width="wrap_content"                android:layout_height="match_parent"                android:layout_alignParentEnd="true"                android:layout_alignParentRight="true"                android:layout_alignParentTop="true"                android:layout_marginRight="15dp"                android:src="@mipmap/ic_launcher"                android:visibility="invisible"/>        </RelativeLayout>    </android.support.v7.widget.Toolbar>    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/toolbar"        android:text="Hello World!"/></RelativeLayout>

设置文件：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);ImageView mImg = (ImageView) findViewById(R.id.back);TextView mTxt = (TextView) findViewById(R.id.title);ImageView mShare = (ImageView) findViewById(R.id.share);mImg.setImageResource(R.mipmap.ic_launcher);mTxt.setText("替换标题");mShare.setImageResource(R.mipmap.ic_launcher_round);