ToolBar 打造MD TitleBar

取代ActionBar的控件,ToolBar!

Posted by Mio4kon on 2014-11-29

ToolBar

参考链接:官方API 博客

使用方法

  • 首先要禁用ActionBar,方法如下:

最简单的方式就说继承Theme.AppCompat.NoActionBar

或者用下面的方式

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">

res/values/styles.xml

 <!-- Base application theme. -->
  <style name="AppTheme" parent="AppTheme.Base">
 </style>

<style name="AppTheme.Base" parent="Theme.AppCompat">
  <item name="windowActionBar">false</item>
  <item name="android:windowNoTitle">true</item>
</style>    
  • 界面中加入ToolBar控件

    <android.support.v7.widget.Toolbar
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/toolbar"
            android:background="?attr/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:elevation="6dp"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:transitionName="actionBar"/>
    
  • 代码中加入声明

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

个性化ToolBar

Drawing

Toolbar的颜色:colorPrimary

如图,我们可以再之前的AppTheme.Base中加入一些属性

<!-- ...and here we setting appcompat’s color theming attrs -->
<item name="colorPrimary">@color/theme_default_primary</item>

但是
若你的 android app 仍是使用 actionbar 实作,则直接在风格 (styles) 或是主题 (themes) 里进行设定 colorPrimary 参数即可;
可若是采用 toolbar 的话,则要在界面 (layout) 里面设定 toolbar 元件的 background 属性



导航栏底色:navigationBarColor

仅能设定在 API v21 也就是 Android 5 以后的版本, 因此要将之设定在 res/values-v21/styles.xml 里面。



主视窗底色:windowBackground

同样可以再AppTheme.Base中加入这一属性

<item name="android:windowBackground">@color/theme_window_background</item>

ToolBar元件

image

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

// App Logo
toolbar.setLogo(R.drawable.ic_launcher);
// Title 
toolbar.setTitle("My Title");
// Sub Title
toolbar.setSubtitle("Sub title");

setSupportActionBar(toolbar);

// Navigation Icon 要設定在 setSupoortActionBar之后才有作用
// 否則會出現 back button
toolbar.setNavigationIcon(R.drawable.ab_android);

setTitle(“My Title”)需要在setSupportActionBar(toolbar)之前才有效
setNavigationIcon需要放在 setSupportActionBar之后才会生效。
菜单部分需要在xml文件中定义

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=".MainActivity">

  <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_edit"
        android:orderInCategory="90"
        android:icon="@drawable/ab_share"
        app:showAsAction="ifRoom" />

  <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never"/>
</menu>

注意:如果在Fragment中加入,需要在oncreat中写入setHasOptionsMenu (true)才有效

菜单部分在代码中的监听

private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
  @Override
  public boolean onMenuItemClick(MenuItem menuItem) {
    String msg = "";
    switch (menuItem.getItemId()) {
      case R.id.action_edit:
        msg += "Click edit";
        break;
      case R.id.action_share:
        msg += "Click share";
        break;
      case R.id.action_settings:
        msg += "Click setting";
        break;
    }

    if(!msg.equals("")) {
      Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
    }
    return true;
  }
};

将onMenuItemClick监听者设置给toolbar

// Menu item click 的监听要设置在 setSupportActionBar 之后才有作用  
toolbar.setOnMenuItemClickListener(onMenuItemClick);

给ToolBar添加返回键

setSupportActionBar(toolbar);
//写在setSupportActionBar(toolbar)后面
 getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationOnClickListener (new OnClickListener () {
    @Override
    public void onClick(View v) {
        finish ();
    }
});