使用Toolbar + DrawerLayout快速實現高大上菜單側滑
原文地址：《使用Toolbar + DrawerLayout實現高大上菜單側滑》
如果你有在關注一些遵循最新的Material Design設計規范的應用的話（如果沒有，假設你有！），也許會發現有很多使用了看起來很舒服、很高大上的側滑菜單動畫效果，示例如下（via 參考2）：
今天就來使用官方支持庫來快速實現這類效果，需要使用到Toolbar和DrawerLayout，詳細步驟如下：（如果你還不知道這兩個Widget，先自己Google吧~）
1.首先需要添加appcompat-v7支持
如果是在Android Studio 1.0 RC4上創建的項目，默認已經添加了appcompat-v7支持了，如果不是最新版AS則需要在build.gradle中添加如下代碼：
dependencies {
...//其他代碼
compile 'com.android.support:appcompat-v7:21.0.2'
} 添加完成后需要同步一下gradle
2.添加Toolbar
由于Toolbar是繼承自View，所以可以像其他標準控件一樣直接主布局文件添加Toolbar，但是為了提高Toolbar的重用效率，可以在layout創建一個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/tl_custom" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" android:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.ActionBar"> </android.support.v7.widget.Toolbar>
說明：
-
android.support.v7.widget.Toolbar - 當然如果只在Lollipop中可以直接使用Toolbar而不需要加上v7支持
-
xmlns:app - 自定義xml命名控件，在AS中可以直接指定res-auto而不需要使用完整包名
-
android:background 和 android:minHeight 均可以在styles.xml中聲明
2.添加DrawerLayout
和Toolbar類似，為了提高代碼重用效率，可以在layout中創建一個custom_drawerlayout.xml代碼如下:
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" 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"> <ImageView android:id="@+id/iv_main" android:layout_width="100dp" android:layout_height="100dp" /> </LinearLayout> <!--側滑菜單--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff" android:layout_gravity="start"> <ListView android:id="@+id/lv_left_menu" android:layout_width="match_parent" android:layout_height="match_parent" android:divider="@null" android:text="DrawerLayout" /> </LinearLayout> </android.support.v4.widget.DrawerLayout>
Drawerlayout標簽中有兩個子節點，一個是左邊菜單，一個是主布局，另外需要在左邊菜單起始位置設置為android:layout_gravity="start"
3.實現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" android:orientation="vertical" tools:context=".MainActivity"> <!--Toolbar--> <include layout="@layout/custom_toolbar" /> <!--DrawerLayout--> <include layout="@layout/custom_drawerlayout" /> </LinearLayout>
直接使用include標簽，簡潔明了
4.完善Java代碼
public class MainActivity extends ActionBarActivity {
//聲明相關變量
private Toolbar toolbar;
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
private ListView lvLeftMenu;
private String[] lvs = {"List Item 01", "List Item 02", "List Item 03", "List Item 04"};
private ArrayAdapter arrayAdapter;
private ImageView ivRunningMan;
private AnimationDrawable mAnimationDrawable;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViews(); //獲取控件
//京東RunningMan動畫效果，和本次Toolbar無關
mAnimationDrawable = (AnimationDrawable) ivRunningMan.getBackground();
mAnimationDrawable.start();
toolbar.setTitle("Toolbar");//設置Toolbar標題
toolbar.setTitleTextColor(Color.parseColor("#ffffff")); //設置標題顏色
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true); //設置返回鍵可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//創建返回鍵，并實現打開關/閉監聽
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
mAnimationDrawable.stop();
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
mAnimationDrawable.start();
}
};
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);
//設置菜單列表
arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, lvs);
lvLeftMenu.setAdapter(arrayAdapter);
}
private void findViews() {
ivRunningMan = (ImageView) findViewById(R.id.iv_main);
toolbar = (Toolbar) findViewById(R.id.tl_custom);
mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_left);
lvLeftMenu = (ListView) findViewById(R.id.lv_left_menu);
}
} 5.當然比較重要還有styles.xml和colors.xml，具體如下
<resources> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!--狀態欄顏色--> <item name="colorPrimaryDark">@color/Indigo_colorPrimaryDark</item> <!--Toolbar顏色--> <item name="colorPrimary">@color/Indigo_colorPrimary</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> <?xml version="1.0" encoding="utf-8"?> <resources> <color name="Indigo_colorPrimaryDark">#303f9f</color> <color name="Indigo_colorPrimary">#3f51b5</color> <color name="Indigo_nav_color">#4675FF</color> </resources>
到此就實現了高大上菜單側滑，最終效果如下（注：在Yosemite上貌似直接Record手機屏幕貌似不起作用，而且動畫由于幀率原因無法實時，就先這樣看吧~）
參考列表
歡迎大家關注我的微博和微信公眾號，提出你的意見和建議，也可以直接在下面發表評論哦~
本文由用戶 zssqsiincs 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！