學(xué)習(xí)使用Material Design控件(二)使用DrawerLayout實(shí)現(xiàn)側(cè)滑菜單欄效果
本文介紹如何使用DrawerLayout和NavigationView實(shí)現(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對(duì)應(yīng)菜單的上面部分,一般用來(lái)顯示用戶信息,menu則對(duì)應(yīng)實(shí)際的菜單項(xià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開(kāi)發(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>
代碼實(shí)現(xiàn)
ActionBarDrawerToggle可以配合Toolbar,實(shí)現(xiàn)Toolbar上菜單按鈕開(kāi)關(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點(diǎn)擊事件 mNavigationView = (NavigationView) findViewById(R.id.navigation_view); setupDrawerContent(mNavigationView); //設(shè)置NavigationView點(diǎn)擊事件 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; } }); }
項(xiàng)目源碼已發(fā)布到Github,以后慢慢加入其他控件的使用。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android編程中TextView字體屬性設(shè)置方法(大小、字體、下劃線、背景色)
這篇文章主要介紹了Android編程中TextView字體屬性設(shè)置方法,包括大小、字體、下劃線、背景色等設(shè)置技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10Android 提交或者上傳數(shù)據(jù)時(shí)的dialog彈框動(dòng)畫效果
我們?cè)谑褂弥Ц秾氈Ц兜臅r(shí)候會(huì)看到類似這種彈框動(dòng)畫效果,下面通過(guò)實(shí)例代碼給大家分享android 提交或者上傳數(shù)據(jù)時(shí)的彈框動(dòng)畫效果,感興趣的的朋友參考下2017-07-07Android實(shí)現(xiàn)TCP客戶端支持讀寫操作
這篇文章主要介紹了Android-實(shí)現(xiàn)TCP客戶端,支持讀寫操作,主要是通過(guò)socket讀寫tcp,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02Android對(duì)so進(jìn)行簡(jiǎn)單hook思路解析
這篇文章主要為大家介紹了Android對(duì)so進(jìn)行簡(jiǎn)單hook思路解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04詳談Android動(dòng)畫效果translate、scale、alpha、rotate
下面小編就為大家?guī)?lái)一篇詳談Android動(dòng)畫效果translate、scale、alpha、rotate。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01Android開(kāi)發(fā)者必備的十個(gè)工具介紹
這篇文章主要介紹了Android開(kāi)發(fā)者必備的十個(gè)工具介紹,在這篇文章中,討論了10個(gè)最常見(jiàn)的工具,android 開(kāi)發(fā)者應(yīng)該了解和學(xué)習(xí)使用,需要的朋友可以參考下2015-03-03解決Android調(diào)用系統(tǒng)分享給微信,出現(xiàn)分享失敗,分享多文件必須為圖片格式的問(wèn)題
這篇文章主要介紹了解決Android調(diào)用系統(tǒng)分享給微信,出現(xiàn)分享失敗,分享多文件必須為圖片格式的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09Compose自定義View實(shí)現(xiàn)宇智波斑寫輪眼
這篇文章主要為大家介紹了Compose自定義View實(shí)現(xiàn)宇智波斑寫輪眼示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02