[android/안드로이드]DrawerLayout을 Custom해서 사용하기

공모전을 준비하면서 어려운 점 중 하나는

디자인을 하는 것이다.

(나는 이쁜데 남은 이쁘지 않은 ...)

안드로이드 개발자 둘이서 진행하고 있는데

포토샵을 조금 쓸 줄 알아서

디자인도 담당하게 되었다...

구글에서 여러 가지 디자인을 참고하던 중

이번에는 상단의 버튼을 누르면

왼쪽에서 창이 튀어나오면서

메뉴를 선택할 수 있는?

그런 형태로 구현하고 싶어서

DrawerLayout을 이용하기로 했다.

Android Studio에서 (현재 2.2 버전 사용 중)

기본적으로 지원하고 있는데

저 왼쪽의 메뉴들(Item)을 마음대로 바꾸고 싶은데

뭔가 어려워서 다르게 구현된

그리고 이해하기 쉬운 ...

코드들을 찾아서 구글링 해보았다.

결국 원하는 코드를 찾아서

적당히 고쳐서 원하는 형태로 만들었다.

OpenDrawer 버튼을 눌렀을 때

왼쪽에서 창이 튀어나오면서

밋밋한 글자 메뉴가 아닌

그림과 글자가 같이 나타난

뭔가 카드 형식처럼 만들고 싶었는데

적당히 꾸며서 사용하면 될 것 같다.

DrawarLayout을 사용하려면

android.support.v4(?) 를 포함해야 한다고

다른 옛날 포스팅들에 쓰여있었는데

요즘 AndroidStudio는 알아서 포함시켜 주는 것 같다.

원래 코드에서는 activity_main.xml에

튀어나오는 레이아웃의 코드도

모두 포함되어 있었는데

지저분해서 activity_drawer.xml로

따로 분리했다.

그래서 MainActivity에서 다른 xml의

id를 컨트롤해야 하는 문제에 대해서 고민하다가 

include를 이용하여 다른 xml 파일에 존재하는 

id 값도 MainActivity.java에서 처리할 수 있도록 했다.

activity_main.xml

 
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:background="@android:color/background_light"
        tools:context=".MainActivity" >
 
        <Button
            android:id="@+id/opendrawer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Open Drawer" />
 
        <TextView
            android:id="@+id/prompt"
            android:layout_width="match_parent"
            android:textColor="#000000"
            android:layout_height="wrap_content"
            android:gravity="right" />
        <TextView
            android:id="@+id/prompt2"
            android:textColor="#000000"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right" />
    </LinearLayout>
    <include
        layout="@layout/activity_drawer" />
</android.support.v4.widget.DrawerLayout>
 

activity_drawer.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="#dcfdd5"
    android:orientation="vertical"
    android:padding="5dp" >
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#82966b"
        android:gravity="center"
        android:textSize="20sp"
        android:text="테스트 메뉴" />
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f2ffe8"
        android:layout_margin="10dp"
        android:gravity="center"
        android:orientation="vertical">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/puzzleleaf"/>
        <TextView
            android:layout_width="match_parent"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:textColor="#6c8e5e"
            android:text="퍼즐잎 메뉴1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f2ffe8"
        android:layout_margin="10dp"
        android:gravity="center"
        android:orientation="vertical">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/puzzleleaf"/>
        <TextView
            android:layout_width="match_parent"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:textColor="#6c8e5e"
            android:text="퍼즐잎 메뉴2"/>
    </LinearLayout>
    <Button
        android:id="@+id/closedrawer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:textColor="#000000"
        android:text="Close Drawer" />
 
 
    </LinearLayout>
 
 

MainActivity.java

package com.puzzleleaf.drawlayout;
import android.support.v4.widget.DrawerLayout;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
 
public class MainActivity extends AppCompatActivity {
 
    private DrawerLayout drawerLayout;
    private View drawerView;
    private TextView txtPrompt, txtPrompt2;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        txtPrompt = (TextView) findViewById(R.id.prompt);
        txtPrompt2 = (TextView) findViewById(R.id.prompt2);
 
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawerView = (View)findViewById(R.id.drawer);
 
        Button buttonOpenDrawer = (Button) findViewById(R.id.opendrawer);
        buttonOpenDrawer.setOnClickListener(new View.OnClickListener() {
 
            public void onClick(View arg0) {
                drawerLayout.openDrawer(drawerView);
            }
        });
 
        Button buttonCloseDrawer = (Button) findViewById(R.id.closedrawer);
        buttonCloseDrawer.setOnClickListener(new View.OnClickListener() {
 
            public void onClick(View arg0) {
                drawerLayout.closeDrawers();
            }
        });
 
        drawerLayout.setDrawerListener(myDrawerListener);
        drawerView.setOnTouchListener(new View.OnTouchListener() {
 
            public boolean onTouch(View v, MotionEvent event) {
                // TODO Auto-generated method stub
                return true;
            }
        });
    }
 
    DrawerLayout.DrawerListener myDrawerListener = new DrawerLayout.DrawerListener() {
 
        public void onDrawerClosed(View drawerView) {
        }
        public void onDrawerOpened(View drawerView) {
        }
 
        public void onDrawerSlide(View drawerView, float slideOffset) {
            txtPrompt.setText("onDrawerSlide: "
                    + String.format("%.2f", slideOffset));
        }
 
        public void onDrawerStateChanged(int newState) {
            String state;
            switch (newState) {
                case DrawerLayout.STATE_IDLE:
                    state = "STATE_IDLE";
                    break;
                case DrawerLayout.STATE_DRAGGING:
                    state = "STATE_DRAGGING";
                    break;
                case DrawerLayout.STATE_SETTLING:
                    state = "STATE_SETTLING";
                    break;
                default:
                    state = "unknown!";
            }
 
            txtPrompt2.setText(state);
        }
    };
 
}