利用 toolbar + drawerLayout 可以實(shí)現(xiàn)點(diǎn)擊標(biāo)題欄右上角按鈕彈出側(cè)滑菜單的功能崖瞭，例如 網(wǎng)易云音樂 或者 Google Play
1. toolbar 的設(shè)置
-
打開 res/value/styls.xml 文件栽烂，創(chuàng)建另一套 style 屬性
<style name="AppTheme.base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="colorPrimaryDark">#ff0000</item>
<item name="colorPrimary">#ff0000</item>
<item name="android:windowBackground">@color/colorPrimaryDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowNoTitle">true</item>
</style>
布局顏色.png
-
在 activity_main 中添加 Toolbar
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
設(shè)置 background 后才可以使 Toolbar 使用我們定義的顏色設(shè)置
-
在 MainActivity 中聲明 Toolbar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
-
設(shè)置 Toolbar 中的控件
toolbar.setTitle("Test Title");
toolbar.setSubtitle("This is substitle");
//toolbar.setLogo(R.drawable.ic_launcher); 可以在 Navigation后 設(shè)置一個(gè) logo
toolbar.setSubtitleTextColor(getResources().getColor(R.color.colorGray)); //設(shè)置二級(jí)標(biāo)題的顏色
toolbar.setTitleTextColor(getResources().getColor(R.color.colorBlack)); //設(shè)置標(biāo)題的顏色
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.menu_24); //setNavigationIcon 需要放在 setSupportActionBar 之后才會(huì)生效驱证。
Toolbar 中的控件
-
設(shè)置上一步中的 onCreateOptionsMenu
- 先在 res/menu/ 下創(chuàng)建一個(gè) 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/tooLbar_menu"
android:icon="@drawable/search_24"
app:showAsAction="always"
android:title="搜索">
</item>
</menu>
- 然后在 MainActivity 中通過(guò) onCreateOptionsMenu 方法填充進(jìn)去創(chuàng)建的布局文件
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_menu,menu);
return true;
}
- 給該按鈕添加點(diǎn)擊事件 （需要設(shè)置在 setSupportActionBar 之后才有作用延窜。）
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
String msg = "";
switch (item.getItemId()) {
case R.id.tooLbar_menu:
msg += "Hello World!!!!!!!!!!!!";
break;
default:
break;
}
if(!msg.equals("")){
Toast.makeText(MainActivity.this,msg,Toast.LENGTH_SHORT).show();
}
return true;
}
});
-
設(shè)置 Toolbar 的小缺點(diǎn)
小缺點(diǎn)布局
- 首先修改 toolbar_menu.xml 的內(nèi)容
<?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/tooLbar_menu"
android:icon="@drawable/search_24"
android:title="搜索"
app:showAsAction="always"/>
<item
android:id="@+id/itema"
android:title="item1"
app:showAsAction="never" /> //設(shè)置成 never 會(huì)自動(dòng)在 Toolbar 的右側(cè)生成一個(gè)小缺點(diǎn)圖標(biāo)
<item
android:id="@+id/itemb"
android:title="item1"
android:orderInCategory="100"
app:showAsAction="never" />
<item
android:id="@+id/itemc"
android:title="item1"
android:orderInCategory="200"
app:showAsAction="never" />
</menu>
但自動(dòng)生成的缺點(diǎn)圖標(biāo)是官方自帶的小黑點(diǎn)，需要在另外一些設(shè)置 (有兩種方法)：
方法一：
- 在 styles.xml 下創(chuàng)建一個(gè) toolbar_style
<style name="toolbar_style" parent="AppTheme.base">
<item name="actionOverflowButtonStyle">@style/ActionButton.Overflow</item>
</style>
<style name="ActionButton.Overflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
<item name="android:src">@drawable/setting_poing_white_24</item>
</style>
```language
- 在 Toolbar 的設(shè)置中添加 Theme
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/toolbar_style"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
方法二：
在 Toolbar 中直接添加 popupTheme
app:popupTheme="@drawable/setting_poing_white_24"
2. 設(shè)置 DrawerLayout
-
在 build.gradle 中添加 compile 'com.android.support:design:25.3.1' 并 Sync now
-
設(shè)置布局
- 在 activity_main.xml 中創(chuàng)建一個(gè) DrawerLayout 布局
<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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.widget.DrawerLayout>
- 在 DrawerLayout 中設(shè)置兩個(gè)布局抹锄，第一個(gè)為主布局逆瑞，第二個(gè)為滑動(dòng)菜單的布局
<?xml version="1.0" encoding="utf-8"?>
<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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.nenguou.learnloading.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbar"
android:text="Hello World!" />
</RelativeLayout>
//NavigationView 是 Google 在 5.0 后退出的菜單欄布局，包括頭部（headerLayout）和菜單 （menu）兩部分
<android.support.design.widget.NavigationView
android:id="@+id/navigationView_test"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start" //設(shè)置菜單的出現(xiàn)位置祈远，start/left 為左呆万，end/right 為右
android:background="?attr/colorPrimary" //設(shè)置菜單的背景顏色，不設(shè)置的話為透明效果
app:headerLayout="@layout/header_layout" //設(shè)置頭部
app:menu="@menu/menu_main" //設(shè)置菜單（菜單中若想出現(xiàn)分割線车份，可以將一組 item 放在一個(gè) group 里谋减，并且每個(gè) group 都有 id）
app:itemIconTint="#FFFFFF" //設(shè)置菜單里圖標(biāo)的統(tǒng)一顏色，另一種顯示圖標(biāo)原始顏色的方法在下文介紹
/>
</android.support.v4.widget.DrawerLayout>
-
給 NavigationView 里的選項(xiàng)設(shè)置點(diǎn)擊事件
- 在MainActivity 中聲明 NavigationView
private NavigationView navigationView;
- 給 NavigationView 里的選項(xiàng)設(shè)置點(diǎn)擊事件
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
String msg = "";
switch (item.getItemId()){
case R.id.item1:
msg += "This is Item1!!!";
drawerLayout.closeDrawers(); //關(guān)閉菜單欄
break;
case R.id.item2:
msg += "This is Item2";
drawerLayout.closeDrawers();
break;
case R.id.item3:
msg += "This is Item3";
drawerLayout.closeDrawers();
break;
case R.id.item4:
msg += "This is Item4";
drawerLayout.closeDrawers();
break;
default:
break;
}
if(!msg.equals("")){
Toast.makeText(MainActivity.this,msg,Toast.LENGTH_SHORT).show();
}
//drawerLayout.closeDrawers(); 任何一個(gè)按鈕被點(diǎn)擊扫沼，都會(huì)通過(guò) closeDrawers 方法關(guān)閉導(dǎo)航欄
return true;
}
});
- 在 Java 代碼里使每個(gè)選項(xiàng)的圖片顯示自己的顏色
navigationView.setItemIconTintList(null);
- 點(diǎn)擊導(dǎo)航按鈕打開側(cè)邊欄
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home:
drawerLayout.openDrawer(GravityCompat.START);
}
return super.onOptionsItemSelected(item);
}
