Android UI(ActionBar+Toolbar)详解

目录：

    1.ActionBar与ToolBar概述

    2.ActionBar与ToolBar的应用场景

    3.ActionBar的隐藏

        3.1 通过自定义Theme隐藏

        3.2 通过系统Theme隐藏

        3.3 通过Java代码隐藏

    4.ToolBar的使用

        4.1 自定义Theme中的一些常用属性

        4.2 基本使用

        4.3 一些问题？（标题/子标题/overflow文字的颜色和字体+overflow icon设置和flow menu背景等）    

         

1.ActionBar与ToolBar概述

    ActionBar是在Android 3.0推出的，google为了改善原本混乱的App风格设计，在2014年的google I/O大会上推出了material design

而ToolBar就是在Android 5.0中用来替换ActionBar的解决方案，同时ActionBar和ToolBar在material design 中被统称为了App bar.

2.ActionBar与ToolBar的应用场景

    ActionBar与ToolBar的应用场景主要在不同Activity之间进行前置导航或者是一些必要的功能按钮或者是导航提示，同时也支持Action

    overflow（即下拉导航列表，类似于下拉菜单）

    

3.ActionBar的隐藏

    3.1 通过自定义Theme隐藏

        1)在styles.xml中定义Theme        

<style name="noActionbarTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 设置不显示ActionBar -->
<item name="windowActionBar">false</item>
<!--设置不显示title-->
<item name="windowNoTitle">true</item>

</style>

        2)在Manifest.xml的application或者Activity节点中田间android:theme="@style/noActionbarTheme"

        

    3.2 通过系统Theme隐藏

android:theme="@style/Theme.AppCompat.NoActionBar"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"     

     隐藏效果    





    3.3 通过Java代码隐藏

package com.example.androiduiappbar;

import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//实例化ActionBar，注意为了向下兼容我们使用了support.v7.app.ActionBar
ActionBar actionBar = getSupportActionBar();
//隐藏ActionBar
actionBar.hide();
}
}

4.ToolBar的使用

    4.1 自定义Theme中的一些常用属性

    1)styles.xml中定义myTheme

<style name="myTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 设置不显示ActionBar -->
<!--<item name="windowActionBar">false</item>-->
<!--设置不显示title-->
<!--  <item name="windowNoTitle">true</item>-->
<!--ActionBar颜色-->
<item name="colorPrimary">@color/colorAccent</item>
<!--状态栏颜色-->
<item name="colorPrimaryDark">@color/accent_material_light</item>
<!--设置window中控件的,比如：checkbox、switch等checked或selected时的颜色-->
<item name="colorAccent">@color/colorAccent1</item>
<!--设置window布局背景色-->
<item name="android:windowBackground">@color/dim_foreground_material_dark</item>
</style>

    

    2)应用于Aplication

   

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/myTheme"
>

       

    3)效果截图：

 


    

    4.2 基本使用

    1)styles.xml自定义Theme隐藏Actionbar

   

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

<!--自定义无Actionbar的主题-->
<style name="noActionbarTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 设置不显示ActionBar -->
<item name="windowActionBar">false</item>
<!--设置不显示title-->
<item name="windowNoTitle">true</item>
</style>

</resources>

    2)manifest.xml中activity应用自定义Theme

    

<activity android:name=".SecondActivity" android:theme="@style/noActionbarTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>   

       

    2)主布局文件activity_second.xml

   

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.androiduiappbar.SecondActivity">
<!--
android:background="":可设置toolbar的背景
-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="@color/colorAccent1"
/>
<ImageView
android:layout_below="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/pinkgirl"/>
</RelativeLayout>

 

    3)toolbar action menu定义toolbar_menu.xml

    

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:context=".SecondActivity">
<!--
属性用法:
android:title=""：设置自定义action的标题文字，放入action flow中时只显示文字
android:orderInCategory=""：表示action在app bar上显示的顺序，值越小越靠前
android:icon=""：设置显示的图标
app:showAsAction="ifRoom":设置显示的位置，ifRoom（有空间显示，没空间显示到overflow）
never（一直显示到overflow），alaways（一直显示在app bar上），
withText（设置图标和文字一起显示）
-->
<!--查询按钮-->
<item android:id="@+id/action_serach"
android:title="@string/action_search"
android:orderInCategory="1"
android:icon="@drawable/search_24"
app:showAsAction="ifRoom"
/>
<!--分享-->
<item android:id="@+id/action_share"
android:title="@string/action_share"
android:orderInCategory="2"
app:showAsAction="ifRoom"
android:icon="@drawable/share_24"
/>
<!--设置-->
<item android:id="@+id/action_setting"
android:title="@string/action_setting"
android:orderInCategory="3"
app:showAsAction="never"
android:icon="@drawable/back"
/>
<!--更多-->
<item android:id="@+id/action_more"
android:title="@string/action_more"
android:orderInCategory="4"
app:showAsAction="never"
android:icon="@drawable/share_24b"
/>
</menu>

    4)主java类SecondActivity.java

