Android Studio+Kotlinを使用したアプリケーション構築についてです。複雑なビューの表現についての作成法などをLTしました。

1. ANDROIDアプリ
の構築と実践
2019.03.05 TUE

2. 前回のおさらい
• RailsとAndroidStudioフレームワークの差異のお話
• RailsのアーキテクチャはMVC, AndroidはMVP, MVVMなどが存在す
る。(Railsはまだあるかも？)
• ビューの描画方法も違う。htmlのテンプレートエンジン(slim, haml)
などが使えることに対して、Androidはxmlでビューを作成してい
く。

3. お品書き
• 実践1 ビューを作成しよう
• 実践2 APIを叩こう
• 実践3 端末差異を考慮したビューの作成

4. 実践1 ビューを作成しよう
• htmlのように役割のタグが存在する。
-> TextView, Button, Navigation Bar …
• Viewクラスを継承して独自のViewの部品を
作成する事ができる。
• 現在AndroidのView内ではネストした親子
関係は推奨されておらず、部品単位での参
照を持って構成される
-> Constarin Layout

5. ACTIVITY_FIRST_VISIT.XML
アニメーションを付加す
る属性のタグ
親子関係は推奨されていないものの、
デザインの都合上カラムレイアウトを構
築。
デザインのスタイルも独自のPREFIXで指定します。
（ただし部品によって使えるスタイルは変わってきます）
Point1
Point2

6. ビューの設計にこだわる理由
• 端末のスペックの差異を吸収するため。
現在ユーザーが集中している端末は下記の通り
弊社の検証機
PIXEL3 6.3インチ
ユーザーが最も多いと見られるNEXUS 5X 5.2インチ
※ NEXUS5Xについては４年以上前に販売されたスマホ
で、店頭には並んでいないものになる…

7. ビューの設計にこだわる理由
• 会社用端末Pixel3XLと現時点で1番利用のあるNexus5Xでは、インチ
数に0.9の差がある
多様な画面サイズに対応するため、決め打ち(数値指定)
でのコーディングは避けなければならない…
• UXに係る部分はコンバージョン・離脱に大きく関係性がある
-> UXがプロダクトの差別化を握る になる。
カラムの崩れ
フォントのサポート VIEWPORTの問題
期待通りのアニメーション
がつくか？

8. 実践2 APIを叩こう
• 非同期で取得したデータを表示する
• ただし取得中の項目に関してはイン
ジケータを出力
• リクエスト完了時、値が取得できな
かったものに関してはアイコンを表
示する
ユーザーの健康データ表示の要件

9. POINT
• Activityの肥大化を防ぐ為にロジック
の切り分けが必要。
• 同じ事を繰り返す処理が多数あるが、
微妙に部品の差異がある。（APIの
パスや、データの整形処理など）
• 非同期の処理はメインスレッド内で
個々のスレッドとして開始され、失
敗成功に関わらず冪等性が担保され
なければならない。

10. ACTIVITY CODE
LATE INIT!
ACTIVITYで起動する
VIEWをチョイス
参照のたびに別々のイン
スタンスを生成する
GETTER

11. ACTIVITY CODE
取得したデータを設定する
部品と単位のテキスト
VIEWはメインスレッドでし
か参照できないため、
ACTIVITYでVIEWを作成して
ロジックの処理に渡す

12. REQUEST
通信の結果を変数化
VARARGは特定の修飾子をつける事で
SPLATのように受け渡しが可能

13. 実践3 端末差異を考慮したビューの作成
背景画像を設定することも出来るが、
縦の長さで位置が変化するかもしれない
上の要素が大きくなったら、どちら
のスクロールを優先させるか？

14. ラウンドの表現
• Viewクラスを継承して半円を描画する。
• Canvasクラス（Viewに自由描画ができる。html
のCanvas要素に似ている印象）に四角形と楕円
を追加したものをPathクラスで描画している。

15. スライドカードの表現
• 使うものはRecylerView, ListAdapterとMotionLayout（or BottomSheet）
RecyclerView ListAdapter
BindingData
（表示しているタスクの1行分ListAdapter）
MotionLayout
LinearLayout
1つのViewに対して
動きの演出をする。

16. 出典・引用
• スマートデバイススペック
https://www.gsmarena.com/google_pixel_3_xl-9257.php
https://www.ymobile.jp/lineup/nexus5x/
• 半円の描画
https://stackoverflow.com/questions/31705870/how-to-draw-a-
half-circle-in-android