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

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

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

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

 ADSL の使い方

build.gradle に

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

を追加して、 Sync します。

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 に置いておきました。

https://github.com/ryugoo/design-support-library-sample

 
35
Kudos
 
35
Kudos

Now read this

Samsung Galaxy S7 レビュー

MWC で発表されてから欲しいと思っていた Samsung Galaxy S7 を買いました。購入元は 1ShopMobile です。しばらくは Gold モデルしか無かったのですが、巡回中に全色在庫が復活したのを見て、そのまま Black Onyx をポチりました。 1. ハードウェア デザインは前作 Galaxy S6 から大きく変わっていませんが、カメラの出っ張りが小さくなり、 micro SD カード対応が復活し、IP68 の防水・防塵まで付いています。... Continue →