potatotips (iOS/Android開発Tips共有会) 第26回(2016/02/17)の発表資料です。

1. 2016/02/17
神原 健一（@korodroid）
potatotips #26
【Android枠】
AndroidアプリのUI/UX改善例

2. 2
自己紹介
l 神原 健一 (@korodroid)
l モバイル関連活動
l 国内外での講演活動
•Droidcon Stockholm 2014
•Droidcon Spain 2014
•Droidcon Amsterdam 2013
•Droidcon Paris 2013
•Smartphone & Tablet 2014 Spring Tokyo
•Developers Summit 2015
l 書籍執筆
l ブログ「Mobile Dev Blog」
l NTTソフトウェア（株）所属

3. 3
ユーザに満足してもらえるアプリ
必要な機能が備わっていること
心地よいUI/UXを実現していること

4. 4
UI/UX改善と実現方式例

5. 5
セカイフォン（リアルタイム翻訳）
http://www.iplatform.org/blog/sekai-phone

6. 6
UI/UX改善例
①サイドメニューの変更
②検索の操作性改善
③アップナビゲーション対応

7. 7
①サイドメニューの変更

8. 8
①サイドメニューの変更
DrawerLayout
→サイドメニュー入れ物
Toolbar
→ActionBarの後継的なもの
NavigationView
→サイドメニューの内容

9. 9
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
// 中略
>
<LinearLayout
// 中略
>
<android.support.v7.widget.Toolbar
// 中略
>
</android.support.v7.widget.Toolbar>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/navigation_menu"/>
</android.support.v4.widget.DrawerLayout>
①実装イメージ

10. 10
NavigationView mNavigationView = ...;
DrawerLayout mDrawerLayout = ...;
Toolbar mToolBar = ...;
// メニューアイコン押下時の処理
mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mDrawerLayout.openDrawer(Gravity.LEFT);
}
});
// メニュー内項目選択時の処理
mNavigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// …
return true;
}
});
①実装イメージ

11. 11
②検索の操作性改善

12. 12
②検索の操作性改善
SearchView
→検索用ビュー
OnQueryTextListener
→テキスト入力感知リスナー
Realm
→データベース(LIKE検索)

13. 13
②実装イメージ
SearchView searchView = ...;
searchView.setOnQueryTextListener(onQueryTextListener);
// メニューアイコン押下時の処理
private SearchView.OnQueryTextListener onQueryTextListener =
new SearchView.OnQueryTextListener() {
@Override
public boolean onQueryTextSubmit(String searchWord) {
// 決定キー押下時(searchWord:入力テキスト)
// 例)「あ」→「め」→「決定キー」の場合：
// 1回呼び出され、「あめ」が引数に渡される
// →検索処理実行
}
@Override
public boolean onQueryTextChange(String newWord) {
// 文字の追加・削除時(newWord:入力テキスト)
// 例)「あ」→「め」の場合
// 2回呼び出され、1回目「あ」2回目「あめ」が引数に渡される
// →検索処理実行
}
};

14. 14
③アップナビゲーション対応

15. 15
③アップナビゲーション対応
Up Action
→親画面への遷移
ParentActivity
→Activityの親子関係を意識

16. 16
③参考ページ
Providing Up Navigation (Android公式Developerサイト)

17. 17
(PR)今回の発表と関係ないですがw…
• 技術評論社
• 定価2,580円＋税
• 2015年11月17日発売
（2016年1月に電子版も！）
• 詳細
http://www.iplatform.org/
blog/archives/2628

18. 18
おわり
•Facebook:http://fb.com/kanbara.kenichi
•Google+:+Kenichi Kambara
•LinkedIn:http://www.linkedin.com/in/korodroid
•Twitter:@korodroid
ご清聴ありがとうございました。
（執筆、講演依頼などのお話がございましたら、
ご連絡をお願い致します。）