Android 3.0 推出了ActionBar來(lái)作為導(dǎo)航控件谍夭, Android 5.0 之后Google開(kāi)始大力推廣 Material Design風(fēng)格的界面物喷,而Toolbar就是Material Design風(fēng)格的導(dǎo)航欄诉位,用來(lái)取代過(guò)去的ActionBar贸宏,在 Material Design中也對(duì)之做了名稱的定義:App bar拳昌,相對(duì)于ActionBar荐吉,Toolbar更加靈活.
官方文檔
官方教程
一、Toolbar的簡(jiǎn)單使用
為了兼容低版本蝗拿,Toolbar是放在support.v7包中的晾捏,使用前添加依賴:
compile 'com.android.support:appcompat-v7:25.3.1'
1、隱藏ActionBar
使用Toolbar前我們需要隱藏原來(lái)的ActionBar.
(1)哀托、我們可以通過(guò)修改theme來(lái)隱藏ActionBar.
使用Theme.AppCompat.Light.NoActionBar:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
或者這樣:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
(2)惦辛、也可以在代碼中隱藏ActionBar
if (getSupportActionBar()!=null) {
getSupportActionBar().hide();
}
2、簡(jiǎn)單使用
布局文件中:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
java代碼中:
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);
}
}
效果圖:
默認(rèn)的title使用的是app_name.
二仓手、Toolbar的常用屬性和方法
1胖齐、設(shè)置背景
android:background=" "
setBackgroundResource()
setBackgroundColor()
setBackground() API>=16
setBackgroundDrawable() 已廢棄
2、主標(biāo)題title
app:title=" " 內(nèi)容
app:titleTextColor=" " 文字顏色
app:titleTextAppearance=" " 設(shè)置title樣式(字體大小嗽冒、顏色......)
Title的外邊距
app:titleMargin=""
app:titleMarginTop=""
app:titleMarginBottom=""
app:titleMarginStart=""
app:titleMarginEnd=""
setTitle()
setTitleTextColor()
setTitleTextAppearance()
setTitleMargin()
setTitleMarginTop()
setTitleMarginBottom()
setTitleMarginStart()
setTitleMarginEnd()
3呀伙、副標(biāo)題subtitle
app:subtitle="" 內(nèi)容
app:subtitleTextColor="" 文字顏色
app:subtitleTextAppearance="" 設(shè)置subtitle樣式(字體大小、顏色......)
setSubtitle()
setSubtitleTextColor()
setSubtitleTextAppearance()
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:title="Toolbar"
app:titleTextColor="@android:color/white"
app:subtitle="副標(biāo)題"
app:subtitleTextColor="@android:color/white"
app:subtitleTextAppearance="@style/MySubTitleStyle"
/>
</LinearLayout>
res/values/styles.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<!--SubTitle樣式-->
<style name="MySubTitleStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">10sp</item>
</style>
</resources>
效果圖
4辛慰、logo区匠、navigationIcon
app:logo="" 設(shè)置logo圖片
app:navigationIcon="" 設(shè)置navigationIcon圖片
setLogo()
setNavigationIcon()
setNavigationOnClickListener() navigationIcon的點(diǎn)擊事件
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:title="Toolbar"
app:titleTextColor="@android:color/white"
app:titleMarginStart="20dp"
app:subtitle="副標(biāo)題"
app:subtitleTextColor="@android:color/white"
app:subtitleTextAppearance="@style/MySubTitleStyle"
app:logo="@mipmap/logo"
app:navigationIcon="@mipmap/navigation_icon"
/>
</LinearLayout>
MainActivity.java
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);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"NavigationIcon",Toast.LENGTH_SHORT).show();
}
});
}
}
效果圖
根據(jù)這兩個(gè)屬性的名字就可以知道是用來(lái)干什么的了,logo一般是app的圖標(biāo)帅腌,navigationIcon一般是用來(lái)開(kāi)啟側(cè)邊欄的.
5驰弄、Action Menu
(1)定義
像ActionBar一樣,在menu中聲明速客,然后復(fù)寫(xiě)onCreateOptionsMenu和onOptionsItemSelected方法來(lái)顯示和處理點(diǎn)擊事件.
res/menu/my_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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item
android:id="@+id/menu_item1"
android:icon="@mipmap/star"
android:orderInCategory="70"
android:title="收藏"
app:showAsAction="always" />
<item
android:id="@+id/menu_item2"
android:icon="@mipmap/share"
android:orderInCategory="80"
android:title="分享"
app:showAsAction="never" />
<item
android:id="@+id/menu_item3"
android:orderInCategory="100"
android:title="設(shè)置"
android:icon="@mipmap/edit"
app:showAsAction="never" />
</menu>
orderInCategory是決定menu item順序的.
showAsAction是決定menu item展示地點(diǎn)的戚篙,分為下面幾個(gè)值:
ifRoom 有空間則放置在導(dǎo)航欄上,否則放置到溢出菜單中
always 總是放置在導(dǎo)航欄上
never 總是放置在溢出菜單中
MainActivity中:
/**
* 初始化菜單
* @param menu 要顯示的Menu
* @return 返回true顯示該menu,false 則不顯示
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.my_menu, menu);
return true;
}
/**
* menu item點(diǎn)擊事件
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_item1:
Toast.makeText(MainActivity.this, "menu_item1", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_item2:
// ...
break;
case R.id.menu_item3:
// ...
break;
}
return super.onOptionsItemSelected(item);
}
也可以直接通過(guò)Toolbar來(lái)顯示menu和處理menu item的點(diǎn)擊事件
// setSupportActionBar(mToolbar); 此時(shí)就不要把Toolbar當(dāng)做ActionBar使用了
mToolbar.inflateMenu(R.menu.my_menu);
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_item1:
Toast.makeText(MainActivity.this, "menu_item1", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_item2:
// ...
break;
case R.id.menu_item3:
// ...
break;
}
return true;
}
});
效果圖:
(2)修改溢出菜單樣式
通過(guò)屬性
app:popupTheme=""
或者方法
setPopupTheme()
res/styles.xml中
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!--溢出菜單圖標(biāo)顏色-->
<item name="android:textColorSecondary">#ffffff</item>
</style>
<!--SubTitle樣式-->
<style name="MySubTitleStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">10sp</item>
</style>
<!--☆☆☆☆☆☆☆☆ 溢出菜單樣式 ☆☆☆☆☆☆☆☆-->
<style name="MyPopupTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColor">@android:color/white</item>
<item name="android:textSize">12sp</item>
<item name="android:colorBackground">@android:color/black</item>
<item name="overlapAnchor">false</item>
<!--overlapAnchor是讓溢出菜單不要蓋住ToolBar-->
</style>
</resources>
然后引用該樣式app:popupTheme="@style/MyPopupTheme"
效果圖
(3)修改溢出菜單圖標(biāo)
mToolbar.setOverflowIcon(getResources().getDrawable(R.mipmap.a));
(4)隱藏部分menu item
/**
* 在onCreateOptionsMenu執(zhí)行后溺职,菜單被顯示前調(diào)用
* @param menu 要顯示的Menu
* @return 返回true顯示該menu,false則不顯示
* 可以在此方法中動(dòng)態(tài)改變菜單的狀態(tài)岔擂,比如隱藏某些menu item等
*/
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
//menu.findItem(R.id.menu_item1).setVisible(false);
menu.findItem(R.id.menu_item2).setVisible(false);
//menu.findItem(R.id.menu_item3).setVisible(false);
return super.onPrepareOptionsMenu(menu);
}
6位喂、添加子View
(1)因?yàn)門(mén)oolbar其是就是一個(gè)ViewGroup,所以可以添加子View
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:title="Toolbar"
app:titleTextColor="@android:color/white"
app:titleMarginStart="20dp"
app:subtitle="副標(biāo)題"
app:subtitleTextColor="@android:color/white"
app:subtitleTextAppearance="@style/MySubTitleStyle"
app:logo="@mipmap/logo"
app:navigationIcon="@mipmap/navigation_icon">
<TextView
android:id="@+id/tv"
android:text="子View"
android:textColor="@android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
對(duì)應(yīng)方法:
addView()
(2)子View點(diǎn)擊事件
mToolbar.findViewById(R.id.tv).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// do something
}
});
三乱灵、總結(jié)
Toolbar的使用還是比較簡(jiǎn)單的塑崖,實(shí)際使用時(shí),可以單獨(dú)為T(mén)oolbar寫(xiě)一個(gè)布局文件痛倚,然后在要使用的地方include就可以了规婆,免得重復(fù)寫(xiě)很多次.