オープンソース の UI ライブラリを使ってメニューをアレンジしてみよう

Document created by wakana_satoesrij-esridist Employee on Aug 13, 2017Last modified by masanobu_hiranoesrij-esridist on Aug 17, 2017
Version 17Show Document
  • View in full screen mode

Android には標準でもたくさんサポート ライブラリ用意されており、UX / UI を極める上では欠かせないものとなっていますね。
サポート ライブラリの他にも、さわるだけで楽しくなるようなメニューやボタンの動作などを、独自のライブラリとしてオープンソース(以下、OSS)で公開しているものもあります。
今回はそんなポップで楽しい OSS ライブラリを一覧でまとめているサイトを発見したので、Android で作る地図アプリに組み込んでみました。次の画像のようにメニューをカスタマイズできます。
ちなみに、私は初めて OSS のライブラリ Android で使用したので、その手順も記述しておきます。

 

 

 

使用したライブラリ

 

今回は、BoomMenu という、メニューをカスタマイズできるライブラリを使って地図の表示場所を切り替えるアプリを作ってみます。

 

画像で探すView系 Android ライブラリまとめ(2016/08)のブログ記事に掲載されている UX / UI の GitHub リポジトリを参考にさせていただきました。このリポジトリでは、レイアウトだけでなくメニューやボタンの操作、Loading 中のアニメーションまでたくさんの中から画像で探すことができます。見ているだけでも飽きない楽しいリポジトリです。

 

作成したアプリ

 

BoomMenu から選択したボタンに従って、あらかじめ設定しておいた(ブックマークした)場所を表示するというアプリです。

地図の表示と、場所をブックマークする機能は ArcGIS Runtime SDK for Android を使って作成します。ブックマーク機能ではアプリの地図操作から新規の場所をブックマークできますが、今回はあらかじめコードでブックマークを設定しておきます。ソースコードは Esriジャパンの GitHub をご覧ください。

 

 

 

BoomMenu を実装してみよう

 

BoomMenu の使い方は、このリポジトリの Wiki に英語で記されていますが、特に実装が必要な部分を記録として残しておきます。

Android Studioで空のプロジェクトを作成してから、コーディングや定義が必要なファイルは全部で 3 つです。

 

build.gradle ファイル

BoomMenu の参照先のリポジトリを定義します。参照先は README に記述がありました。大体どの OSS もここに書いてあるようです。

Android OSS を使うための定義は他にもいくつかあるようですが、今回は gradle ファイルを編集しました。1行だけです!

Maven など、他の定義方法については「GitHubのOSSから見るbuild.gradleでライブラリのバージョンを管理する方法」という記事がわかりやすかったです。

 

dependencies {
compile 'com.nightonke:boommenu:2.1.0'

}

 

activity_main.xml ファイル (レイアウトファイル)

最低限必要なのは com.nightonke.boommenu.BoomMenuButton id layout の定義です。 

app:・・・の部分は、ボタンにテキストを付けたり、並び替えのために必要な定義です。このライブラリは、ボタンの個数や並び方、アニメーションの動きの制御を定数で定義できるので、独自のカスタマイズもしやすくなっています。次で定義しているのは、テキスト付の丸いボタンを6つ、下の画像の配置で表示するための定義です。

 

 

<com.nightonke.boommenu.BoomMenuButton
android:id="@+id/bmb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:bmb_buttonEnum="textInsideCircle"
app:bmb_piecePlaceEnum="piecePlace_dot_6_4"
app:bmb_buttonPlaceEnum="buttonPlace_sc_6_4"
/>

 

MainActivityファイル

ここでレイアウト ファイルに設定したボタンの処理を実装していきます。

MainActivity でやることは、ボタンのデザインを実装することと、選択されたボタンに対し処理を実装することの つです。Android で基本的なボタン処理を実装する流れと同じです。注意点は、アイコンと一緒に表示する文字の表示を内側と外側のどちらにするかでオブジェクトが違うことです。レイアウト ファイルの定義と合わせてください。

 

