Android實現(xiàn)原生側(cè)滑菜單的超簡單方式
先來看看效果圖
當你點擊菜單可以更改圖標,例如點擊happy,首頁就會變一個笑臉,這個實現(xiàn)的過程超級簡單
你需要使用ToolBar與DrawableLayout兩個比較新的控件
首先要寫三個xml布局文件,我這里的布局文件是使用了include標簽嵌入的,代碼如下
headbar_toolbar.xml
<?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
<?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"屬性使這部分作為側(cè)滑部分--> <!--一定要放在下面?。。£P(guān)于控件的層次性如果不知道的同學(xué)去百度!哦不去谷歌--> <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"> <!--用于設(shè)置菜單項--> <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
<?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>
如何應(yīng)用在java文件中【一個文件搞定】
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; /*側(cè)滑菜單布局*/ @BindView(R.id.llMenu) LinearLayout mLlMenu; /*側(cè)滑菜單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); /*以下倆方法設(shè)置返回鍵可用*/ getSupportActionBar().setHomeButtonEnabled(true); getSupportActionBar().setDisplayHomeAsUpEnabled(true); /*設(shè)置標題文字不可顯示*/ 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();/*同步狀態(tài)*/ } }
關(guān)于butterknife注解與樣式
butterknife直接在gradle文件中配置好如下【缺什么就補什么】
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相關(guān)*/ apt 'com.jakewharton:butterknife-compiler:8.4.0' compile 'com.android.support:support-v4:24.2.0' }
style【關(guān)于返回鍵的顏色樣式等在style文件中修改】
<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>
總結(jié)
其實很多時候我們在使用第三方控件的時候往往不知道背后是怎么實現(xiàn)的,使用原生控件可以讓我們更好的理解一個交互或者說實現(xiàn)一個功能的原理,有利于做出性能與交互都非常優(yōu)秀的APP,以上就是這篇文章的全部內(nèi)容,希望對大家的工作或?qū)W習(xí)帶來一定的幫助。
- Android左右滑出菜單實例分析
- android popwindow實現(xiàn)左側(cè)彈出菜單層及PopupWindow主要方法介紹
- android底部菜單欄實現(xiàn)原理與代碼
- 基于Android實現(xiàn)點擊某個按鈕讓菜單選項從按鈕周圍指定位置彈出
- Android ListView長按彈出菜單二種實現(xiàn)方式示例
- Android界面設(shè)計(APP設(shè)計趨勢 左側(cè)隱藏菜單右邊顯示content)
- Android開發(fā)技巧之我的菜單我做主(自定義菜單)
- Android仿QQ空間底部菜單示例代碼
- android studio 的下拉菜單Spinner使用詳解
- Android學(xué)習(xí)之菜單的使用方法
相關(guān)文章
Android基礎(chǔ)教程數(shù)據(jù)存儲之文件存儲
這篇文章主要介紹了Android基礎(chǔ)教程數(shù)據(jù)存儲之文件存儲的相關(guān)資料,數(shù)據(jù)存儲是Android開發(fā)的重要的知識,這里提供了實例,需要的朋友可以參考下2017-07-07Android中PopuWindow實現(xiàn)下拉列表實例
本篇文章主要介紹了Android中PopuWindow實現(xiàn)下拉列表實例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07Activity配置、啟動和關(guān)閉activity實例詳解
這篇文章主要介紹了Activity配置、啟動和關(guān)閉activity實例詳解,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09android預(yù)置默認的語音信箱號碼具體實現(xiàn)
在此介紹以xml的方式預(yù)置VM number的方法,以及如何允許用戶去修改并能夠記住用戶的選擇2013-06-06