Android Toolbar的詳細使用步驟
Toolbar 可以實現所有 ActionBar 的功能,並且可定製性更高。Toolbar 是 App 實現 Material Design 不可缺少的控制元件。
一、基礎使用
1.首先在 build.gradle 引入support v7包
dependencies {
compile 'com.android.support:appcompat-v7:24.0.0'
}
2.找到 Manifest 檔案的 Application 標籤下 Theme 屬性
3.自定義 Theme 屬性,因為 Activity 預設是有 ActionBar 的,所以需要先將預設的 ActionBar 去掉( parent=”Theme.AppCompat.Light.NoActionBar”
<style name="DrivingTheme" parent="AppThemeBase"></style>
附錄一張常用屬性圖,上面的每個屬性就很好理解了。
做完上面兩步,我們已經將 ActionBar 隱藏了,下面就是新增 Toolbar 的步驟
1.先在需要新增 Toolbar 的 xml 檔案中,加入 Toolbar 控制元件
<FrameLayout 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="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
app:theme="@style/ToolbarTheme"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleTextAppearance="@style/ToolbarTitle"
>
</android.support.v7.widget.Toolbar>
</FrameLayout>
解釋一下 Toolbar 裡面的屬性,這裡面的屬性大多見名知意,很好理解。
我們發現 Toolbar 裡面有三個屬性是以 app 作為字首,因為 Toolbar 在 5.0 系統才出現,以 app 為字首名的屬性是為了相容 5.0 以下的系統 。
咱們一個個分析,先講下這個屬性
- app:theme
app:theme="@style/ToolbarTheme"
這個根據專案需求,我們自定義的 Toolbar 屬性。關鍵點:因為我們 App 的主題是淺色的主題“Theme.AppCompat.Light.NoActionBar”,所以 Toolbar 中,我們繼承了parent=”ThemeOverlay.AppCompat.Dark.ActionBar”, 如果 Toolbar 不用深色的主題,標題欄的字型之類看不清楚。
- app:popupTheme
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
見名知意,這是 PopWindow 的主題,由於我們 ActionBar 設定的是深色的,預設情況下, PopWindow 和 ActionBar 的主題是統一的,但 PopWindow 的深色主題和整個 App 的整體顏色風格太不搭,所以我們需要將主題改成和 App 風格一致。
- app:titleTextAppearance 這個很好理解,就是標題字型的各種屬性集合
app:titleTextAppearance="@style/ToolbarTitle
以上屬性都是根據專案需求設定的,可加可不加, Toolbar 的可定製性很強~
然後就可以在 Activity 中展示 Toolbar 了
public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
}
}
這樣我們就做到了,隱藏 ActionBar,使用 Toolbar 了。注意:標題欄是預設在左上角的,並沒有居中
二、Toolbar 中展示 Toolbar 的標題,圖示等
1.先自定義標題欄,讓標題居中
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/ToolbarTheme"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleTextAppearance="@style/ToolbarTitle">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="KeithXiaoY"
android:textSize="16sp"
android:layout_gravity="center"
/>
</android.support.v7.widget.Toolbar>
2.在 Toolbar 上新增幾個按鈕,先在 res 目錄下新建一個資料夾:Menu,建立一個 toolbar_menu.xml 檔案
<?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"
>
<item
android:id="@+id/backup"
android:icon="@drawable/ic_backup"
android:title="Backup"
app:showAsAction="always"/>
<item
android:id="@+id/delete"
android:icon="@drawable/ic_delete"
android:title="Delete"
app:showAsAction="always"/>
</menu>
在MainActivity 重寫 onCreateOptionsMenu 、onOptionsItemSelected 方法
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_menu,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
case R.id.backup:
Toast.makeText(this, "KeithXiaoY clicked Backup", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "KeithXiaoY clicked Delete", Toast.LENGTH_SHORT).show();
break;
default:
}
return true;
}
效果圖:
Toolbar 的基本使用就總結到這裡,以後有 Toolbar 的需求,忘了如何使用,就可以來看一眼,迅速回憶起來。根據 Material Design 規範,一般 Toolbar 會結合 Navigation View 一起使用,接下來我會結合 Navigation View 來完善 Toolbar 的功能。
本文原創釋出於微信公眾號「keithxiaoy」,程式設計、思維、成長、正能量,關注並回復「程式設計」、「閱讀」、「Java」、「Python」等關鍵字獲取免費學習資料