Furyu
[フリュー公式]

Tech Blog

フリュー株式会社の技術ブログです

2018年11月7日

furusin

Androidエンジニア以外にも知ってほしいAndroidアプリ用語-UI部品編-

こんにちは。ピクトリンク事業部の古川です。

この記事はZaimの@akatsuki174さんの記事「iOSエンジニア以外にも知ってほしいiOSアプリ用語-UI部品編-」に感化されて書きました、Android版となります。

AndroidとiOSは似たような画面を実装する事は可能です。

しかしUIの部品の名称が異なっている事が少なくありません。

また、それぞれ独特の部品もあります。

その辺りを明確にし、まとめていこうと思います。

重要度★★★

AppBar(もしくはToolBar)

toolbar

Android Material Design Guidelines:AppBars:top

iOSではナビゲーションバーと呼びます。

現在表示している画面のタイトルといった情報や、関連するアクションを表示する領域です。

画面の最上部に表示されます。

基本的に常時表示されているものですが、スクロールして下の方にある情報を表示したい際には隠すことも可能です。

 

また、画面上に大きく表示していたタイトルをToolbarに入れるようなアニメーションを作ることも可能です。

Android Support Library 22.2.0 で追加されたCoordinatorLayoutを利用します。

 

NavigationDrawer

activities-NonLoginMainActivity-10232018181213

Androidアプリの大きな特徴です。

Android Material Design Guidelines:Navigation drawer

ツールバーの左部に「≡」マーク(ハンバーガーマークと読んだりします)がある場合は、NavigationDrawerがある場合が多いです。

主な用途は画面の切り替えです。

Google系のアプリであればアカウントの切り替え機能を提供したりします。

FloatingActionButton

activities-BootstrapActivity-11062018140659

Androidアプリの特徴です。

Android Material Design Guidelines:Buttons: floating action button

通常は画面の右下に表示し、現在表示している画面で行いたいメインのアクションを提供します。

Toast

toast

Androidの初期から存在する、メッセージを表示するためのものです。

主にエラーメッセージを表示したり、ログインの成功などで使います。

TabLayout

tabs

iOSではタブバーと呼びます。

Android Material Design Guidelines:Tabs

複数の画面を1画面に用意し、ユーザーのアクションによって画面を行き来できるようにするものです。

タブ名は文字だけかアイコン付きが一般的です。

AndroidだとTabLayoutは画面上部に設置するのが一般的でしたが、近年では下部に設置するようiOSに近づいてきている印象があります。

私個人的には、上部にあると片手で端末を持っている場合に指が届かないので、下部に設置されるのは良い傾向だなと感じています。

BottomNavigationView

 

bn

Android Material Design Guidelines:Bottom navigation

iOSのタブバーと似たレイアウトになります。

TabLayoutにも似ていますが、BottomNavigationViewは完全に異なるメイン機能間を切り替えるためのナビゲーションを提供します。

アイテムの数も3〜5と制限があります。

近年、画面下部にBottomNavigationView+画面上部にTabLayoutを設置するといったアプリが増えてきました。

(例えばGoogle I/0 2018)

 

重要度★★

Dialogs

activities-NonLoginMainActivity-10232018190023

Android Material Design Guidelines:Dialogs

Androidでは、上記図のようなダイアログが一般的です。

ボタンは基本的に2つです。

・ネガティブボタン:キャンセルといったネガティブな動作を割り当てます。

・ポジティブボタン:OKや実行といったポジティブな動作を割り当てます。

「ニュートラルボタン」と第三のボタンを設置することができますが、あまりオススメしません。

ボタンが増えるとユーザビリティが下がる(ユーザーが正常な判断ができなくなる)ため、2つがよいかと思います。

 

CardView

browser-ChromeTabbedActivity-10232018190358

Android Material Design Guidelines:Cards

最近のGoogle検索結果もCardViewになっていたのをご存知でしたか?

各アイテムがまるでカードのようなViewになっていて、ひとつの物体として認識できます。

影が映っているように見えるのも特徴で、フラットデザインからマテリアルデザインに変わった時の大きな特徴です。

SnackBar

 

 

snackbar_button

Android Material Design Guidelines:Snackbars