package com.example.androiduiappbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class SecondActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);
//设置应用图标
toolbar.setLogo(R.mipmap.ic_launcher);
//设置标题，也可在xml中实现toolbar:title="标题"
toolbar.setTitle("标题");
//设置子标题
toolbar.setSubtitle("子标题");
//设置导航图标
toolbar.setNavigationIcon(R.drawable.back);
//设置toolbar
//注意这句代码必须放在自定义按钮监听和设置导航条Icon之前
setSupportActionBar(toolbar);
//自定义去的按钮点击监听
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_serach:
Log.d("ItemId",item.getItemId()+"");
Toast.makeText(SecondActivity.this,"你点击了搜索！",Toast.LENGTH_SHORT).show();
break;
case R.id.action_share:
Log.d("ItemId",item.getItemId()+"");
Toast.makeText(SecondActivity.this,"你点击了分享！",Toast.LENGTH_SHORT).show();
break;
case R.id.action_setting:
Log.d("ItemId",item.getItemId()+"");
Toast.makeText(SecondActivity.this,"你点击了设置！",Toast.LENGTH_SHORT).show();
break;
case R.id.action_more:
Log.d("ItemId",item.getItemId()+"");
Toast.makeText(SecondActivity.this,"你点击了更多！",Toast.LENGTH_SHORT).show();
break;
default:
Log.d("ItemId",item.getItemId()+"");
break;
}

return false;
}
});

//设置导航按钮监听
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(SecondActivity.this,"你点击了导航按钮！",Toast.LENGTH_SHORT).show();
}
});
}
/*
* 继承实现onCreateOptionsMenu方法实例化inflater去加载布局
* 另一种方法是通过toolbar.inflateMenu(R.menu.toolbar_menu);
* */

@Override
public boolean onCreateOptionsMenu(Menu menu){
MenuInflater inflater =getMenuInflater();
inflater.inflate(R.menu.toolbar_menu,menu);
return super.onCreateOptionsMenu(menu);
}
}

ps:需要用support v7里面的toolbar，否则只有API 21(Android 5.0)以上才能使用

    

    5)效果截图(原谅我花痴的用了一张萌妹纸的照片，贼笑.jpg)


    


    

    4.3 一些问题？（标题/子标题/overflow文字的颜色和字体+overflow icon设置和flow menu背景等）    

    1)标题/子标题的颜色字体设置

    java代码设置:

//子标题颜色和字体设置，因为Theme_Toolbar_Title中已经设置字体颜色所以setTitleTextAppearance可以不用
//toolbar.setTitleTextColor(R.color.colorAccent);
toolbar.setTitleTextAppearance(SecondActivity.this,R.style.Theme_Toolbar_Title);
//子标题颜色和字体设置，因为Theme_Toolbar_Subtitle中已经设置字体颜色所以setSubtitleTextColor可以不用
//toolbar.setSubtitleTextColor(getResources().getColor(android.R.color.holo_blue_light));
toolbar.setSubtitleTextAppearance(SecondActivity.this,R.style.Theme_Toolbar_Subtitle);

        

    styles.xml中定义Theme:

   

<!--标题文字颜色和字体大小-->
<style name="Theme_Toolbar_Title" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">20dp</item>
<item name="android:textColor">@color/colorAccent</item>
</style>
<!--子标题文字颜色和字体大小-->
<style name="Theme_Toolbar_Subtitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">18dp</item>
<item name="android:textColor">@color/colorAccent</item>
</style>

    2)overflow文字的样式+背景

       

    自定义style：

    

    <!--设置overflow背景和文字样式-->

<style name="PopupOverflow" parent="@style/ThemeOverlay.AppCompat.Dark">
<item name="android:textColorPrimary">@color/textcolorPrimary</item>
<item name="android:textSize">16sp</item>
<item name="android:background">@color/textColor</item>
</style>

   

    在主布局Toolbar中添加app:popupTheme="@style/PopupOverflow"：

<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="@color/colorAccent1"
app:popupTheme="@style/PopupOverflow"
/>

      

    3)overflow icon设置

    定义style自定义Overflow图标：

<style name="customOverflowButtonStyle" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
<item name="android:src">@drawable/expand_more_24</item>
</style>

    在Activity应用的Theme中添加<item name="actionOverflowButtonStyle">@style/customOverflowButtonStyle</item>：

<!--自定义无Actionbar的主题-->
<style name="noActionbarTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 设置不显示ActionBar -->
<item name="windowActionBar">false</item>
<!--设置不显示title-->
<item name="windowNoTitle">true</item>
<!--引用自定义图标style-->
<item name="actionOverflowButtonStyle">@style/customOverflowButtonStyle</item>
</style>

    

    4)效果截图(可与更改之前的对比)

  

 


    

    参考：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html