Android 5.x Theme 與 ToolBar 實戰

發表於2015-05-10

1、概述

隨著Material Design的逐漸的普及，業內也有很多具有分享精神的夥伴翻譯了material design specification ，中文翻譯地址：Material Design 中文版。So，我們也開始Android 5.x相關的blog，那麼首先了解的當然是其主題的風格以及app bar。

當然，5.x普及可能還需要一段時間，所以我們還是儘可能的去使用相容包支援低版本的裝置。

ps:本部落格使用：

compileSdkVersion 22

buildToolsVersion “22.0.1”

compile ‘com.android.support:appcompat-v7:22.1.1’

忽然發現ActionBarActivity被棄用了，推薦使用AppCompatActivity，相關blog地址：Android Support Library 22.1

2、Material Design的Theme

md的主題有：

@android:style/Theme.Material (dark version)
@android:style/Theme.Material.Light (light version)
@android:style/Theme.Material.Light.DarkActionBar

與之對應的Compat Theme:

Theme.AppCompat
Theme.AppCompat.Light
Theme.AppCompat.Light.DarkActionBar

（1）個性化 Color Palette

我們可以根據我們的app的風格，去定製Color Palette(調色盤)，重點有以下幾個屬性：

<item name="colorPrimary">@color/material_blue_500</item>

<item name="colorPrimaryDark">@color/material_blue_700</item>

<item name="colorAccent">@color/material_green_A200</item>

</style>

</resources>

colorPrimary 對應ActionBar的顏色。
colorPrimaryDark對應狀態列的顏色
colorAccent 對應EditText編輯時、RadioButton選中、CheckBox等選中時的顏色。

與之對應的圖：

metarial design的theme允許我們去設定status bar的顏色，如果你專案的最小支援版本為5.0，那麼你可以使用android:Theme.Material，設定android:statusBarColor。當然了這種情況目前來說比較少，所以我們多數使用的是Theme.AppCompat，通過設定android:colorPrimaryDark.來設定status bar顏色。（ps：預設情況下，android:statusBarColor的值繼承自android:colorPrimaryDark）.

對於5.0以下的裝置，目前colorPrimaryDark無法去個性化狀態列的顏色；底部的navagationBar可能也不一樣，更別說設定顏色了。

下面寫個簡單的Demo去測試下。

（2）測試效果

values/styles.xml

</style>

<item name="colorPrimary">@color/material_blue_500</item>

<item name="colorPrimaryDark">@color/material_blue_700</item>

<item name="colorAccent">@color/material_green_A200</item>

</style>

</resources>

values-v21/styles.xml

<item name="android:statusBarColor">@color/material_blue_700</item>

</style>

</resources>

values/colors.xml

<?xml version="1.0" encoding="utf-8"?>

</resources>

可以看到：colorAccent也就是圖中的粉色，EditText正在輸入時，RadioButton選中時的顏色。ps:5.0以下裝置，狀態列顏色不會變化。

3、ToolBar的使用

眾所周知，在使用ActionBar的時候，一堆的問題：這個文字能不能定製，位置能不能改變，圖示的間距怎麼控制神馬的，由此暴露出了ActionBar設計的不靈活。為此官方提供了ToolBar，並且提供了supprot library用於向下相容。Toolbar之所以靈活，是因為它其實就是一個ViewGroup，我們在使用的時候和普通的元件一樣，在佈局檔案中宣告。

（1）ToolBar的引入

既然準備用ToolBar，首先看看如何將其引入到app中。

1）隱藏原本的ActionBar

隱藏可以通過修改我們繼承的主題為：Theme.AppCompat.Light.NoActionBar，當然也可以通過設定以下屬性完成：

1 2	<item name="windowActionBar">false</item> <item name="android:windowNoTitle">true</item>

我們這裡選擇前者：

<item name="colorPrimary">@color/material_blue_500</item>

<item name="colorPrimaryDark">@color/material_blue_700</item>

<item name="colorAccent">@color/material_green_A200</item>

</style>

2）在佈局檔案中宣告

<android.support.v7.widget.Toolbar
        android:id="@+id/id_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent" />

<android.support.v7.widget.GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"

app:useDefaultMargins="true"
        app:columnCount="3">

<TextView
            android:text="Last Name:"

app:layout_column="0"
            app:layout_gravity="right" />