簡単なメッセージを画面下部に表示するためのものです。

Toastにも似ていますが、Toastはメッセージを表示するだけのものでしたが

SnackBarはボタンを設置することが可能です。

例えばGoogleフォトだと画像を削除すると「ゴミ箱に移動しました」とSnackBarが出ますが、そこに「もとに戻す」ボタンも用意されています。

メッセージととにユーザーに何らかの行動をさせたい場合、便利です。(メール送信の取消しなど)

 

Swipe-to-Refresh(Pull-to-Refresh)

「引っ張って更新」と呼んだりします。

一度通信して情報を読み込んだ後に更新をかけたい時に使います。

WebブラウザやTwitterアプリにも使われています。

重要度★

ChromeCustomTabs

performance

通常はWebブラウザを立ち上げたり、WebViewを用いてWebページを表示していましたが、

ChromeCustomTabsを使うとアプリ内のWebページ読み込みを大幅に高速化できます。

ChromeCustomTabsはアプリ内に組み込まれたWebViewのような動作をするため、同一アプリ内での表示だとユーザーへ認識させることができます。

 

まとめ

いかがだったでしょうか。

AndroidにはiOSとは異なるViewがたくさんあり、似たものも使い方が多少異なっていたりします。

もっとたくさんありますが、また少しずつ触れていけたらと思います。

 

 


2018年09月18日

furusin

Android Support Library28.0.0-alpha1で追加されたChipGroupを試してみる

こんにちは。ピクトリンク事業部の古川です。

今回は、Android Support Library28.0.0(Alpha1)で追加された、Chip/ChipGroupについて解説します。

Chip/ChipGroupとは?

タグのようなものを指すViewです。

例えば、以下のようにスキルセットの一覧を表示するために使ったりします。

top crop

それでは具体的に見ていきましょう。

Chip/ChipGroupの導入

まずはbuild.gradleにAndroidXの情報を追加します。

2018年9月5日時点ではRC02が最新です。

実際に使ってみる

感覚的には、RadioButtonの実装に非常に似ています。

それでは実際に使ってみましょう。

ViewのXMLに情報を追加します。

 

head

 

これだけでもシンプルなChip/ChipGroupが設置できました。

ひとつずつ見ていきます。

Chipは独立しても使えますが、RadioButtonのようにChipGroupの子要素としてセットします。

8行目、Chipにはいくつかのスタイルが事前に用意されており、XMLで指定できるようになっています。

styleによって設定できるものは以下のものがあります。

  • チップ(チェックマーク)
  • クリック(選択状態)
  • 閉じるアイコン

上記3点をStyleの種別によって設定できます。

種類 概要 イメージ
@style/Widget.MaterialComponents.Chip.Filter
  • チップ:オプション
  • クリック:常に有効
  • 閉じるアイコン:オプション

通常、ChipGroupに属したChipとして利用する際に指定します。

filter

filter_filtered

@style/Widget.MaterialComponents.Chip.Action styleを設定しなかった場合、これがデフォルトとなる。

  • チップ:オプション
  • クリック:不可
  • 閉じるアイコン:不可

通常、ChipGroupに属したChipとして利用する際に指定します。

 action
@style/Widget.MaterialComponents.Chip.Choice
  • チップ:オプション
  • クリック:常に有効
  • 閉じるアイコン:不可

ユーザーが「選択している」ことをわかりやすく表示してくれる。

通常、ChipGroupに属したChipとして利用する際に指定します。

choice

choice_selected

@style/Widget.MaterialComponents.Chip.Entry
  • チップ:オプション
  • クリック:オプション
  • 閉じるアイコン:オプション

通常、ChipGroupではなく独立したChipDrawableとして利用する際に指定します。

entryentry_filtered

最後に android:textAppearance をセットしていますが、これはSupportLibraryの時はセットしなくても問題なかったので、今後正式リリース版が出る場合には不要になるかと思います。

(セットしなかった場合、IllegalArgumentExceptionがコールされます。)

11行目、android:textについては、SupportLibraryでは app:chipText(setChipText) でしたがdeprecated になっています。

通常のandroid:text(setText)を使うようにしましょう。

 

