Android 5.x Material design 之 To

ToolBar的概述

• 说到ToolBar，它其实API21发布的新控件，是以前我们熟悉的ActionBar的替代者。它其实是一个自定义的View,所以可以加载到布局文件中的任何地方咯~
• 它和ActionBar的区别主要有以下几点：
  • 作为一个view,可以放在布局任何地方，更容易管理
  • 在同一个Activity中可以摆放多个ToolBar

最基本的用法

• 1, 首先在style.xml文件中，的主题设置为 不支持ActionBar的主题，类似于下面这个，默认他是支持ActionBar的主题

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"/>

• 2, 在布局文件中引入ToolBar,注意的是引入的v7包中的，所以它支持到api7版本，给ToolBar加了一个背景颜色。

<?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"    >    

      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"          
          android:layout_width="match_parent"        
          android:layout_height="wrap_content"        
          android:background="#69f"/>
</RelativeLayout>

• 3，看代码中的逻辑

• 首先是onCreate方法中就两行代码，得到对象，然后调用方法setSupportAcionBar()支持ActionBar模式即可。

@Override
protected void onCreate(Bundle savedInstanceState) {    
        super.onCreate(savedInstanceState);    
        setContentView(R.layout.activity_main);    
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);    
        setSupportActionBar(toolbar);
}    

• 然后调用onCreateOptionsMenu方法设置ToolBar中的内容即可

@Override
public boolean onCreateOptionsMenu(Menu menu) {    
    getMenuInflater().inflate(R.menu.menu_toolbar, menu);    
    return true;
}

• 当然menu中的menu_toolbar.xml文件可以自己设置

<menu xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:app="http://schemas.android.com/apk/res-auto">    
      <item        
          android:id="@+id/item1"        
          android:icon="@android:drawable/ic_menu_zoom"        
          android:title="@string/item1"  
          app:showAsAction="ifRoom"/>
      <item
          android:id="@+id/item2"        
          android:icon="@android:drawable/ic_menu_set_as"        
          android:title="setting"
        app:showAsAction="never"/>
</menu>

• 4,最后看一下展示效果吧

C130CC90-5948-407A-9EDC-2668330C3DEE.png