自分用のプライベートなよくあるレビュー入力アプリです
Google Mapのレビューを書いてる時にふと思いついてApp Storeに該当するものは無かったので作ってみました
はじめはNavigationで画面遷移する構成で作成してたけど、せっかくなのでGoogle MapみたいにBottomSheetで詳細を表示するUIを採用してみました
あとどこかで見たようなUIを再現して部品化したりと以外に手間がかかりました
・Tab + Pager
Google TodoみたいにTabが追加できるTabとPagerが連動しているやつ
Tabの下線がfillMaxWidth()指定しても横いっぱいに描画されないので独自に描画したりちょこっと工夫してます
・画像のサムネイル
Google Filesの画像をLongPressしたら選択されるUIを再現した部品を作ってLazyRowで表示
選択アニメーションや背景色表示などのため階層化したレイアウトなどちょこちょこ工夫
画像はCoilでネット上のイメージのurlと端末内ファイルのuri両方に対応したImageコントロールで表示
・拡大縮小可能な画像プレビュー
Google Filesみたいに画像を選択したらピンチイン/アウトで画像を拡大縮小できるUIを再現
ベースの部品の拡大縮小可能なBox(レイアウト)を作成
ドラッグ移動の領域制限だけ再現してないけど逆に制限しなくていいかも
ダブルタップ時の拡大縮小のアニメーションのスピートや拡大率は自分好みに調整
・☆アイコンスライダー
よくあるレビューのレート(☆)を選択するコントロール
実は本体は透明なスライダー
ベースの部品のアイコンスライダーを作成してせっかくなので選択したら回転するアニメーションを追加
アイコン数も任意に指定できるようにしました
初期の未設定状態だと☆1つけるのもうんぬんができますｗ
・レビューのリスト
データはRoomで管理してます
内部的にはPagingと検索に対応していますが検索のUIは未実装です
あとデータの削除にワンクッション入れるためのdeleteフラグもデータテーブル上には実装してますがUIの実装の工数不足のため先送りに…
将来的に名前順や更新順ソートを実装を想定して作成/更新日時もDBに保存してます
リストに表示されているカードは画像のサムネを表示してます
画像が縮小で解像度が下がってしまってイマイチだったので下がらないように画像の一部が表示されるようにしてます
・BottomSheet
SheetDragHandleは既存のものより高さを小さくしたいので独自に実装してます
BottomSheetがExpandedしたら非表示にしたりSheetの表示の切替えタイミングなど工夫してます
・画面の階層
Navigation – BottomSheetScaffold(TabPager(LazyColumn)) – TransformableBox(画像プレビュー)/Modal系
となっていて画面の制御がやや複雑になってます
TransformableBoxだけBackHandlerに対応して閉じれるようにしました
BottomSheetもBackHandlerに対応したかったけどうまく実装できずで後の課題に残しました…
