學(xué)習(xí)使用Material Design控件(二)使用DrawerLayout實現(xiàn)側(cè)滑菜單欄效果
本文介紹如何使用DrawerLayout和NavigationView實現(xiàn)側(cè)滑菜單欄的效果。
效果如下:
Layout布局
<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:fitsSystemWindows=“true”> <android.support.design.widget.NavigationView android:id=“@+id/navigation_view” android:layout_width=“wrap_content” android:layout_height=“match_parent” android:layout_gravity=“start” app:headerLayout=“@layout/navigation_header” app:menu=“@menu/drawer” /> </android.support.v4.widget.DrawerLayout>
NavigationView需要設(shè)置app:headerLayout 和 app:menu,headerLayout對應(yīng)菜單的上面部分,一般用來顯示用戶信息,menu則對應(yīng)實際的菜單項文件。
headerLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="192dp" android:background="?attr/colorPrimaryDark" android:gravity="center" android:orientation="vertical" android:padding="16dp" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/profile_image" android:layout_width="72dp" android:layout_height="72dp" android:layout_marginTop="20dp" android:src="@mipmap/profile" app:border_color="@color/primary_light" app:border_width="2dp" /> <TextView android:layout_marginTop="10dp" android:textSize="18sp" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="APP開發(fā)者" android:gravity="center" android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> </LinearLayout>
menu
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity"> <group android:checkableBehavior="single"> <item android:id="@+id/navigation_item_example" android:icon="@drawable/ic_favorite" android:title="@string/navigation_example" /> <item android:id="@+id/navigation_item_blog" android:icon="@drawable/ic_favorite" android:title="@string/navigation_my_blog" /> <item android:id="@+id/navigation_item_about" android:icon="@drawable/ic_favorite" android:title="@string/navigation_about" /> </group> </menu>
代碼實現(xiàn)
ActionBarDrawerToggle可以配合Toolbar,實現(xiàn)Toolbar上菜單按鈕開關(guān)效果。
//設(shè)置Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(mToolbar); //設(shè)置DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close); mDrawerToggle.syncState(); mDrawerLayout.setDrawerListener(mDrawerToggle);
//設(shè)置NavigationView點擊事件 mNavigationView = (NavigationView) findViewById(R.id.navigation_view); setupDrawerContent(mNavigationView); //設(shè)置NavigationView點擊事件 private void setupDrawerContent(NavigationView navigationView) { navigationView.setNavigationItemSelectedListener( new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { switch (menuItem.getItemId()) { case R.id.navigation_item_example: switchToExample(); break; case R.id.navigation_item_blog: switchToBlog(); break; case R.id.navigation_item_about: switchToAbout(); break; } menuItem.setChecked(true); mDrawerLayout.closeDrawers(); return true; } }); }
項目源碼已發(fā)布到Github,以后慢慢加入其他控件的使用。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android編程中TextView字體屬性設(shè)置方法(大小、字體、下劃線、背景色)
這篇文章主要介紹了Android編程中TextView字體屬性設(shè)置方法,包括大小、字體、下劃線、背景色等設(shè)置技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10Android 提交或者上傳數(shù)據(jù)時的dialog彈框動畫效果
我們在使用支付寶支付的時候會看到類似這種彈框動畫效果,下面通過實例代碼給大家分享android 提交或者上傳數(shù)據(jù)時的彈框動畫效果,感興趣的的朋友參考下2017-07-07詳談Android動畫效果translate、scale、alpha、rotate
下面小編就為大家?guī)硪黄斦凙ndroid動畫效果translate、scale、alpha、rotate。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01解決Android調(diào)用系統(tǒng)分享給微信,出現(xiàn)分享失敗,分享多文件必須為圖片格式的問題
這篇文章主要介紹了解決Android調(diào)用系統(tǒng)分享給微信,出現(xiàn)分享失敗,分享多文件必須為圖片格式的問題,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09