リスナーも豊富に用意されておりsetOnClickListener, setOnCheckedChangeListener, setOnCloseIconClickListenerと、チェックや閉じるボタンに対応したリスナーが用意されています。

なお、setOnCloseIconClickListenerについては、コード中の実態はOnClickListenerとなっており、XMLから指定はできませんのでご注意ください。

試しに実装してみます。

次のような画面になります。

activity-MainActivity-09052018123549

setOnCloseIconClickListenerもKotlinのコード上で実装してみましょう

閉じるボタン(✕ボタン)をタップすると、ちゃんとViewがGONEになりました。

まとめ

実装自体はRadioButtonに形が似ていて、直感的で使いやすいものになっていました。

Chip/ChipGroupはまだ正式リリースはされていませんが、タグの表示など、活用できるシーンは多いかと思いますので、正式リリースが楽しみですね!


2018年09月3日

furusin

AndroidでKotlin Coroutinesを使ってみる

こんにちは。ピクトリンク事業部の古川です。

Androidでは従来ReactiveXが主流ですが、最近話題になっているCoroutinesを使った非同期処理の実装について解説します。

Coroutinesとは?

よく誤解されますが、CoroutinesとReactiveXは全くの別物です。

ReactiveXは非同期処理をストリームで実施するためのものですが、

Coroutinesは、「特定のスレッドに束縛されない、中断可能な計算処理インスタンス」です。

「特例のスレッドに束縛されない」ため、Androidでは非同期処理に用いられることが多いです。

そのためReactiveXとの比較で語られることが多いですが、性質が異なることを意識しておいてください。

Kotlinの公式ドキュメントに

「Coroutines simplify asynchronous programming by putting the complications into libraries.」(コルーチンは非同期処理をシンプルに書けるようにする)

と書いているのも誤解を呼ぶ要因の一つかと思います…

 

Kotlin Coroutinesを導入する

利用するにはbuild.gradleに情報を追加します。

また、Experimentalですので、その情報も追加します。

使い方

今回はサンプルとして、GitHubのAPIをRetrofitでコールしたレスポンスを画面に表示するアプリを作ってみます。

事前準備

RetforitでAPIを叩くために、InterfaceとModelを準備します。

実際に使ってみる

次に、このAPIを叩くメソッドを用意します。今回はViewModelに実装します。

fetchUserメソッドの1行目が最も重要な部分です。

まず返却値の型としてUserをDeferredで返します。ReactiveXだとSingle<User>になると思います。

async(CommonPool)はコルーチン内をスレッドプールで実行する、という理解でいいと思います(こちらを参考に)

後は通常通り、userを返却してあげているだけです。

それでは、このメソッドを呼び出してみます。

単純に「処理開始時にダイアログを表示し、終わったら画面に反映して閉じるだけ」の処理をしています。

launch(UI)は「UIスレッドで実行してね」という意味になります。

ここで .await() を呼んでいますが、これは「この処理が終わるまで続きの処理は awaitする(待つ)」という意味です。

最後に、画面に表示するXMLと画面イメージです。

activity-MainActivity-08302018161310

まとめ

非常に簡単ではありますが、以上でCoroutinesを試してみることができました。

完全にReactiveXをCoroutinesに置き換えることはまだまだ難しいとは思いますが、ReactiveXよりも考えることが比較的少なく、実装も容易ですので

今後はCoroutinesも選択肢のひとつになっていくと思います。

 


2018年08月23日

furusin

BottomAppBarにめり込んだFloatingActionButtonを設置する

こんにちは。ピクトリンク事業部の古川です。

今回は、Google IO 2018アプリで突如現れて衝撃的だった、BottomAppBarにめり込んだFloatingActionButtonの実装方法を紹介します。

このようなレイアウトです。

fabWithBottonAppBar

下部のView(ここではおそらくBottomAppBarのみ)にFloatingActionButtonがめり込んでいて、被る部分はうまく避けられています。

今回の最終形態は次のような画面を目指します。

bottomnavigationviewsample-MainActivity-08212018170527

事前準備

app/build.gradleに必要なものを追加します。

 

BottomAppBarを設置する

今回実装したい方法を実現するには、BottomAppBarを利用します。

また、BottomAppBarはCoordinatorLayoutを親に持つ必要があることに注意してください。

