안 드 로 이 드 가 네 이 티 브 사 이 드 메뉴 를 구현 하 는 초 간단 한 방식

일단 효과 도 를 볼 게 요.

메뉴 를 클릭 하면 아이콘 을 변경 할 수 있 습 니 다.예 를 들 어 happy 를 클릭 하면 첫 페이지 가 웃 는 얼굴 로 변 합 니 다.이 과정 은 매우 간단 합 니 다.
ToolBar 와 Drawable Layout 두 개의 새로운 컨트롤 을 사용 해 야 합 니 다.
먼저 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>
자바 파일 에 어떻게 적용 합 니까?

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>
총결산
사실은 우리 가 제3자 컨트롤 을 사용 할 때 뒤에 어떻게 실현 되 는 지 모 르 는 경우 가 많다.네 이 티 브 컨트롤 을 사용 하면 우 리 는 상호작용 이나 기능 을 실현 하 는 원 리 를 잘 이해 할 수 있 고 성능 과 상호작용 이 모두 우수한 앱 을 만 드 는 데 유리 하 다.이것 이 바로 이 글 의 전체 내용 이다.여러분 의 업무 나 학습 에 어느 정도 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기