<TextView
            android:text="Visit Type:"

app:layout_column="0"
            app:layout_gravity="right" />

</RadioGroup>

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

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:orientation="vertical"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.v7.widget.Toolbar

android:id="@+id/id_toolbar"

android:layout_height="wrap_content"

android:layout_width="match_parent" />

<android.support.v7.widget.GridLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

app:useDefaultMargins="true"

app:columnCount="3">

<TextView

android:text="First Name:"

app:layout_gravity="right" />

<EditText

android:ems="10"

app:layout_columnSpan="2" />

<TextView

android:text="Last Name:"

app:layout_column="0"

app:layout_gravity="right" />

<EditText

android:ems="10"

app:layout_columnSpan="2" />

<TextView

android:text="Visit Type:"

app:layout_column="0"

app:layout_gravity="right" />

<RadioButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Business" />

<RadioButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Social" />

</RadioGroup>

<Button

android:text="Ok"

app:layout_column="1" />

<Button

android:text="Cancel"

app:layout_column="2" />

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

</LinearLayout>

ok，這裡我們也貼出來上面圖片的效果的xml，使用GridLayout實現的，有興趣的可以研究下。可以看到我們在佈局檔案中定義了ToolBar。

3）程式碼中設定

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

setSupportActionBar(toolbar);

}

ok,基本就是先隱藏ActionBar，然後在佈局檔案中宣告，最後程式碼中設定一下。現在看一下效果圖：

可以看到我們的ToolBar顯示出來了，預設的Title為ToolBar，但是這個樣式實在是不敢恭維，下面看我們如何定製它。

（2）定製ToolBar

首先給它一個nice的背景色，還記得前面的colorPrimary麼，用於控制ActionBar的背景色的。當然這裡我們的ToolBar就是一個普通的ViewGroup在佈局中，所以我們直接使用background就好，值可以為：?attr/colorPrimary使用主題中定義的值。

ToolBar中包含Nav Icon , Logo , Title , Sub Title , Menu Items 。

我們可以通過程式碼設定上述ToolBar中的控制元件：

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

// App Logo

toolbar.setLogo(R.mipmap.ic_launcher);

// Title

toolbar.setTitle("App Title");

// Sub Title

toolbar.setSubtitle("Sub title");

setSupportActionBar(toolbar);

//Navigation Icon

toolbar.setNavigationIcon(R.drawable.ic_toc_white_24dp);

}

可選方案當然如果你喜歡，也可以在佈局檔案中去設定部分屬性：

<android.support.v7.widget.Toolbar

android:id="@+id/id_toolbar"

app:title="App Title"

app:subtitle="Sub Title"

app:navigationIcon="@drawable/ic_toc_white_24dp"

android:layout_height="wrap_content"

android:minHeight="?attr/actionBarSize"

android:layout_width="match_parent"

android:background="?attr/colorPrimary"/>

至於Menu Item，依然支援在menu/menu_main.xml去宣告，然後複寫onCreateOptionsMenu和onOptionsItemSelected即可。

可選方案也可以通過toolbar.setOnMenuItemClickListener實現點選MenuItem的回撥。

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {

@Override

public boolean onMenuItemClick(MenuItem item) {

return false;

}

});

效果圖：

關於字型的樣式，可以在佈局檔案設定屬性app:titleTextAppearance、app:subtitleTextAppearance或者程式碼setTitleTextAppearance、setSubTitleTextAppearance設定。

4、實戰

簡單介紹了Toolbar以後呢，我們決定做點有意思的事，整合ToolBar，DrawerLayout，ActionBarDrawerToggle寫個實用的例子，效果圖如下：

ok，簡單處理了下橫縱螢幕的切換。接下來看程式碼實現。

大致思路

整體實現還是比較容易的，首先需要引入DrawerLayout（如果你對DrawerLayout不瞭解，可以參考
Android DrawerLayout 高仿QQ5.2雙向側滑選單)，然後去初始化mActionBarDrawerToggle，mActionBarDrawerToggle實際上是個DrawerListener，設定mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);就已經能夠實現上面點選Nav Icon切換效果了。當然了細節還是挺多的。

我們的效果圖，左側選單為Fragment，內容區域為Fragment，點選左側選單切換內容區域的Fragment即可。關於Fragment的知識，可以檢視：Android Fragment 你應該知道的一切