ここまでで、次のようなとてもシンプルな画面が完成しました。

bottomnavigationviewsample-MainActivity-08212018173254

ちなみに

の「56dp」は、Google IO 2018アプリBottomNavigationViewの高さを参考にしました。

Material Design Guidelineにも56dpにするように指定されています

FloatingActionButtonを設置する

次に、めり込ませるFloatingActionButtonを設置します。

重要なのは

この部分です。

この1行だけで、BottomAppBarによしなに設置してくれます。

これだけで、BottomAppBarにFloatingActionButtonがめり込みました。

bottomnavigationviewsample-MainActivity-08212018173937

ちなみに、BottomAppBarの

を “end” に変えると、FloatingActionButtonが右側に設置されます。

bottomnavigationviewsample-MainActivity-08212018174105

おまけ

これだけだとシンプルすぎるので、BottomAppBarにBottomNavigationViewを追加します。

まずはBottomNavigationViewで表示するためのメニューを res/menu/bnv_menu.xml に用意します。

次に、BottomNavigatoinViewをBottomAppBarの中へ追加します。

これで次のような画面が完成しました!

bottomnavigationviewsample-MainActivity-08212018170527

BottomNavigationViewのItemが選択された時に画面(Fragment)を切り替えたい場合は次のようにします。

まとめ

とても簡単に実装できました!

これをうまく活用すれば、リッチでかっこいい画面が作れるかもしれませんね!


2018年06月25日

furusin

フリュー主催の勉強会(京都Devかふぇ#2)を開催しました!

こんにちは。ピクトリンク事業部の古川です。

前回に引き続き、フリュー主催の勉強会を開催しましたのでご報告します。

前回のレポートはこちらから

京都Devかふぇ#2 〜WWDC & Google IO総復習会〜

今回も30名以上とたくさんの方々にご参加頂きました!

新たな取組みとして「突発LTやりたい人がいたらどうぞ!」としてみました。

実際には手は上がらず私が登壇しましたが、発表における門扉を広くできたらなと考えています。

 

勉強会の様子

15分発表枠

トップバッターは弊社の足立より、WWDC 2018 のまとめを発表しました。

IMG03135

WWDCの情報は日本語では意外と多くなく、情報を欲している方が多かったようで、皆さん食い入るように聴かれていました。

発表資料はこちら

 

2人目は @kwmt27 様より、Google IO 2018で発表されたNavigation Architecture Component についての発表でした。

Navigation Architecture Component(京都Devかふぇ バージョン) from Yasutaka Kawamoto

実際にGoogle IOに参加されただけあって、非常にわかりやすく、かつ深く解説されていました!

XcodeのStoryboardに似ており、注目されているコンポーネントです。

 

3人目は@AkihiroTokai 様より、実際にGoogle IO 2018に参加されたレポートの発表でした。

現場の写真をたくさん見せて頂き、当日の臨場感をたくさん感じられる発表でした!

LT大会

1人目は弊社の森嶋より、WWDCで発表されたiOS12におけるUITextContentTypeについての発表でした。

IMG03137

ユーモアを交えた発表で、会場からは笑いがあり、LT大会ならではな感じがあってとてもいい雰囲気でした!

UITextField iOS12 from kenta morishima

最後は私がGoogle IOでも会場で実際に触る場所が設けられた、Google Codelabsを実際に触ってみた感想について発表しました。

意外とハマり所もありますが、非常に良いツールですので皆さんにも触ってみて頂きたいです。

Google Codelabsをやってみた from furusin

 

懇親会の様子

 

簡単ですが食事を用意し、前回に引き続き好評頂きました!

IMG_20180615_195730749

IMG_20180615_195711721

今回から、ティーンズやソフトドリンク派な皆さん向けにステッカーを用意しました。

IMG_20180615_200501595

これで間違ってお酒を勧めてしまい「あああ・・・すみません・・・」を減らす対応ができました。

まとめ

参加した皆さんもたくさんTwitterでツイートしてくださり、とても盛り上がった勉強会となりました!

懇親会でお話した方から「とても楽しいからまたやってほしい!」というお声を頂きましたので、

是非ともまた開催したいと思います!