Android實現原生側滑菜單的超簡單方式

 　　先來看看效果圖

　　當你點擊菜單可以更改表徵圖，例如點擊happy，首頁就會變一個笑臉，這個實現的過程超級簡單

　　你需要使用ToolBar與DrawableLayout兩個比較新的控制項

　　首先要寫三個xml布局檔案，我這裡的布局檔案是使用了include標籤嵌入的，代碼如下

　　headbar_toolbar.xml

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tbHeadBar" android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/red">   <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="@string/emotion" android:textColor="@color/white" android:textSize="16sp" />   </android.support.v7.widget.Toolbar>

　　my_drawablelayout.xml

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/dlMenu" android:layout_width="match_parent" android:layout_height="match_parent">   <LinearLayout android:id="@+id/llContent" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:gravity="center" android:orientation="vertical">   <ImageView android:id="@+id/ivContent" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/angry" />   </LinearLayout>   <!--android:layout_gravity="start"屬性使這部分作為側滑部分--> <!--一定要放在下面！！！關於控制項的層次性如果不知道的同學去百度！哦不去Google--> <LinearLayout android:id="@+id/llMenu" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:background="@color/white" android:orientation="vertical">   <!--用於設定功能表項目--> <ListView android:id="@+id/lvMenu" android:layout_width="match_parent" android:layout_height="match_parent" android:divider="@null" />   </LinearLayout>   </android.support.v4.widget.DrawerLayout>

　　main_activity.xml

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?xml version="1.0" encoding="utf-8"?> <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="com.demo.usher.demo_slidingmenu.MainActivity">   <!--頭部--> <include layout="@layout/headbar_toolbar" />   <!--主布局--> <include layout="@layout/my_drawablelayout" />   </LinearLayout>

　　如何應用在java檔案中【一個檔案搞定】

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

package com.demo.usher.demo_slidingmenu;   import android.os.Bundle; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.ListView;   import java.util.ArrayList; import java.util.List;   import butterknife.BindView; import butterknife.ButterKnife;   public class MainActivity extends AppCompatActivity {   @BindView(R.id.tbHeadBar) Toolbar mTbHeadBar;   /*側滑菜單布局*/ @BindView(R.id.llMenu) LinearLayout mLlMenu;   /*側滑菜單ListView放置功能表項目*/ @BindView(R.id.lvMenu) ListView mLvMenu;   @BindView(R.id.ivContent) ImageView mIvContent;   @BindView(R.id.dlMenu) DrawerLayout mMyDrawable;   ActionBarDrawerToggle mToggle;   private List<String> lvMenuList = new ArrayList<String>() {{ add("angry"); add("happy"); add("sad"); add("embarrassed"); }};   private List<Integer> imageList = new ArrayList<Integer>() {{ add(R.drawable.angry); add(R.drawable.happy); add(R.drawable.sad); add(R.drawable.embarrassed); }};   @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this);   /*初始化Toolbar與DrawableLayout*/ initToolBarAndDrawableLayout();   mLvMenu.setAdapter(new ArrayAdapter(this, android.R.layout.simple_expandable_list_item_1, lvMenuList)); mLvMenu.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { mIvContent.setImageResource(imageList.get(position)); mMyDrawable.closeDrawers();/*收合抽屜*/ } }); }   private void initToolBarAndDrawableLayout() { setSupportActionBar(mTbHeadBar); /*以下倆方法設定返回鍵可用*/ getSupportActionBar().setHomeButtonEnabled(true); getSupportActionBar().setDisplayHomeAsUpEnabled(true); /*設定標題文字不可顯示*/ getSupportActionBar().setDisplayShowTitleEnabled(false);   mToggle = new ActionBarDrawerToggle(this, mMyDrawable, mTbHeadBar, R.string.open, R.string.close) { @Override public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); //Toast.makeText(MainActivity.this, R.string.open, Toast.LENGTH_SHORT).show(); }   @Override public void onDrawerClosed(View drawerView) { super.onDrawerClosed(drawerView); //Toast.makeText(MainActivity.this, R.string.close, Toast.LENGTH_SHORT).show(); } }; /*mMyDrawable.setDrawerListener(mToggle);不推薦*/ mMyDrawable.addDrawerListener(mToggle); mToggle.syncState();/*同步狀態*/ } }

　　關於butterknife註解與樣式

　　butterknife直接在gradle檔案中配置好如下【缺什麼就補什麼】

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

apply plugin: 'com.android.application' apply plugin: 'android-apt'   android { compileSdkVersion 24 buildToolsVersion "24.0.2"   defaultConfig { applicationId "com.demo.usher.demo_slidingmenu" minSdkVersion 15 targetSdkVersion 24 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } }   }   buildscript { repositories { mavenCentral() } dependencies { classpath 'com.neenbedankt.gradle.plugins:android-apt:1.8' } }   dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:24.2.0' compile 'com.jakewharton:butterknife:8.4.0' /*butterknife相關*/ apt 'com.jakewharton:butterknife-compiler:8.4.0' compile 'com.android.support:support-v4:24.2.0' }

　　style【關於返回鍵的顏色樣式等在style檔案中修改】

　　?

1 2 3 4 5 6 7 8 9 10 11

<resources>   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <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>

　　總結

　　其實很多時候我們在使用第三方控制項的時候往往不知道背後是怎麼實現的，使用原生控制項可以讓我們更好的理解一個互動或者說實現一個功能的原理，有利於做出效能與互動都非常優秀的APP，以上就是這篇文章的全部內容，希望對大家的工作或學習帶來一定的協助。