佈局檔案
activity_main.xml

<android.support.v7.widget.Toolbar
        android:id="@+id/id_toolbar"
        app:title="App Title"
        app:navigationIcon="@drawable/ic_toc_white_24dp"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary" />

<android.support.v4.widget.DrawerLayout
        android:id="@+id/id_drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

</android.support.v4.widget.DrawerLayout>

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:orientation="vertical"

android:layout_height="match_parent"

android:background="#ffffffff"

xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.v7.widget.Toolbar

android:id="@+id/id_toolbar"

app:title="App Title"

app:navigationIcon="@drawable/ic_toc_white_24dp"

android:layout_height="wrap_content"

android:minHeight="?attr/actionBarSize"

android:layout_width="match_parent"

android:background="?attr/colorPrimary" />

<android.support.v4.widget.DrawerLayout

android:id="@+id/id_drawerlayout"

android:layout_width="match_parent"

android:layout_height="match_parent">

<FrameLayout

android:id="@+id/id_content_container"

android:layout_width="match_parent"

android:layout_height="match_parent"></FrameLayout>

<FrameLayout

android:id="@+id/id_left_menu_container"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="left"

android:background="#ffffffff"></FrameLayout>

</android.support.v4.widget.DrawerLayout>

</LinearLayout>

DrawerLayout中包含兩個FrameLayout，分別放內容區域和左側選單的Fragment。

LeftMenuFragment

package com.zhy.toolbar;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;

/**
 * Created by zhy on 15/4/26.
 */
public class LeftMenuFragment extends ListFragment {

private static final int SIZE_MENU_ITEM = 3;

private MenuItem[] mItems = new MenuItem[SIZE_MENU_ITEM];

private LeftMenuAdapter mAdapter;

private LayoutInflater mInflater;

@Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

mInflater = LayoutInflater.from(getActivity());

MenuItem menuItem = null;
        for (int i = 0; i < SIZE_MENU_ITEM; i++) {
            menuItem = new MenuItem(getResources().getStringArray(R.array.array_left_menu)[i], false, R.drawable.music_36px, R.drawable.music_36px_light);
            mItems[i] = menuItem;
        }
    }

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return super.onCreateView(inflater, container, savedInstanceState);
    }

@Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

setListAdapter(mAdapter = new LeftMenuAdapter(getActivity(), mItems));

}

@Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        super.onListItemClick(l, v, position, id);

if (mMenuItemSelectedListener != null) {
            mMenuItemSelectedListener.menuItemSelected(((MenuItem) getListAdapter().getItem(position)).text);
        }

mAdapter.setSelected(position);

}

//選擇回撥的介面
    public interface OnMenuItemSelectedListener {
        void menuItemSelected(String title);
    }
    private OnMenuItemSelectedListener mMenuItemSelectedListener;

public void setOnMenuItemSelectedListener(OnMenuItemSelectedListener menuItemSelectedListener) {
        this.mMenuItemSelectedListener = menuItemSelectedListener;
    }

}

package com.zhy.toolbar;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.ListFragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ListView;

/**

* Created by zhy on 15/4/26.

public class LeftMenuFragment extends ListFragment {

private static final int SIZE_MENU_ITEM = 3;

private MenuItem[] mItems = new MenuItem[SIZE_MENU_ITEM];

private LeftMenuAdapter mAdapter;

private LayoutInflater mInflater;

@Override

public void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

mInflater = LayoutInflater.from(getActivity());

MenuItem menuItem = null;

for (int i = 0; i < SIZE_MENU_ITEM; i++) {

menuItem = new MenuItem(getResources().getStringArray(R.array.array_left_menu)[i], false, R.drawable.music_36px, R.drawable.music_36px_light);

mItems[i] = menuItem;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

return super.onCreateView(inflater, container, savedInstanceState);

}

@Override

public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {

super.onViewCreated(view, savedInstanceState);

setListAdapter(mAdapter = new LeftMenuAdapter(getActivity(), mItems));

}

@Override

public void onListItemClick(ListView l, View v, int position, long id) {

super.onListItemClick(l, v, position, id);

if (mMenuItemSelectedListener != null) {

mMenuItemSelectedListener.menuItemSelected(((MenuItem) getListAdapter().getItem(position)).text);

}

mAdapter.setSelected(position);

}

//選擇回撥的介面

public interface OnMenuItemSelectedListener {

void menuItemSelected(String title);

}

private OnMenuItemSelectedListener mMenuItemSelectedListener;

public void setOnMenuItemSelectedListener(OnMenuItemSelectedListener menuItemSelectedListener) {

this.mMenuItemSelectedListener = menuItemSelectedListener;

}

繼承自ListFragment，主要用於展示各個Item，提供了一個選擇Item的回撥，這個需要在Activity中去註冊處理。

LeftMenuAdapter

package com.zhy.toolbar;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by zhy on 15/4/26.
 */
