Toolbar 是 Android 5.0 推出的一個(gè) Material Design 風(fēng)格的導(dǎo)航控件 ,用來(lái)取代之前的 Actionbar 。與 Actionbar 相比,Toolbar 明顯要靈活的多。它不像 Actionbar 一樣潜沦,一定要固定在Activity的頂部鸵熟,而是可以放到界面的任意位置。
開(kāi)始使用
1煮寡、首先就是在布局文件中使用虹蓄,很簡(jiǎn)單,就跟平承宜海控件一樣用就可以薇组!?
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
? ? <android.support.v7.widget.Toolbar
android:background="@color/app_bg"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
? ? </android.support.v7.widget.Toolbar>
</RelativeLayout>
2、由于我們?cè)诖a用是以setSupportActionBar(toolbar)的方式去使用toolbar的杈帐,一也就是代替actionbar体箕,那么我們就需要把a(bǔ)ctionbar去掉,一山不容二虎L敉@矍Α!去掉actionbar要自定義下主題站叼,自定義一個(gè)Base.AppTheme樣式?
<resources>
? ? <style name="Base.AppTheme" parent="Theme.AppCompat">
? ? ? ? <!--去掉原來(lái)的ActionBar-->
? ? ? ? <item name="windowActionBar">false</item>
? ? ? ? <item name="android:windowNoTitle">true</item>
? ? ? ? <!-- API Level 22 編譯要去點(diǎn)android -->
? ? ? ? <item name="windowNoTitle">true</item>
? ? ? ? <!-- Actionbar color -->
? ? ? ? <item name="colorPrimary">@color/material_deep_teal_500</item>
? ? ? ? <!--Status bar color-->
? ? ? ? <item name="colorPrimaryDark">@color/material_deep_teal_500</item>
? ? ? ? <!--Window color-->
? ? ? ? <item name="android:windowBackground">@color/dim_foreground_material_dark</item>
? ? </style>
? ? <!-- Base application theme. -->
? ? <style name="AppTheme" parent="Base.AppTheme">
? ? <!-- 這個(gè)屬性之所以注釋掉是因?yàn)樗荒茉?.0之后使用娃兽,所以一定要定義它的話需要在/res/valuse-v21/sytles.xml中進(jìn)行定義 -->
? ? <!-- <item name="android:navigationBarColor">@color/accent_material_light</item> -->
? ? </style>
</resources>
至此,我們的toobar已經(jīng)可以正常顯示出來(lái)了尽楔,不過(guò)先不急投储,我們先設(shè)置一些標(biāo)題、logo阔馋、之類(lèi)的東西再看效果玛荞,不過(guò)先看看google提供的圖也可以的:?
代碼中對(duì)toolbar最基本的設(shè)置:
publicclassMainActivityextendsAppCompatActivity{
@Override
protectedvoidonCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
? ? ? ? setContentView(R.layout.activity_main);
? ? ? ? Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// Logo
? ? ? ? toolbar.setLogo(R.mipmap.push_4);
// 主標(biāo)題
toolbar.setTitle("Title");
// 副標(biāo)題
toolbar.setSubtitle("Sub Title");
//設(shè)置toolbar
? ? ? ? setSupportActionBar(toolbar);
//左邊的小箭頭(注意需要在setSupportActionBar(toolbar)之后才有效果)
? ? ? ? toolbar.setNavigationIcon(R.mipmap.back);
//菜單點(diǎn)擊事件(注意需要在setSupportActionBar(toolbar)之后才有效果)
? ? ? ? toolbar.setOnMenuItemClickListener(onMenuItemClick);
? ? }
}
經(jīng)過(guò)初步設(shè)計(jì)后,我們就可以看看最原始的效果了E磺蕖勋眯!
三、菜單部分
看了效果圖下梢,結(jié)合代碼其它的不難理解 客蹋,下面就著重說(shuō)一下菜單那部分的實(shí)現(xiàn) ,也就后面的三個(gè)點(diǎn)點(diǎn)點(diǎn)
1孽江、首先我們要為toolbar綁定一個(gè)菜單讶坯,如下:
@Override
publicbooleanonCreateOptionsMenu(Menu menu){
// 綁定toobar跟menu
? ? getMenuInflater().inflate(R.menu.menu_main, menu);
returntrue;
}
2、其中R.menu.menu_main是我們創(chuàng)建的一個(gè)菜單文件岗屏,代碼如下:?
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
? ? <item
android:id="@+id/action_edit"
android:icon="@mipmap/push_3"
android:orderInCategory="80"
android:title="@string/action_edit"
app:showAsAction="never"/>
? ? <item
android:id="@+id/action_share"
android:icon="@mipmap/push_3"
android:orderInCategory="90"
android:title="@string/action_edit"
app:showAsAction="never"/>
? ? <item
android:id="@+id/action_settings"
android:icon="@mipmap/push_3"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never"/>
</menu>
下面解析下菜單項(xiàng)的幾個(gè)屬性:
android:icon:這個(gè)屬性是指定每個(gè)菜單項(xiàng)左邊的圖標(biāo)的
android:id:菜單項(xiàng)的唯一標(biāo)識(shí)
android:orderInCategory:菜單項(xiàng)的優(yōu)先級(jí)辆琅,也就是順序,只能設(shè)置大于正整數(shù)这刷,數(shù)值越大菜單項(xiàng)越靠前
android:title:菜單描述婉烟,也就是菜單文字
app:showAsAction:這個(gè)是控制菜單項(xiàng)的顯示的
其中app:showAsAction這個(gè)屬性是比較有意思的我們一個(gè)個(gè)看看他的值都表示什么!
always:設(shè)置這個(gè)值會(huì)讓所有菜單項(xiàng)都會(huì)顯示在toolbar上
ifRoom:設(shè)置這個(gè)值之后崭歧,如果toolbar上還有空間的話就會(huì)顯示優(yōu)先級(jí)高的菜單項(xiàng)在toolbar上,剩下的才顯示在彈出的列表中
never:永遠(yuǎn)不會(huì)顯示在Toolbar上撞牢,只會(huì)在溢出列表中出現(xiàn)
withText:這個(gè)屬性我看了下效果是跟never一個(gè)樣不知道是不是我哪里沒(méi)設(shè)置對(duì)B誓搿J逵!
collapseActionView:這個(gè)屬性通俗的說(shuō)就是聲明某一個(gè)菜單項(xiàng)單獨(dú)顯示在toolbar上所宰,而不是顯示在打開(kāi)的菜單中绒尊,一般配合ifRoom使用,如下:
3仔粥、還有個(gè)小問(wèn)題婴谱,就是正常的設(shè)置完之后菜單item圖標(biāo)是不會(huì)顯示的,我們需要重寫(xiě)onPrepareOptionsPanel(View view, Menu menu)方法躯泰,這樣才能正常顯示圖標(biāo)谭羔,代碼如下:
@Override
protectedbooleanonPrepareOptionsPanel(View view, Menu menu){
if(menu !=null) {
if(menu.getClass() == MenuBuilder.class) {
try{
Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu,true);
}catch(Exception e) {
? ? ? ? ? ? ? ? e.printStackTrace();
? ? ? ? ? ? }
? ? ? ? }
? ? }
returnsuper.onPrepareOptionsPanel(view, menu);
}
4、設(shè)置菜單的點(diǎn)擊事件麦向,前面我們已經(jīng)看到了toolbar.setOnMenuItemClickListener(onMenuItemClick);這句代碼瘟裸,那么onMenuItemClick的實(shí)現(xiàn)如下:?
privateToolbar.OnMenuItemClickListener onMenuItemClick =newToolbar.OnMenuItemClickListener() {
@Override
publicbooleanonMenuItemClick(MenuItem menuItem){
String msg ="";
switch(menuItem.getItemId()) {
caseR.id.action_edit:
msg +="Click edit";
break;
caseR.id.action_share:
msg +="Click share";
break;
caseR.id.action_settings:
msg +="Click setting";
break;
? ? ? ? }
if(!msg.equals("")) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
? ? ? ? }
returntrue;
? ? }
};
5、這樣诵竭,菜單的基本功能就實(shí)現(xiàn)了话告,雖然大家都說(shuō)程序員的審美觀都不是很好(說(shuō)這話的站出來(lái),保證不打死你卵慰,沙郭,)大家有木有覺(jué)得黑乎乎的很難看?并且位置把toolbar都擋住了裳朋,對(duì)于有強(qiáng)迫癥的我來(lái)說(shuō)使無(wú)法容忍的病线,那么我們就修整一下吧!?
其實(shí)我們可以通過(guò)toobar的app:popupTheme="@style/menu_bg"屬性來(lái)指定一個(gè)自定義的樣式再扭,而那么這個(gè)樣式具體能定義寫(xiě)什么呢氧苍,我們?cè)敿?xì)看看:?
<!--自定義toolbar菜單樣式-->
false
? ? <!-- 彈出層背景顏色 -->
@color/material_deep_teal_500
? ? <!-- 彈出層垂直方向上的偏移,負(fù)值會(huì)覆蓋toolbar -->
5dp
? ? <!-- 彈出層水平方向上的偏移泛范,即距離屏幕左邊的距離让虐,負(fù)值會(huì)導(dǎo)致右邊出現(xiàn)空隙 -->
-2dp
? ? <!--文字顏色-->
@color/toolbar_meun
</style>
定義好樣式后需要在app的主題中引用該樣式,才能改變溢出框內(nèi)的文字顏色罢荡,如下:?
<!-- Base application theme. -->
? ? <!--指定toolbar彈出菜單樣式-->
@style/toolbarMenuStyle
</style>
最后在toolbar中引用:
<android.support.v7.widget.Toolbar
android:background="@color/material_deep_teal_500"
android:id="@+id/toolbar"
android:layout_width="match_parent"
app:popupTheme="@style/toolbarMenuStyle"
android:layout_height="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
ok赡突,至此我們對(duì)toolbar溢出框的調(diào)整已經(jīng)初步完成,看看效果如何:
四区赵、優(yōu)化
????????到了這里惭缰,我們已經(jīng)能簡(jiǎn)單的使用ToolBar了,那么需求隨時(shí)都會(huì)改變的笼才,比如說(shuō)有的人就不需要logo漱受、也不需要主標(biāo)題副標(biāo)題等,他就要在toolbar上加個(gè)搜索框骡送!或者是要只要主標(biāo)題昂羡,并且主標(biāo)題要居中顯示絮记,那也只能做咯,畢竟產(chǎn)品經(jīng)常被砍也不是沒(méi)有原因的虐先!
如果你有過(guò)這樣的需求怨愤,你會(huì)發(fā)現(xiàn)原生的ToolBar的主標(biāo)題是沒(méi)法居中顯示的,所以我們需要將主標(biāo)題設(shè)置為空蛹批,然后自己寫(xiě)一個(gè)標(biāo)題到ToolBar中撰洗,然后設(shè)置居中顯示:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
? ? <android.support.v7.widget.Toolbar
android:background="@color/material_deep_teal_500"
android:id="@+id/toolbar"
android:layout_width="match_parent"
app:popupTheme="@style/toolbarMenuStyle"
android:layout_height="?attr/actionBarSize">
? ? ? ? <TextView
android:layout_gravity="center"
android:textColor="@color/toolbar_meun"
android:textSize="24sp"
android:text="ToolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
? ? </android.support.v7.widget.Toolbar>
</RelativeLayout>
注意,需要在代碼中對(duì)主標(biāo)題設(shè)置為空字符串腐芍,否則會(huì)出現(xiàn)默認(rèn)的主標(biāo)題:?
// 主標(biāo)題
toolbar.setTitle("");
五差导、側(cè)滑菜單
????????經(jīng)過(guò)上面的介紹,其實(shí)已經(jīng)能夠使用Toolbar做挺多事情了甸赃,那么下面利用ToolBar配合DrawerLyout快速實(shí)現(xiàn)一個(gè)側(cè)滑菜單看看柿汛!
1、布局文件實(shí)現(xiàn)埠对,這里我寫(xiě)得比較亂络断,又有點(diǎn)偷懶不想改了,還是比較建議多使用include的方式的!
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/dl_left"
android:layout_width="match_parent"
android:layout_height="match_parent">
? ? <!--主布局代碼-->
? ? <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
? ? ? ? <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/material_deep_teal_500"
app:popupTheme="@style/toolbarMenuStyle">
? ? ? ? ? ? <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="ToolBar"
android:textColor="@color/toolbar_meun"
android:textSize="24sp"/>
? ? ? ? </android.support.v7.widget.Toolbar>
? ? </LinearLayout>
? ? <!--側(cè)滑欄布局-->
? ? <LinearLayout
android:background="@color/material_deep_teal_500"
android:layout_width="match_parent"
android:layout_gravity="start"
android:orientation="vertical"
android:layout_height="match_parent">
? ? ? ? <ImageView
android:layout_width="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/aa"
android:layout_height="150dp"/>
? ? ? ? <LinearLayout
android:gravity="center"
android:background="@color/window_bg"
android:layout_width="match_parent"
android:layout_height="match_parent">
? ? ? ? ? ? <TextView
android:text="菜單項(xiàng)"
android:layout_width="wrap_content"
android:textColor="#333"
android:textSize="24dp"
android:layout_height="wrap_content"/>
? ? ? ? </LinearLayout>
? ? </LinearLayout>
</android.support.v4.widget.DrawerLayout>
這里一定要注意android:layout_gravity="start"屬性的設(shè)置项玛!
下面是整個(gè)java類(lèi)的完整代碼
publicclassMainActivityextendsAppCompatActivity{
privateDrawerLayout? ? ? ? ? mDrawerLayout;
privateActionBarDrawerToggle mDrawerToggle;
privateToolbar mToolbar;
@Override
protectedvoidonCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
? ? ? ? setContentView(R.layout.activity_main);
? ? ? ? mToolbar = (Toolbar) findViewById(toolbar);
? ? ? ? mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_left);
// Logo
//toolbar.setLogo(R.mipmap.ic_launcher);
// 主標(biāo)題
mToolbar.setTitle("");
// 副標(biāo)題
//toolbar.setSubtitle("Sub Title");
//設(shè)置toolbar
? ? ? ? setSupportActionBar(mToolbar);
//左邊的小箭頭(注意需要在setSupportActionBar(toolbar)之后才有效果)
? ? ? ? mToolbar.setNavigationIcon(R.mipmap.store_home_tab_index_pre);
//菜單點(diǎn)擊事件(注意需要在setSupportActionBar(toolbar)之后才有效果)
? ? ? ? mToolbar.setOnMenuItemClickListener(onMenuItemClick);
//創(chuàng)建返回鍵貌笨,并實(shí)現(xiàn)打開(kāi)關(guān)/閉監(jiān)聽(tīng)
mDrawerToggle =newActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close) {
@Override
publicvoidonDrawerOpened(View drawerView){
super.onDrawerOpened(drawerView);
//側(cè)滑欄打開(kāi)
? ? ? ? ? ? }
@Override
publicvoidonDrawerClosed(View drawerView){
super.onDrawerClosed(drawerView);
//側(cè)滑欄關(guān)閉
? ? ? ? ? ? }
? ? ? ? };
//mDrawerToggle.syncState();此處注釋掉是為了不使用默認(rèn)的開(kāi)關(guān)箭頭
//設(shè)置偵聽(tīng)
? ? ? ? mDrawerLayout.addDrawerListener(mDrawerToggle);
? ? }
privateToolbar.OnMenuItemClickListener onMenuItemClick =newToolbar.OnMenuItemClickListener() {
@Override
publicbooleanonMenuItemClick(MenuItem menuItem){
String msg ="";
switch(menuItem.getItemId()) {
caseR.id.action_edit:
msg +="Click edit";
break;
caseR.id.action_share:
msg +="Click share";
break;
caseR.id.action_settings:
msg +="Click setting";
break;
? ? ? ? ? ? }
if(!msg.equals("")) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
? ? ? ? ? ? }
returntrue;
? ? ? ? }
? ? };
@Override
publicbooleanonCreateOptionsMenu(Menu menu){
// 綁定toobar跟menu
? ? ? ? getMenuInflater().inflate(R.menu.menu_main, menu);
returntrue;
? ? }
@Override
protectedbooleanonPrepareOptionsPanel(View view, Menu menu){
if(menu !=null) {
if(menu.getClass() == MenuBuilder.class) {
try{
Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu,true);
}catch(Exception e) {
? ? ? ? ? ? ? ? ? ? e.printStackTrace();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
returnsuper.onPrepareOptionsPanel(view, menu);
? ? }
}
其中ActionBarDrawerToggle是對(duì)Toolbar上的開(kāi)關(guān)跟側(cè)滑欄進(jìn)行關(guān)聯(lián)的!
到這里襟沮,我們的toolbar跟側(cè)滑都說(shuō)了一些 簡(jiǎn)單的使用锥惋,下面看看側(cè)滑欄的圖:
git地址:https://gitee.com/sddhkhyy/ToolBarDemo.git
本文轉(zhuǎn)載自:https://blog.csdn.net/monalisatearr/article/details/78415585?utm_source=copy?