【解説】開発ライブ実況 #6 メルカリのUIをJetpack Composeで再現してみよう (メルペイAndroidエンジニア) #mercari_codecast

Author:
KikumaHideyuki
【解説】開発ライブ実況 #6 メルカリのUIをJetpack Composeで再現してみよう (メルペイAndroidエンジニア) #mercari_codecast

Merpay Advent Calendar 2020 の5日目は、メルペイ Android Engineer の @hidey がお送りします。 また、このブログは、先日おこなった開発ライブ実況* イベントのまとめ記事でもあります。

  • 開発ライブ実況とは、コーディングの様子を、開発者本人と実況者がライブ実況するイベントです。使っている言語、エディタ、ドキュメントの見方、テストの書き方などを、実況を聞きながら見ることができます。 プレイリスト (過去全ての開発ライブ実況動画)

実況内容

メルカリのマイページ画面Jetpack Composeで実装してみる

なぜこの内容にしたのか

Androidで開発ライブ実況の形式でやるならば

  • 実装が進んでいく様子が見ていてわかりやすい
  • せっかくなので自分にとっても新しいことをやってみたい

という2つを満たせるようにしたいと思い、Jetpack Composeでなにか実装してみようと決めました。 また、どんな画面を実装するかは、サンプルっぽい画面よりも実際のプロダクトに近い方がいいな、と考えてある程度シンプルなメルカリのマイページ画面にしました。(20分だと思ったより進められなくてヘッダ部分だけになってしまいましたが)

実装のポイントなど

今回の実況中で実際にJetpack Composeで実装する場合によくありそうな部分としては、実況時に盛り上がった画像を丸く切り抜くところと、Jetpack Composeにはない既存のViewであるRatingBarをCompose内で使うところだと思います。 画像を丸く切り抜くのは今までは外部ライブラリを利用したり、丸くするための工夫が必要でしたが、Jetpack Composeでは Modifier に clip(CircleShape) と書くだけでよく、非常に簡単に実装出来ました。 また、RatingBarを使うところはJetpack ComposeのViewとして用意されていない既存のAndroidのViewや自分たちの作ったCustomViewを簡単にJetpack Compose上で扱うことが出来ることが見られます。

ライブ実況動画

https://youtu.be/zYin3UiDBjQ

参考URLリンク

おわりに

ご視聴、ご一読ありがとうございました。今回のイベントを見た方がなにか新しい発見や知見などを得ることが出来ていたら嬉しいです。 今回のイベントの前までJetpack Composeはチュートリアルを触った程度だったので、個人的にもJetpack Compose内での既存のAndroid Viewの使い方など新しい知見を得ることが出来てやってよかったと感じています。 また、開発ライブ実況をやってから今日までの間に Android Office Hours #1 Jetpack Compose、Jetpack色々回 というイベントもありました。こちらでは今後Jetpack Composeが流行るのか? なぜそうなのかといった話などが聞けて面白いので興味のある方は是非見てみてください。

メルペイではミッション・バリューに共感できるAndroidエンジニアを募集しています。一緒に働ける仲間をお待ちしております。 https://mercari.wd3.myworkdayjobs.com/ja-JP/mercari_external/job/Roppongi/Software-Engineer–Android–Merpay-_JR-000000019#path=

明日のMerpay Advent Calendar 2020 執筆担当は、 iOS Engineer の kenmaz さんです。引き続きお楽しみください。

Related article