public class LeftMenuAdapter extends ArrayAdapter<MenuItem> {

private LayoutInflater mInflater;

private int mSelected;

public LeftMenuAdapter(Context context, MenuItem[] objects) {
        super(context, -1, objects);

mInflater = LayoutInflater.from(context);

}

@Override
    public View getView(int position, View convertView, ViewGroup parent) {

if (convertView == null) {
            convertView = mInflater.inflate(R.layout.item_left_menu, parent, false);
        }

ImageView iv = (ImageView) convertView.findViewById(R.id.id_item_icon);
        TextView title = (TextView) convertView.findViewById(R.id.id_item_title);
        title.setText(getItem(position).text);
        iv.setImageResource(getItem(position).icon);
        convertView.setBackgroundColor(Color.TRANSPARENT);

if (position == mSelected) {
            iv.setImageResource(getItem(position).iconSelected);
            convertView.setBackgroundColor(getContext().getResources().getColor(R.color.state_menu_item_selected));
        }

return convertView;
    }

public void setSelected(int position) {
        this.mSelected = position;
        notifyDataSetChanged();
    }

}

package com.zhy.toolbar;

public class MenuItem {

public MenuItem(String text, boolean isSelected, int icon, int iconSelected) {
        this.text = text;
        this.isSelected = isSelected;
        this.icon = icon;
        this.iconSelected = iconSelected;
    }

boolean isSelected;
    String text;
    int icon;
    int iconSelected;
}

package com.zhy.toolbar;

import android.content.Context;

import android.graphics.Color;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

/**

* Created by zhy on 15/4/26.

public class LeftMenuAdapter extends ArrayAdapter<MenuItem> {

private LayoutInflater mInflater;

private int mSelected;

public LeftMenuAdapter(Context context, MenuItem[] objects) {

super(context, -1, objects);

mInflater = LayoutInflater.from(context);

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

if (convertView == null) {

convertView = mInflater.inflate(R.layout.item_left_menu, parent, false);

}

ImageView iv = (ImageView) convertView.findViewById(R.id.id_item_icon);

TextView title = (TextView) convertView.findViewById(R.id.id_item_title);

title.setText(getItem(position).text);

iv.setImageResource(getItem(position).icon);

convertView.setBackgroundColor(Color.TRANSPARENT);

if (position == mSelected) {

iv.setImageResource(getItem(position).iconSelected);

convertView.setBackgroundColor(getContext().getResources().getColor(R.color.state_menu_item_selected));

}

return convertView;

}

public void setSelected(int position) {

this.mSelected = position;

notifyDataSetChanged();

}

package com.zhy.toolbar;

public class MenuItem {

public MenuItem(String text, boolean isSelected, int icon, int iconSelected) {

this.text = text;

this.isSelected = isSelected;

this.icon = icon;

this.iconSelected = iconSelected;

}

boolean isSelected;

String text;

int icon;

int iconSelected;

}

Adapter沒撒說的~~提供了一個setSection方法用於設定選中Item的樣式什麼的。
接下來看ContentFragment，僅僅只是一個TextView而已，所以程式碼也比較easy。

package com.zhy.toolbar;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.text.TextUtils;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by zhy on 15/4/26.
 */
public class ContentFragment extends Fragment {

public static final String KEY_TITLE = "key_title";
    private String mTitle;

public static ContentFragment newInstance(String title) {
        ContentFragment fragment = new ContentFragment();
        Bundle bundle = new Bundle();
        bundle.putString(KEY_TITLE, title);
        fragment.setArguments(bundle);
        return fragment;
    }

@Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

TextView tv = new TextView(getActivity());
        String title = (String) getArguments().get(KEY_TITLE);
        if (!TextUtils.isEmpty(title))
        {
            tv.setGravity(Gravity.CENTER);
            tv.setTextSize(40);
            tv.setText(title);
        }

return tv;
    }
}

