[android] new design navigation drawer

구글에서 새로운 UI를 위한 라이브러리를 발표했다.
http://android-developers.blogspot.kr/2015/05/android-design-support-library.html

 

어지간한 예제는 https://github.com/chrisbanes/cheesesquare 에 다 있지만, 나중에 쓸 때 잘 알아보기 위해 블로그에 다시 정리를 해본다.

자세한 설명은 http://pluu.github.io/blog/android-study/2015/05/31/android-design-support-library/ 에 있다.

 

 

일단 gradle에 이 두 개를 추가한다.

compile 'com.android.support:design:22.2.1'
compile 'com.android.support:appcompat-v7:22.2.1'

 

 

액션바를 가리지 않는 메뉴

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"/>

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#f00">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="menu1"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="menu2"/>
        </LinearLayout>
    </android.support.design.widget.NavigationView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="aaaa"
            android:textColor="#00f"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="bbbb"/>
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

import android.os.Bundle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity
{
  private DrawerLayout mDrawerLayout;

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ActionBar actionBar = getSupportActionBar();
    actionBar.setHomeAsUpIndicator(android.R.drawable.ic_menu_view);
    actionBar.setDisplayHomeAsUpEnabled(true);

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item)
  {
    int id = item.getItemId();

    if (id == android.R.id.home)
    {
      mDrawerLayout.openDrawer(GravityCompat.START);
    }

    return super.onOptionsItemSelected(item);
  }
}

이렇게 표시된다.

 

 

 

 

 

액션바를 가리는 메뉴

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar"/>

Toolbar를 써야하기 때문에 NoActionBar를 지정해줘야 한다.
안 그럼 액션바가 두 줄로 나온다.

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#f00">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="menu1"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="menu2"/>
        </LinearLayout>
    </android.support.design.widget.NavigationView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:orientation="vertical">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"/>
        </android.support.design.widget.AppBarLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="aaaa"
            android:textColor="#00f"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="bbbb"/>
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

import android.os.Bundle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity
{
  private DrawerLayout mDrawerLayout;

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    ActionBar actionBar = getSupportActionBar();
    actionBar.setHomeAsUpIndicator(android.R.drawable.ic_menu_view);
    actionBar.setDisplayHomeAsUpEnabled(true);

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item)
  {
    int id = item.getItemId();

    if (id == android.R.id.home)
    {
      mDrawerLayout.openDrawer(GravityCompat.START);
    }

    return super.onOptionsItemSelected(item);
  }
}

이렇게 가려진다.