WearableActionDrawerを実装してみた

More than 1 year has passed since last update.

WearableActionDrawerはAndroid Wearのマテリアルデザインの1つで、Wear2.0より追加されました。


実装


準備

Wear用のプロジェクト作成等の説明は省きます。

build.gradle(app)に以下を追加、すでにcom.google.android.support:wearableがある場合はバージョンの変更をします。

(2017/2/10時点で2.0.0)

compile 'com.google.android.support:wearable:2.0.0'


実装

レイアウトファイルにWearableActionDrawerを記述します。

親はWearableDrawerLayoutである必要があります。

また、コンテンツのスクロールに応じてDrawerを表示・非表示するためには、NestedScrollViewもしくはRecyclerViewを記述する必要があります。

(NestedScrollingChildを実装しているViewである必要がある)


activity_example.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.wearable.view.drawer.WearableDrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:deviceIds="wear">

<android.support.v4.widget.NestedScrollView
android:id="@+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.wearable.view.BoxInsetLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_box="all"/>

</android.support.wearable.view.BoxInsetLayout>

</android.support.v4.widget.NestedScrollView>

<android.support.wearable.view.drawer.WearableActionDrawer
android:id="@+id/bottom_action_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:action_menu="@menu/action_drawer_menu" />

</android.support.wearable.view.drawer.WearableDrawerLayout>


WearableActionDrawer内のapp:action_menuで記述したメニューリソースを作成します。


action_drawer_menu.xml

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/menu_android1"
android:icon="@drawable/ic_android"
android:title="Android1" />
<item
android:id="@+id/menu_android2"
android:icon="@drawable/ic_android"
android:title="Android2" />
<item
android:id="@+id/menu_android3"
android:icon="@drawable/ic_android"
android:title="Android3" />
</menu>

Activity側のコードです。

アイテムクリックのリスナーを実装しています。


ExampleActivity.java

import android.os.Bundle;

import android.support.wearable.activity.WearableActivity;
import android.support.wearable.view.drawer.WearableActionDrawer;
import android.view.MenuItem;
import android.widget.Toast;

public class ExampleActivity extends WearableActivity implements WearableActionDrawer.OnMenuItemClickListener {

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

initViews();
}

@Override
public boolean onMenuItemClick(MenuItem menuItem) {
Toast.makeText(this, menuItem.getTitle(), Toast.LENGTH_SHORT).show();
return false;
}

private void initViews() {
WearableDrawerLayout wearableDrawerLayout = (WearableDrawerLayout) findViewById(R.id.drawer_layout);
wearableDrawerLayout.peekDrawer(Gravity.BOTTOM);

WearableActionDrawer wearableActionDrawer = (WearableActionDrawer) findViewById(R.id.bottom_action_drawer);
wearableActionDrawer.setOnMenuItemClickListener(this);
}
}


上記のコードでこのような感じのレイアウトになります。

device-2017-01-24-121044.png

device-2017-01-24-121212.png


カスタマイズ


Overflowアイコンを表示する

レイアウトファイル内のWearableActionDrawerに以下を追加することでoverflowアイコンに変わります。(デフォルトではfalse)

app:show_overflow_in_peek="true"

device-2017-01-24-121122.png


スクロールした時にDrawerを表示する

デフォルトではスクロールコンテンツの上部または下部に到達したときにDrawerが表示され、それ以外では非表示になります。

以下を追加することで下から上へスクロールしている場合も常にDrawerを表示します。(デフォルトではfalse)

wearableActionDrawer.setShouldPeekOnScrollDown(true);


補足

Overflowアイコンが非表示の場合はメニューリソース1つ目のアイコンが表示されるはずですがなぜか表示されず…

device-2017-01-24-144707.png

ライブラリのソースコードよりメニューのコンテンツが変更された時に表示も更新されるようなので試しに

wearableActionDrawer.getMenu().getItem(0).setTitle("hoge");

このようなコードを書いてメニューの更新を促したところ、

device-2017-01-24-150143.png

表示されました!!

ベータ版なのでこれから修正されることでしょう…


追記

2017/01/27追記:

com.google.android.support:wearable:2.0.0-beta2が公開されていますが、

アイコンの上記の表示されない件については変わっていませんでした。

beta2の変更点はProGuardの修正やNFC対応、iOS対応となっているようです。

2017/02/10追記:

com.google.android.support:wearable:2.0.0が公開されましたが変わらずでした…


参考

https://developer.android.com/wear/preview/features/ui-nav-actions.html