超簡單方式教你打造原生側滑菜單

shiyqing 8年前發布 | 9K 次閱讀安卓開發 Android開發移動開發

效果圖

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

第一步：你需要使用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"屬性使這部分作為側滑部分-->
    <!--一定要放在下面！！！關于控件的層次性如果不知道的同學去百度！哦不去谷歌-->
    <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

<?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文件中【一個文件搞定】

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文件中配置好如下【缺什么就補什么】

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文件中修改】

<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

來自：http://www.jianshu.com/p/738dcf9cd1ec

本文由用戶 shiyqing 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1473401450293.html

安卓開發 Android開發移動開發

超簡單方式教你打造原生側滑菜單

第一步：你需要使用ToolBar與DrawableLayout兩個比較新的控件

headbar_toolbar.xml

my_drawablelayout.xml

main_activity.xml

好處

相關經驗

相關資訊

相關文檔

目錄