LoginSignup
125

More than 5 years have passed since last update.

Android Design Support Library を少しだけ触ってみました

Last updated at Posted at 2015-05-31

※ 自分のブログ記事の再掲です : http://blog.384ta.com/android-design-support-library

Google I/O 2015 で Android M Preview が発表されると同時に、Android Design Support Library (以下 ADSL) が使えるようになりました。

ADSL はこれまで Material Design ガイドラインにありながらも、標準 API や Support Library API では自前で実装するしかなかったパーツをライブラリとして、補完してくれるものです。

  • NavigationView
  • TextInputLayout
  • FloatingActionButton
  • CoordinatorLayout / Snackbar

の 4 つを触ってみました。

ADSL の使い方

build.gradle に

dependencies {
  compile 'com.android.support:design:22.2.0'
}

を追加して、 Sync します。

NavigationView

NavigationView は DrawerLayout の中に設置する要素です。これまで RelativeLayout や ListView などを組み立てて作っていたナビゲーションドロワーを 1 つの要素で作ることができるようになりました。

drawer.png

<android.support.design.widget.NavigationView
    android:id="@+id/main_drawer_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/main_drawer"/>

app:headerLayout には、ドロワーのヘッダービューに表示したいレイアウトファイルを指定し、app:menu にはドロワー内のメニュー要素のファイルを指定します。例えば @menu/main_drawer であれば、

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/drawer_item_1"
            android:checked="true"
            android:icon="@android:drawable/ic_menu_add"
            android:title="@string/hello_world"/>
        <item
            android:id="@+id/drawer_item_2"
            android:icon="@android:drawable/ic_menu_add"
            android:title="@string/hello_world"/>
        <item
            android:id="@+id/drawer_item_3"
            android:icon="@android:drawable/ic_menu_add"
            android:title="@string/hello_world"/>
        <item
            android:id="@+id/drawer_item_4"
            android:icon="@android:drawable/ic_menu_add"
            android:title="@string/hello_world"/>
        <item
            android:id="@+id/drawer_item_5"
            android:icon="@android:drawable/ic_menu_add"
            android:title="@string/hello_world"/>
    </group>
</menu>

このように記述します。ドロワー内のメニューを選択したときの処理は、 NavigationView の setNavigationItemSelectedListener に OnNavigationItemSelectedListener のインスタンスを渡して行います。

NavigationView navigationView = (NavigationView) findViewById(R.id.main_drawer_view);
navigationView.setNavigationItemSelectedListener(this);

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

    if (id == R.id.drawer_item_1) {
      // do it
    }

    return false;
}

TextInputLayout

TextInputLayout を使うと Floating Labels を簡単に実装できます。 EditText を TextInputLayout で包んであげるだけで OK です。

textinputlayout.png

<android.support.design.widget.TextInputLayout
    android:id="@+id/first_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/first_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hello_world"/>

</android.support.design.widget.TextInputLayout>

FloatingActionButton

FloatingActionButton もとても簡単に使えます。ただし、 Inbox アプリのように子メニューが展開するようなものは作れません。その場合はサードパーティのライブラリに頼るか、自作をするかになりそうです。

fab.png

<android.support.design.widget.FloatingActionButton
    android:id="@+id/first_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:src="@drawable/ic_star_white_24dp"/>

CoordinatorLayout / Snackbar

Material Design ガイドラインの Snackbars & toasts を見ると、 Snackbar と Floating Action Button を使う場合は、 Floating Action Button を隠してはいけないというものがあります。

Move your floating action button vertically to accommodate the snackbar height.

ADSL にある CoordinatorLayout を使うと、 Floating Action Button と Snackbar を組み合わせたときに Floating Action Button の位置を自動で調整してくれます。

snackbar.png

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/first_coordinator_layout"
    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">

    <!-- Content Layout Area -->

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/first_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:src="@drawable/ic_star_white_24dp"/>

</android.support.design.widget.CoordinatorLayout>

Snackbar を表示するには Toast と同じように表示させることができますが、 ParentView を渡す必要があるので注意が必要です。例えば上の例で Floating Action Button を押して Snackbar を表示させる場合は、

final CoordinatorLayout coordinatorLayout = (CoordinatorLayout) view.findViewById(R.id.first_coordinator_layout);
FloatingActionButton fab = (FloatingActionButton) view.findViewById(R.id.first_fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(coordinatorLayout, R.string.hello_world, Snackbar.LENGTH_LONG).show();
    }
});

Snackbar.make の第一引数に CoordinatorLayout を渡しています。

サンプルコード

GitHub に置いておきました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
125