package com.zhy.toolbar;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.text.TextUtils;

import android.view.Gravity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

/**

* Created by zhy on 15/4/26.

public class ContentFragment extends Fragment {

public static final String KEY_TITLE = "key_title";

private String mTitle;

public static ContentFragment newInstance(String title) {

ContentFragment fragment = new ContentFragment();

Bundle bundle = new Bundle();

bundle.putString(KEY_TITLE, title);

fragment.setArguments(bundle);

return fragment;

}

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,

@Nullable Bundle savedInstanceState) {

TextView tv = new TextView(getActivity());

String title = (String) getArguments().get(KEY_TITLE);

if (!TextUtils.isEmpty(title))

{

tv.setGravity(Gravity.CENTER);

tv.setTextSize(40);

tv.setText(title);

}

return tv;

}

提供newInstance接收一個title引數去例項化它。

最後就是我們的MainActivity了，負責管理各種Fragment。

MainActivity

package com.zhy.toolbar;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.text.TextUtils;
import android.view.Gravity;

import java.util.List;

public class MainActivity extends AppCompatActivity {

private ActionBarDrawerToggle mActionBarDrawerToggle;

private DrawerLayout mDrawerLayout;

private Toolbar mToolbar;

private LeftMenuFragment mLeftMenuFragment;
    private ContentFragment mCurrentFragment;

private String mTitle;

private static final String TAG = "com.zhy.toolbar";
    private static final String KEY_TITLLE = "key_title";

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

initToolBar();
        initViews();

//恢復title
        restoreTitle(savedInstanceState);

FragmentManager fm = getSupportFragmentManager();
        //查詢當前顯示的Fragment
        mCurrentFragment = (ContentFragment) fm.findFragmentByTag(mTitle);

if (mCurrentFragment == null) {
            mCurrentFragment = ContentFragment.newInstance(mTitle);
            fm.beginTransaction().add(R.id.id_content_container, mCurrentFragment, mTitle).commit();
        }

mLeftMenuFragment = (LeftMenuFragment) fm.findFragmentById(R.id.id_left_menu_container);
        if (mLeftMenuFragment == null) {
            mLeftMenuFragment = new LeftMenuFragment();
            fm.beginTransaction().add(R.id.id_left_menu_container, mLeftMenuFragment).commit();
        }

//隱藏別的Fragment，如果存在的話
        List<Fragment> fragments = fm.getFragments();
        if (fragments != null)

for (Fragment fragment : fragments) {
                if (fragment == mCurrentFragment || fragment == mLeftMenuFragment) continue;
                fm.beginTransaction().hide(fragment).commit();
            }

//設定MenuItem的選擇回撥
        mLeftMenuFragment.setOnMenuItemSelectedListener(new LeftMenuFragment.OnMenuItemSelectedListener() {
            @Override
            public void menuItemSelected(String title) {

FragmentManager fm = getSupportFragmentManager();
                ContentFragment fragment = (ContentFragment) getSupportFragmentManager().findFragmentByTag(title);
                if (fragment == mCurrentFragment) {
                    mDrawerLayout.closeDrawer(Gravity.LEFT);
                    return;
                }

FragmentTransaction transaction = fm.beginTransaction();
                transaction.hide(mCurrentFragment);

if (fragment == null) {
                    fragment = ContentFragment.newInstance(title);
                    transaction.add(R.id.id_content_container, fragment, title);
                } else {
                    transaction.show(fragment);
                }
                transaction.commit();

mCurrentFragment = fragment;
                mTitle = title;
                mToolbar.setTitle(mTitle);
                mDrawerLayout.closeDrawer(Gravity.LEFT);

}
        });

}

private void restoreTitle(Bundle savedInstanceState) {
        if (savedInstanceState != null)
            mTitle = savedInstanceState.getString(KEY_TITLLE);

if (TextUtils.isEmpty(mTitle)) {
            mTitle = getResources().getStringArray(
                    R.array.array_left_menu)[0];
        }

mToolbar.setTitle(mTitle);
    }

@Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putString(KEY_TITLLE, mTitle);
    }

private void initToolBar() {

Toolbar toolbar = mToolbar = (Toolbar) findViewById(R.id.id_toolbar);
        // App Logo
        // toolbar.setLogo(R.mipmap.ic_launcher);
        // Title
        toolbar.setTitle(getResources().getStringArray(R.array.array_left_menu)[0]);
        // Sub Title
        // toolbar.setSubtitle("Sub title");

//        toolbar.setTitleTextAppearance();

setSupportActionBar(toolbar);

//Navigation Icon
        toolbar.setNavigationIcon(R.drawable.ic_toc_white_24dp);
        /*
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                return false;
            }
        });*/

}

