原文位址聲明: https://blog.csdn.net/qq_23179075/article/details/52475291
使用 Navigation+Drawerlayout+Toolbar
實作簡單側滑菜單
Navigation+Drawerlayout+Toolbar
使用
Tablayout
,首先需要在項目中加入
Design
包
dependencies {
compile 'com.android.support:design:24.1.1'
}
因為要用到
Toolbar
是以首先把主題改為沒有
ActionBar
的主題
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
</resources>
從上面的效果圖可以看出,側滑部分由兩部分組成: 上面的頭像部分和下面的導航菜單部分,這兩個部分分别對應一個Lyout布局檔案, 和一個菜單
menu
檔案。
header.xml
<?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="160dp"
android:orientation="vertical"
android:gravity="center"
android:background="@drawable/header_bg">
<ImageView
android:layout_width="72dp"
android:layout_height="72dp"
android:src="@mipmap/header"/>
<TextView
android:layout_marginTop="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18dp"
android:textColor="#FFF"
android:text="印象丶亮仔"/>
</LinearLayout>
在res/下建立一個
menu
目錄然後再建立
menu/navigation.xml
navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:id="@+id/group1"
android:checkableBehavior="single">
<item
android:id="@+id/single_1"
android:icon="@mipmap/xiaoxi"
android:title="我的消息" />
<item
android:id="@+id/single_2"
android:icon="@mipmap/shangcheng"
android:title="積分商城" />
<item
android:id="@+id/single_3"
android:icon="@mipmap/huiyuan"
android:title="會員中心" />
<item
android:id="@+id/single_4"
android:icon="@mipmap/zaixian"
android:title="線上聽歌" />
</group>
<item android:title="子菜單">
<menu>
<item
android:id="@+id/item_1"
android:icon="@mipmap/shiqu"
android:title="聽歌識曲" />
<item
android:id="@+id/item_2"
android:icon="@mipmap/pifu"
android:title="主題皮膚" />
<item
android:id="@+id/item_3"
android:icon="@mipmap/yejian"
android:title="夜間模式" />
<item
android:id="@+id/item_4"
android:icon="@mipmap/dingshi"
android:title="定時停止播放" />
<item
android:id="@+id/item_5"
android:icon="@mipmap/naozhong"
android:title="音樂鬧鐘" />
<item
android:id="@+id/item_6"
android:icon="@mipmap/yun"
android:title="我的音樂雲盤" />
<item
android:id="@+id/item_7"
android:icon="@mipmap/shiqu"
android:title="聽歌識曲" />
<item
android:id="@+id/item_8"
android:icon="@mipmap/pifu"
android:title="主題皮膚" />
<item
android:id="@+id/item_9"
android:icon="@mipmap/yejian"
android:title="夜間模式" />
<item
android:id="@+id/item_10"
android:icon="@mipmap/dingshi"
android:title="定時停止播放" />
<item
android:id="@+id/item_11"
android:icon="@mipmap/naozhong"
android:title="音樂鬧鐘" />
<item
android:id="@+id/item_12"
android:icon="@mipmap/yun"
android:title="我的音樂雲盤" />
</menu>
</item>
</menu>
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="zhengliang.com.navigationview.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@color/colorPrimary"
app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="240dp"
android:layout_height="match_parent"
app:menu="@menu/navigation"
app:itemIconTint="@color/colorAccent"
android:layout_gravity="start"
app:headerLayout="@layout/header">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
navigation
中的菜單可以用
<group>
來進行分組,分組之間會有一條分割線。
<group>
添加如下屬性,選中的菜單會有一個選中效果。
<group>
android:checkableBehavior="single"
當需要嵌套多個子菜單時,可以在
item
嵌套
menu
比如上面的布局檔案中的代碼 最後的效果
MainActivity.java
public class MainActivity extends AppCompatActivity{
private android.support.v7.widget.Toolbar toolbar;
private android.support.design.widget.NavigationView navigationview;
private android.support.v4.widget.DrawerLayout drawerlayout;
/*建立一個Drawerlayout和Toolbar關聯的開關*/
private ActionBarDrawerToggle toggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/*初始化View*/
initViews();
/*隐藏滑動條*/
hideScrollBar();
/*設定ActionBar*/
setActionBar();
/*設定Drawerlayout開關*/
setDrawerToggle();
/*設定監聽器*/
setListener();
}
/*初始化View*/
private void initViews() {
this.drawerlayout = (DrawerLayout) findViewById(R.id.drawer_layout);
this.navigationview = (NavigationView) findViewById(R.id.navigation_view);
this.toolbar = (Toolbar) findViewById(R.id.toolbar);
}
/*去掉navigation中的滑動條*/
private void hideScrollBar() {
navigationview.getChildAt(0).setVerticalScrollBarEnabled(false);
}
/*設定ActionBar*/
private void setActionBar() {
setSupportActionBar(toolbar);
/*顯示Home圖示*/
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
/*設定Drawerlayout的開關,并且和Home圖示關聯*/
private void setDrawerToggle() {
toggle = new ActionBarDrawerToggle(this, drawerlayout, toolbar, 0, 0);
drawerlayout.addDrawerListener(toggle);
/*同步drawerlayout的狀态*/
toggle.syncState();
}
/*設定監聽器*/
private void setListener() {
navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.item_1:
break;
case R.id.item_2:
break;
case R.id.item_3:
break;
case R.id.item_4:
finish();
break;
}
drawerlayout.closeDrawer(GravityCompat.START);
return true;
}
});
}
}
注意:在給
drawerlayout
添加
toggle
開關監聽時一定要先設定
ActionBar
是以
drawerlayout.addDrawerListener(toggle)
一定要寫在
setSupportActionBar(toolbar)
前。不然當點選
Toolbar
上的Home 圖示不會産生相應的打開和關閉側滑事件。
其它屬性說明
對圖示進行着色
app:itemIconTint="@color/colorAccent"
去除滾動條條