最近因為項目需求需要實現(xiàn)側滑功能骚勘,一開始決定使用SlideMenu的,可是研究Material Design時發(fā)現(xiàn)了谷歌自身推出了DrawerLayout撮奏,所以決定使用谷歌的東西來實現(xiàn)俏讹。
一、側滑菜單在Toolbar下方情況
首先看下效果圖是不是你所需要的畜吊,如下圖:
1藐石、首先需要添加v7包的依賴
dependencies {
...//其他代碼
compile 'com.android.support:appcompat-v7:23.3.0'
}
2、創(chuàng)建一個toolbar.xml作為布局文件toolbar繼承自View定拟,因此可以像其他標準控件一樣直接早主布局文件中添加Toolbar于微,但是為了提高Toolbar的重用效率逗嫡,可以在layout中創(chuàng)建一個custom_toolbar.xml代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:orientation="vertical"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>
3、創(chuàng)建DrawerLayout布局文件
在主布局中添加drawerlayout和toolbar,代碼如下:
<?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">
<include layout="@layout/custom_toolbar"/>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 內(nèi)容部分 -->
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- 左側側滑部分 -->
<ListView
android:id="@+id/leftListView"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/colorPrimary"/>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
DrawerLayout標簽中有兩個子控件株依,一個是左邊側滑菜單View,一個是主界面驱证。另外需要在左邊菜單起始位置設置為android:layout_gravity="start"。如果你設置了右側側滑菜單恋腕,也需要添加android:layout_gravity="end"抹锄。
3、你可能對toolbar里面的返回按鈕很感興趣荠藤,切換效果特絢伙单。客官哈肖、別急吻育,容我來告訴你是個啥。這同樣是design里面的一個類ActionBarDrawerToggle淤井。只需要你配置了你就能體驗它的炫麗布疼。不了解的直接查看官方文檔(請自備梯子)。使用方法我們在代碼中為你講述币狠。這里我們來設置該返回鍵的樣式游两,谷歌為我們提供了幾種樣式。
<resources>
<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> <item name="android:textColorPrimary">@android:color/white</item>
<!-- 返回鍵樣式 -->
<item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
</style>
<style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
<item name="color">@android:color/white</item>
</style>
</resources>
4漩绵、源代碼
public class MainActivity extends AppCompatActivity {
@Bind(R.id.content)
FrameLayout mContent;
@Bind(R.id.leftListView)
ListView mLeftListView;
@Bind(R.id.drawerLayout)
DrawerLayout mDrawerLayout;
@Bind(R.id.toolbar)
Toolbar mToolbar;
private ActionBarDrawerToggle mDrawerToggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
mToolbar.setTitle("測試");
setSupportActionBar(mToolbar);
getSupportActionBar().setHomeButtonEnabled(true);
//設置返回鍵可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//創(chuàng)建返回鍵贱案,并實現(xiàn)打開關/閉監(jiān)聽
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close){
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
mDrawerToggle.syncState();
//將DrawerLayout與DrawerToggle綁定
mDrawerLayout.addDrawerListener(mDrawerToggle);
mDrawerLayout.setScrimColor(Color.TRANSPARENT);
//去除側邊陰影
String[] aee = {"測試1", "測試2"};
ArrayAdapter arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, aee);
mLeftListView.setAdapter(arrayAdapter);
}
}
代碼中我添加了setScrimColor方法,這個方法是修改側滑菜單滑出時背景顏色止吐。
二轰坊、側滑菜單遮蓋Toolbar情況
效果圖如下:
側滑菜單遮蓋toolbar。其實只需要修改主布局文件就可以實現(xiàn)祟印。drawerlayout作為根布局標簽就OK,代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--內(nèi)容+toolbar-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/custom_toolbar"/>
<!-- 內(nèi)容部分 -->
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<!-- 左側側滑部分 -->
<ListView
android:id="@+id/leftListView"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/colorPrimary"
android:clickable="true"/>
</android.support.v4.widget.DrawerLayout>
注意:在側滑布局上必須要加上android:clickable="true"粟害,不然側滑菜單將無法使用蕴忆。
如有問題歡迎留言。
源碼下載