private void initViews() {

mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerlayout);

mActionBarDrawerToggle = new ActionBarDrawerToggle(this,
                mDrawerLayout, mToolbar, R.string.open, R.string.close);
        mActionBarDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);

}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

package com.zhy.toolbar;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentTransaction;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBarDrawerToggle;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.text.TextUtils;

import android.view.Gravity;

import java.util.List;

public class MainActivity extends AppCompatActivity {

private ActionBarDrawerToggle mActionBarDrawerToggle;

private DrawerLayout mDrawerLayout;

private Toolbar mToolbar;

private LeftMenuFragment mLeftMenuFragment;

private ContentFragment mCurrentFragment;

private String mTitle;

private static final String TAG = "com.zhy.toolbar";

private static final String KEY_TITLLE = "key_title";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initToolBar();

initViews();

//恢復title

restoreTitle(savedInstanceState);

FragmentManager fm = getSupportFragmentManager();

//查詢當前顯示的Fragment

mCurrentFragment = (ContentFragment) fm.findFragmentByTag(mTitle);

if (mCurrentFragment == null) {

mCurrentFragment = ContentFragment.newInstance(mTitle);

fm.beginTransaction().add(R.id.id_content_container, mCurrentFragment, mTitle).commit();

}

mLeftMenuFragment = (LeftMenuFragment) fm.findFragmentById(R.id.id_left_menu_container);

if (mLeftMenuFragment == null) {

mLeftMenuFragment = new LeftMenuFragment();

fm.beginTransaction().add(R.id.id_left_menu_container, mLeftMenuFragment).commit();

}

//隱藏別的Fragment，如果存在的話

List<Fragment> fragments = fm.getFragments();

if (fragments != null)

for (Fragment fragment : fragments) {

if (fragment == mCurrentFragment || fragment == mLeftMenuFragment) continue;

fm.beginTransaction().hide(fragment).commit();

}

//設定MenuItem的選擇回撥

mLeftMenuFragment.setOnMenuItemSelectedListener(new LeftMenuFragment.OnMenuItemSelectedListener() {

@Override

public void menuItemSelected(String title) {

FragmentManager fm = getSupportFragmentManager();

ContentFragment fragment = (ContentFragment) getSupportFragmentManager().findFragmentByTag(title);

if (fragment == mCurrentFragment) {

mDrawerLayout.closeDrawer(Gravity.LEFT);

return;

}

FragmentTransaction transaction = fm.beginTransaction();

transaction.hide(mCurrentFragment);

if (fragment == null) {

fragment = ContentFragment.newInstance(title);

transaction.add(R.id.id_content_container, fragment, title);

} else {

transaction.show(fragment);

}

transaction.commit();

mCurrentFragment = fragment;

mTitle = title;

mToolbar.setTitle(mTitle);

mDrawerLayout.closeDrawer(Gravity.LEFT);

}

});

}

private void restoreTitle(Bundle savedInstanceState) {

if (savedInstanceState != null)

mTitle = savedInstanceState.getString(KEY_TITLLE);

if (TextUtils.isEmpty(mTitle)) {

mTitle = getResources().getStringArray(

R.array.array_left_menu)[0];

}

mToolbar.setTitle(mTitle);

}

@Override

protected void onSaveInstanceState(Bundle outState) {

super.onSaveInstanceState(outState);

outState.putString(KEY_TITLLE, mTitle);

}

private void initToolBar() {

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

// App Logo

// toolbar.setLogo(R.mipmap.ic_launcher);

// Title

toolbar.setTitle(getResources().getStringArray(R.array.array_left_menu)[0]);

// Sub Title

// toolbar.setSubtitle("Sub title");

// toolbar.setTitleTextAppearance();

setSupportActionBar(toolbar);

//Navigation Icon

toolbar.setNavigationIcon(R.drawable.ic_toc_white_24dp);

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {

@Override

public boolean onMenuItemClick(MenuItem item) {

return false;

}

});*/

}

