本文參照Google官方的教程，進(jìn)行了二次整理和實際使用中的經(jīng)驗總結(jié)。
Android develop之AppBar
前言
沒什么前言了，能進(jìn)來看ToolBar，相信你也知道為什么要使用ToolBar了。接下來請坐穩(wěn)，讓我們一起去Android developer上學(xué)習(xí)一下ToolBar。
先放一張Toolbar的示意圖
Toolbar
一、ToolBar的基本入門使用
- 讓你的工程依賴支持v7 appcompat。這個不廢話。
- 讓你要顯示的Activity繼承AppCompatActivity。
- 在清單Manifest中設(shè)置Application的主題為NoActionBar。
<application
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
/>
如果你使用的是自定義主題，那么需要在你自定義的style里面加上下面的代碼，讓ActionBar隱藏。
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
- 在activiy的xml布局文件中加上ToolBar。
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
需要注意下面幾點
- 一般Toolbar都是放到布局的最上面。
- Material Design 規(guī)范)建議應(yīng)用欄具有 4 dp 的仰角，所以要android:elevation="4dp"
- android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
的作用是讓ToolBar浮于其他Activity布局之上。
- 在Activity中初始化ToolBar。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(myToolbar);
}
這里其實是分為兩步的：
- 初始化ToolBar對象；
- setSupportActionBar將ToolBar對象傳遞給Activity。該方法會將工具欄設(shè)置為 Activity 的應(yīng)用欄。
- 至此，一個最基本的ToolBar就完成了，這個ToolBar會包含應(yīng)用的名稱和一個溢出菜單。
二、在ToolBar上添加menu
簡單地說，就是把當(dāng)前Activity上比較重要的功能放到ToolBar上，這樣方便用戶操作。比如我們在看到一篇很好的博客的時候，ToolBar上就可以放上一個分享和收藏的標(biāo)簽。
這里我們采用menu的方式來實現(xiàn)此功能。
- 在res/menu/下創(chuàng)建一個menu資源文件
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/action_favorite"
android:icon="@drawable/ic_favorite_black_48dp"
android:title="@string/action_favorite"
app:showAsAction="ifRoom"/>
<item android:id="@+id/action_settings"
android:title="@string/action_settings"
app:showAsAction="never"/>
</menu>
每個menu的item設(shè)置icon、id、title。最重要的一個就是app:showAsAction，這個有下面?zhèn)€選項：
- never：永遠(yuǎn)不顯示的ToolBar上，只放在溢出菜單中（也就是三個豎點）。只有點擊溢出菜單才會彈出。
- always：無論是否溢出，總會顯示。
- ifRoom：如果還有地兒的話，那就顯示上。沒地兒的話就放到溢出菜單中。
- 將上一步的menu加載到ToolBar上。
準(zhǔn)確的說是將menu加載到Activity中，因為ToolBar取代了Activity的ActionBar，所以menu會被加載到ToolBar上。
在Activity的onCreateOptionsMenu中加載menu
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_item, menu);
return true;
}
- 添加對Menu的響應(yīng)。
當(dāng)我們點擊了響應(yīng)的menu，對應(yīng)的處理方法依然和普通的menu一樣是放在Activity的onOptionsItemSelected中。
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
// User chose the "Settings" item, show the app settings UI...
return true;
case R.id.action_favorite:
// User chose the "Favorite" action, mark the current item
// as a favorite...
return true;
default:
// If we got here, the user's action was not recognized.
// Invoke the superclass to handle it.
return super.onOptionsItemSelected(item);
}
}
- 修改menu的字體顏色
一般默認(rèn)主題的menu字體顏色是黑色，但是大多數(shù)我們希望的是白色。可以通過在style中加入一行設(shè)置來實現(xiàn)：
<item name="actionMenuTextColor">#ffffff</item>`
三、添加返回圖標(biāo)
添加返回圖標(biāo)有兩種方式：
方法一：官方方法
- 在AndroidManifest中在ParentActivity和ChildActivity中加上配置：
<application ... >
...
<!-- The main/home activity (it has no parent activity) -->
<activity
android:name="com.example.myfirstapp.MainActivity" ...>
...
</activity>
<!-- A child of the main activity -->
<activity
android:name="com.example.myfirstapp.MyChildActivity"
android:label="@string/title_activity_child"
android:parentActivityName="com.example.myfirstapp.MainActivity" >
<!-- Parent activity meta-data to support 4.0 and lower -->
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="com.example.myfirstapp.MainActivity" />
</activity>
</application>
- 在Java代碼中調(diào)用actionbar的setDisplayHomeAsUpEnabled()方法。這個方法是讓返回按鈕能顯示出來
// my_child_toolbar is defined in the layout file
Toolbar myChildToolbar = (Toolbar) findViewById(R.id.my_child_toolbar);
setSupportActionBar(myChildToolbar);
// Get a support ActionBar corresponding to this toolbar
ActionBar ab = getSupportActionBar();
// Enable the Up button
ab.setDisplayHomeAsUpEnabled(true);
這是官方API上的教程。
方法二：使用menu
這個方法無需在AndroidManifest中進(jìn)行配置
- 初始完成Toolbar之后，加上下面這兩行：
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
這兩行必須同時打開才可以。第一行是顯示返回按鈕，第二行是使action bar角落上的home button有效。
- 重寫onOptionsItemSelected方法，監(jiān)聽android.R.id.home：
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
Toast.makeText(this, "哈哈哈", Toast.LENGTH_SHORT).show();
finish();
}
return super.onOptionsItemSelected(item);
}
方法三：自己設(shè)置導(dǎo)航圖標(biāo)
ToolBar是可以自己設(shè)置導(dǎo)航icon的，我們完全可以把導(dǎo)航icon設(shè)置為返回按鈕，然后開始監(jiān)聽返回按鈕的點擊事件。
看下面的代碼。
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
四、Toolbar中加入自定義view
Toolbar為我們提供了title、subtitle、navigationIcon、還有各種menu等組件。但這些似乎并不能滿足我們的設(shè)計師，似乎要在Toolbar中加入各種絢麗的功能，讓我們的Toolbar變得功能更加豐富。這也難不倒我們。因為Toolbar繼承了ViewGroup，所以只要你需要，你可以添加各種View到Toolbar中。使用方法也非常簡單。只要在xml布局的Toolbar標(biāo)簽中直接添加View就可以，然后在Java代碼中像普通組件一樣直接使用就可以了。
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hahaha"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
/>
</android.support.v7.widget.Toolbar>
