Android: Toolbar、AppBarLayout

ToolBar是google退出的一个应用程序动作条

包括：

• 设置导航栏图标
• 设置应用程序Logo
• 设置标题
• 设置子标题
• 添加各种自定义控件
• 添加动作条菜单

API：https://developer.android.com/reference/android/support/v7/widget/Toolbar.html

 

1. 兼容处理，使用v7兼容包，build.gradle配置

    compile 'com.android.support:appcompat-v7:24.0.0'

2. 隐藏默认的动作条，可以使用NoActionBar的theme，也可以在activity使用代码

3. 布局文件中可以支持出了动作条菜单actionmenu外的所有功能，

    但是一定要添加自定义命名空间，指向 http://schemas.android.com/apk/res-auto

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolBar"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways"
        app:navigationIcon="@mipmap/ic_back"
        app:logo="@mipmap/ic_launcher"
        app:title="@string/app_name"
        app:subtitle="@string/home_title"
        app:subtitleTextColor="@color/bt_accent"
        >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TestCustomView" />

    </android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

4. 通过代码实现Toolbar的创建及menu事件监听

　activity

package com.media.customplayer;

import android.support.design.widget.NavigationView;
import android.support.design.widget.NavigationView.OnNavigationItemSelectedListener;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v4.widget.DrawerLayout.DrawerListener;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.support.v7.widget.Toolbar.OnMenuItemClickListener;
import android.util.Log;
import android.view.MenuItem;
import android.view.View;

public class PlayerActivity extends AppCompatActivity {

    private final String TAG = "PlayerActivity";
    private DrawerLayout mPlayerDrawer;
    private NavigationView mNaviView;
    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_player);

        mPlayerDrawer = (DrawerLayout) findViewById(R.id.palyer_drawer_layout);
        mPlayerDrawer.addDrawerListener(drawerListener);

        mNaviView = (NavigationView) findViewById(R.id.navi_view);
        mNaviView.setNavigationItemSelectedListener(naviItemSelectedListener);

        updateToolbar();
    }

    private DrawerListener drawerListener = new DrawerLayout.DrawerListener() {
        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            Log.v(TAG, "onDrawerSlide: slideOffset = " + slideOffset);
        }

        @Override
        public void onDrawerOpened(View drawerView) {
            Log.v(TAG, "onDrawerOpened");
        }

        @Override
        public void onDrawerClosed(View drawerView) {
            Log.v(TAG, "onDrawerClosed");
        }

        @Override
        public void onDrawerStateChanged(int newState) {
            Log.v(TAG, "onDrawerStateChanged: newState = " + newState);
        }
    };

    private OnNavigationItemSelectedListener naviItemSelectedListener = new OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navi_all:
                    Log.v(TAG, "播放所有音乐");
                    break;
                case R.id.navi_playlists:
                    Log.v(TAG, "播放音乐列表");
                    break;
                default:
                    Log.v(TAG, "点击按钮: " + item.getItemId());
            }

            item.setChecked(true);
            mPlayerDrawer.closeDrawer(GravityCompat.START, true);
            return true;
        }
    };

    private OnMenuItemClickListener menuItemClickListener = new OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navi_all:
                    Log.v(TAG, "播放所有音乐");
                    break;
                case R.id.navi_playlists:
                    Log.v(TAG, "播放音乐列表");
                    break;
                default:
                    Log.v(TAG, "点击按钮: " + item.getItemId());
            }

            item.setChecked(true);
            return true;
        }
    };

    private void updateToolbar() {
        mToolbar = (Toolbar) findViewById(R.id.player_toolbar);

        mToolbar.setNavigationIcon(R.mipmap.ic_back);
        mToolbar.setLogo(R.mipmap.ic_launcher);
        mToolbar.setTitle(R.string.app_name);
        mToolbar.setSubtitle(R.string.home_title);

        mToolbar.inflateMenu(R.menu.player_toolbar_menu);
        mToolbar.setOnMenuItemClickListener(menuItemClickListener);
    }

}

   menu layout

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navi_all"
            android:icon="@mipmap/ic_allmusic_black_24dp"
            android:title="@string/drawer_allmusic_title"
            app:showAsAction="ifRoom"/>
        <item
            android:id="@+id/navi_playlists"
            android:icon="@mipmap/ic_playlist_music_black_24dp"
            android:title="@string/drawer_playlists_title"
            android:checked="true" />
        <item
            android:id="@+id/navi_sub_item_bottom_1"
            android:icon="@mipmap/ic_allmusic_black_24dp"
            android:title="@string/drawer_sub_playlist_title" />
        <item
            android:id="@+id/navi_sub_item_bottom_2"
            android:icon="@mipmap/ic_allmusic_black_24dp"
            android:title="@string/drawer_sub_playlist_title" />
    </group>
</menu>

5. 修改action menu的颜色

  style.xml

<resources>

    <!-- Base application theme. -->
    <style name="PlayerTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#ffff5722</item>
        <item name="colorPrimaryDark">#ffbf360c</item>
        <item name="colorAccent">#ffff5722</item>
        <item name="alertDialogTheme">@style/Theme.AppCompat.Dialog.Alert</item>
    </style>

    <style name="PlayerTheme.ToolBar" parent="PlayerTheme">
        <item name="android:textColorPrimary">#00B8D4</item>
    </style>

</resources>

  activity

        mToolbar.setPopupTheme(R.style.PlayerTheme_ToolBar);

  可以是布局文件

        app:popupTheme="@style/PlayerTheme.ToolBar"

 

AppBarLayout

AppBarLayout是一个垂直方向的LinearLayout，是为MaterialDesign设计的AppBar（包括的view都会认为是appbar），支持手势滑动。