private void initViews() {

mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerlayout);

mActionBarDrawerToggle = new ActionBarDrawerToggle(this,

mDrawerLayout, mToolbar, R.string.open, R.string.close);

mActionBarDrawerToggle.syncState();

mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);

}

內容區域的切換是通過Fragment hide和show實現的，畢竟如果用replace，如果Fragment的view結構比較複雜，可能會有卡頓。當然了，注意每個Fragment佔據的記憶體情況，如果記憶體不足，可能需要改變實現方式。
對於旋轉螢幕或者應用長時間置於後臺，Activity重建的問題，做了簡單的處理。

對了，寫佈局的時候，可以儘可能的去考慮 Material design 的規範。

5、參考資料

Android Toolbar的用法
2018-02-09
Android
Material Design 實戰之第一彈——Toolbar詳解
2018-09-16
Material Design
Android ToolBar 使用完全解析
2018-08-14
Android
最詳細的 Android Toolbar 開發實踐總結
2016-02-25
Android
Android之主題(Theme)總結
2018-09-20
Android
【QMUI教程】 Android Theme的使用
2017-09-01
UIAndroid
android位運算講解與實戰
2019-01-05
Android
Android 除錯實戰與原理詳解
2023-02-01
Android除錯
Android中Style和Theme資源
2020-06-03
Android
Android開發：最詳細的 Toolbar 開發實踐總結
2016-05-12
Android
Toolbar不能實現你的需求？
2019-03-04
android：ToolBar詳解（手把手教程）（2）
2021-09-09
Android
Android樣式(style)和主題(theme)
2016-12-04
Android
正確使用 Android 的 Theme 和 Style
2014-11-29
Android
Android FlatBuffers實戰
2019-03-01
Android
Android知識問答與分享專案實戰
2018-07-21
Android
react-navigation 5.x 最佳實踐
2020-02-22
ReactNavigation
Android進階一個專案，一個Toolbar
2019-03-04
Android
MVVMArms - MVVM 與 Android Architecture Components 的最佳實戰
2017-09-18
MVVMAndroid
Android Bitmap實戰技巧
2015-10-15
Android
Android開發筆記（一百一十九）工具欄ToolBar
2016-08-18
Android筆記
Android之android:theme設定在Application 和 Activity的區別
2018-11-01
AndroidAPP
Android實戰技巧之四十：Android5.1.1原始碼編譯與燒寫
2016-09-17
Android原始碼編譯
PathMeasure的API講解與實戰——Android高階UI
2019-01-05
APIAndroidUI
Google Android創贏路線與產品開發實戰
2010-07-19
GoAndroid
Maven實戰與原理分析（二）：maven實戰
2021-12-23
Maven
Android 屬性動畫實戰
2019-08-06
Android動畫
C++ Qt開發：ToolBar與MenuBar選單元件
2023-12-16
C++QT元件
webpack 原理與實戰
2017-07-03
Web
ToolBar、TabLayout、Fragment+ViewPager的開發實踐
2018-12-02
TabLayoutFragmentViewpager
Android中的Style、Theme詳解以及發展史
2018-05-02
Android
放蕩不羈SVG講解與實戰——Android高階UI
2019-04-07
SVGAndroidUI
《Android原始碼設計模式解析與實戰》讀書筆記
2017-12-17
Android原始碼設計模式筆記
ToolBar封裝策略
2019-03-04
封裝
Toolbar使用總結
2019-04-20
ThinkPHP 5.x 遠端命令執行漏洞分析與復現
2018-12-17
PHP
Java 反射理解以及Android實戰
2020-04-06
Java反射Android
Android最新面試實戰總結
2019-01-05
Android面試

Android 5.x Theme 與 ToolBar 實戰

1、概述

2、Material Design的Theme

（1）個性化 Color Palette

（2）測試效果

3、ToolBar的使用

（1）ToolBar的引入

1）隱藏原本的ActionBar

2）在佈局檔案中宣告

3）程式碼中設定

（2）定製ToolBar

4、實戰

5、參考資料

相關文章