/////////////////////////////////////
// BoomMenu ボタン作成
/////////////////////////////////////
// レイアウトから BoomMenu のオブジェクトを作成する
BoomMenuButton bmb = (BoomMenuButton) findViewById(R.id.bmb);
bmb.setButtonEnum(ButtonEnum.TextOutsideCircle);
for (int i = 0; i < bmb.getButtonPlaceEnum().buttonNumber(); i++) {
    // ボタンに設定するテキストやアイコンを定義します
    TextOutsideCircleButton.Builder builder = null;
    if(i % 2 == 0){
        // 偶数/奇数によって表示アイコンを分ける
        builder = new TextOutsideCircleButton.Builder()
                .normalImageRes(R.drawable.mitt)
                .normalText(mNavigationDrawerItemTitles[i]);
    }else{
        builder = new TextOutsideCircleButton.Builder()
                .normalImageRes(R.drawable.bat)
                .normalText(mNavigationDrawerItemTitles[i]);
    }
    bmb.addBuilder(builder);
}

/////////////////////////////////////
// BoomMenu ボタンイベント定義
/////////////////////////////////////
bmb.setOnBoomListener(new OnBoomListener() {
    @Override
    public void onClicked(int index, BoomButton boomButton) {
        // ボタンを選択したときの処理をcallする
        selectBookmark(index);
    }
    @Override
    public void onBackgroundClick() {}
    @Override
    public void onBoomWillHide() {}
    @Override
    public void onBoomDidHide() {}
    @Override
    public void onBoomWillShow() {}
    @Override
    public void onBoomDidShow() {}
});

 

おまけ:地図のブックマーク機能を実装する

今回使用した地図表示機能とブックマーク機能は、ArcGIS Runtime SDK for Android に標準で備わっているものです。

このアプリで使用したブックマーク作成方法と呼び出し方についてコードで解説します。地図の表示については ArcGIS 開発リソース集の地図表示の実装をご覧ください。

 

  • ブックマークする場所を定義する

ArcGIS Runtime SDK for Android のブックマーク オブジェクトに、場所情報(緯度経度)と名称を設定します。

/**
* ブックマークリストを作成する
*/

private void addDefaultBookmarks() {
    // BookmarkList のオブジェクトを ArcGISMap オブジェクトから作成する
    mBookmarks = mMap.getBookmarks();
    Viewpoint viewpoint;
    // 東京ドーム
    viewpoint = new Viewpoint(35.704651999999996, 139.75302499999998, 6e3);
    mBookmark = new Bookmark(mNavigationDrawerItemTitles[0], viewpoint);
    mBookmarks.add(mBookmark);
    // 阪神甲子園球場
    viewpoint = new Viewpoint(34.721206,135.361622, 6e3);
    mBookmark = new Bookmark(mNavigationDrawerItemTitles[1], viewpoint);
    mBookmarks.add(mBookmark);

    ・・・

 

  • ブックマーク オブジェクトから表示位置情報を取得する
mMapView.setViewpointAsync(mBookmarks.get(position).getViewpoint()); // positionは選択されたボタン(index)のナンバー

BoomMenu のイベントで選択されたボタンの index 番号を渡して、あらかじめ定義しておいたブックマーク オブジェクトから指定した index 番号の位置情報を取得し、このポイントに合わせて地図の表示位置を移動します。

MapView というのは、地図全体を管理する ArcGIS Runtime SDK for Android のオブジェクトです。これに表示位置情報を設定することで指定の場所を中心に地図を表示することができます。

 

おわりに

 

初めて OSS を使って Android でレイアウトを定義してみました。いつも私は初めて使用するライブラリでは使い方に苦戦するのですが、これは比較的簡単で直感的にできるかなと思いました。見せ方もポップで、実装していても面白いですし、何よりこういった UI を画像で探せるリポジトリが貴重だとも思いました。

地図を扱う上では、UX / UI というものは大変重要です。Android とこういったポップなライブラリを使って、使いやすく楽しい地図アプリを模索していきましょう!

 

関連リンク

Attachments

    Outcomes