Toolbar 是在 Android5.0 推出的一款 MD 風(fēng)格的導(dǎo)航控件熏挎,主要是為了替換 Actionbar 的骚腥。與 Actionbar 相比懊悯,Toolbar 非常靈活窗悯,我們可以自由地在 Toolbar 內(nèi)添加子控件区匣。
使用 Toolbar
由于 Toolbar 是在 Android5.0 才開始加上的,低版本要使用的話蒋院,需要引入 support-v7 兼容包亏钩,使用 android.support.v7.widget.Toolbar 進(jìn)行開發(fā)。
compile 'com.android.support:appcompat-v7:25.3.1'
修改 style
打開 res/values/styles.xml欺旧,默認(rèn)配置如下:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
來看一下 style 屬性所對應(yīng)的涵義
隱藏默認(rèn)的 Toolbar
- 方式1
改成其他沒有 Toolbar 的主題
parent="Theme.AppCompat.Light.NoActionBar"
- 方式2
自己建立一個主題姑丑,并在屬性中設(shè)置無 Toolbar
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="AppTheme">
<!--將ActionBar隱藏,這里使用ToolBar-->
<item name="windowActionBar">false</item>
<!-- 使用 API Level 22以上編譯的話,要拿掉前綴字 -->
<item name="windowNoTitle">true</item>
<!--colorPrimaryDark對應(yīng)狀態(tài)欄的顏色-->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!--colorPrimary 對應(yīng)ToolBar的顏色-->
<item name="colorPrimary">@color/colorPrimary</item>
<!--colorAccent 對應(yīng)EditText編輯時辞友、RadioButton選中栅哀、CheckBox等選中時的顏色。-->
<item name="colorAccent">@color/colorAccent</item>
<!--窗口的顏色-->
<item name="android:windowBackground">@color/colorWindow</item>
</style>
如果不隱藏默認(rèn) Toolbar称龙,在代碼中對 Toolbar 進(jìn)行 setSupportActionBar 操作時留拾,會報錯:
Caused by: java.lang.IllegalStateException: This Activity already has an action bar
supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set
windowActionBar to false in your theme to use a Toolbar instead.
在布局文件中添加 Toolbar 控件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ginkwang.toolbarsample.MainActivity">
?
<android.support.v7.widget.Toolbar
android:id="@+id/tb_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
</RelativeLayout>
?attr/actionBarSize : 表示根據(jù)屏幕的分辨率采用系統(tǒng)默認(rèn)的高度 如果低版本也要使用的話,則需要使用v7包的,否則只有api21上才能有效
Java 文件中調(diào)用
Toolbar 的一些屬常用屬性也在代碼中使用并寫明作用了。
public class MainActivity extends AppCompatActivity {
?
private Toolbar mTbMain;
?
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
?
private void initView() {
mTbMain = (Toolbar) findViewById(R.id.tb_main);
//設(shè)置 APP logo
mTbMain.setLogo(R.mipmap.ic_logo);
//設(shè)置主標(biāo)題鲫尊,默認(rèn)為 app_label
mTbMain.setTitle("標(biāo)題");
//設(shè)置主標(biāo)題文字顏色
mTbMain.setTitleTextColor(getResources().getColor(R.color.colorWhiteOne));
//設(shè)置副標(biāo)題
mTbMain.setSubtitle("副標(biāo)題");
//設(shè)置副標(biāo)題顏色
mTbMain.setSubtitleTextColor(getResources().getColor(R.color.colorWhiteTwo));
//設(shè)置側(cè)邊欄(抽屜)的按鈕
mTbMain.setNavigationIcon(R.mipmap.ic_navigation);
//取代原本的 Actionbar
setSupportActionBar(mTbMain);
}
}
效果圖:
Toolbar 的高級用法
NavigationIcon 點擊事件
設(shè)置 NavigationIcon 的點擊事件,需要放在 setSupportActionBar 之后設(shè)置才會生效,因為setSupportActionBar 里面也會 setNavigationOnClickListener()
setSupportActionBar(mTbMain);
//設(shè)置NavigationIcon的點擊事件,需要放在setSupportActionBar之后設(shè)置才會生效,
//因為setSupportActionBar里面也會setNavigationOnClickListener
mTbMain.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View pView) {
// TODO: 2017/5/5 添加抽屜
}
});
添加菜單 Menu
- 菜單布局
<?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/menu_item_share"
android:icon="@mipmap/ic_share"
android:orderInCategory="1"
android:title="@string/menu_share"
app:showAsAction="always"/>
?
<item
android:id="@+id/menu_item_about"
android:icon="@mipmap/ic_about"
android:orderInCategory="2"
android:title="@string/menu_about"
app:showAsAction="ifRoom"/>
?
<item
android:id="@+id/menu_item_more"
android:icon="@mipmap/ic_more"
android:orderInCategory="3"
android:title="@string/menu_more"
app:showAsAction="never"/>
</menu>
其中痴柔,
android:orderInCategory 屬性代表 actionbar 里每個item的優(yōu)先級,值越大優(yōu)先級越低
app:showAsAction 屬性表示是否在 ToolBar 上顯示按鈕,屬性值有如下幾種:
always:使菜單項一直顯示在ToolBar上
ifRoom:如果有足夠的空間疫向,這個值會使菜單項顯示在ToolBar上
never:使菜單項永遠(yuǎn)都不出現(xiàn)在ToolBar上,在…的子項中顯示
withText:使菜單項和它的圖標(biāo)咳蔚,菜單文本一起顯示
由于showAsAction屬性是在支持包中定義的豪嚎,所以需要添加命名空間:
xmlns:app="http://schemas.android.com/apk/res-auto"
Java 代碼中添加 Menu 監(jiān)聽
- 方法一
重寫onCreateOptionsMenu(Menu menu)、onOptionsItemSelected(MenuItem item)
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
?
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_item_share:
Toast.makeText(MainActivity.this, "分享", Toast.LENGTH_LONG).show();
break;
?
case R.id.menu_item_about:
Toast.makeText(MainActivity.this, "關(guān)于", Toast.LENGTH_LONG).show();
break;
?
case R.id.menu_item_more:
Toast.makeText(MainActivity.this, "更多", Toast.LENGTH_LONG).show();
break;
}
return true;
}
- 方法二
重寫onCreateOptionsMenu(Menu menu)谈火,通過toolbar.setOnMenuItemClickListener()監(jiān)聽
mTbMain.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_item_share:
Toast.makeText(MainActivity.this, "分享", Toast.LENGTH_LONG).show();
break;
?
case R.id.menu_item_about:
Toast.makeText(MainActivity.this, "關(guān)于", Toast.LENGTH_LONG).show();
break;
?
case R.id.menu_item_more:
Toast.makeText(MainActivity.this, "更多", Toast.LENGTH_LONG).show();
break;
}
return true;
}
});
跟 NavigationIcon 監(jiān)聽事件一樣侈询,都是要設(shè)置在 setSupportActionBar 之后才會生效。
效果圖
參考
Android開發(fā):最詳細(xì)的 Toolbar 開發(fā)實踐總結(jié)
ToolBar的使用