Furyu
[フリュー公式]

Tech Blog

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

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でツイートしてくださり、とても盛り上がった勉強会となりました!

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

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


2018年06月4日

furusin

フリュー主催の勉強会を開催しました!

IMG02937

 

こんにちは!ピクトリンク事業部サービス開発2課の古川です。

5/25(金)に、先日告知していました勉強会を開催しました。

30名程度集まれば大成功かな、と思っていたところに55名もの方が参加してくださり大盛況となりました。

また、ハッシュタグ #KyotoDevCafe でもたくさんツイートがありました。

今回はそのレポートをお送りします。

勉強会の様子

大盛況となったことから、多少席が詰まってしまったことは申し訳ない限りです。

ですが皆さん発表者のお話を食い入るように聞かれていました!

こちらは始まりの挨拶の様子です。

IMG_20180525_190353

初めてAndroidアプリを作ってみた話やiOSのニッチな話、

Swiftをアプリからサーバサイドまで使い倒した話まで幅広く発表いただきました!

懇親会の様子

簡単ですが弊社よりケータリングを用意しました!

IMG02949

カツサンドが非常に好評でした!

運営メンバーも美味しくいただきました。

また、懇親会中に弊社荒木より突発的LTがありました!

IMG_7554

このLTは本当に突発的でしたが意外とウケていたようで、非常に好評でした!

最近流行りのVRに関した発表で、Daydreamを持ってきて装着していました。

 

全体を通して

今回は「モバイル」という少し広めのテーマでの開催となりましたが、Android/iOSのバランスがが丁度よく、開場も盛り上がっていました。

また、難易度もコアな発表から初心者向けのものまで幅広く、多くの方に楽しんで頂ける内容になり、

運営として非常に嬉しい限りです。

初めての開催でしたので拙い部分もあったかと思いますが、どんどん回数を重ねてより良い勉強会にしていきたいと思っております。