UI をブラッシュアップ

[github-actions]

本アプリの UI は極めてシンプルです。これでも特に問題はありませんが、やはりいまいち映えないです。使いやすさが損なわれない前提で、UI をブラッシュアップしてください。方向性（エレガント、ゴージャス、モダン等）は問いません。また Jetpack Compose の導入も OK です。

[kokoichi206]

気になるところメモ

DarkMode の時に文字が読みにくい

文字の色と背景の色が近いせい

[kokoichi206]

Jetpack Compose

知らぬ間に bom なるものが出ていた。。。

とりあえず元の UI に近いものを再現する

	MainView	DetailView
Before
After (light)
After (dark)

メモ

なるほど、Compose にも ConstraintLayout あるのか。
なんか宣言的 UI に Constraint 使うと逆に読みにくくならんかな？
（SwiftUI, Flutter, React とかに似たような概念あるのかな？）

テスト

既存テストのリプレイスはできたが、以下の問題ある。。。

Links

• クイック スタート
• reference: compose
• destination のパラメーターに複雑な型を渡すのは推奨されてない
  • id のみ渡して SSOT から引っ張ってこい、ということらしい
  • Json（という文字列）にして1回やりとりして、そっから復元してもよかったけど、とりあえずの感じで全パラメータ1つずつ渡すことにする
    • パラメータが増えた時に修正しぬけど。。。
• SAFE COMPOSE ARGUMENTS
  • これやってみたい
• Compose Testing Cheat Sheet
• material icons

[kokoichi206]

System UI

Top Bar の色が、今黒色で固定されている（ Light, Dark どちらも）。
ダークモードは良いが Light ではちょっと強い気がするので、これを変更させるようにしたい。

accompanist のやつ使う

アイコンクリック時の影（ripple）について

こちらの記事 参考にして、clickable を以下のように変更

.clickable(
    onClick = {
        onItemClick(str)
    },
    indication = rememberRipple(bounded = false),
    interactionSource = remember { MutableInteractionSource() }
)

bounded パラメータの持つ意味。

bounded - If true, ripples are clipped by the bounds of the target layout.
Unbounded ripples always animate from the target layout center,
bounded ripples animate from the touch position.

Test

However, the unmerged tree contains '1' node that matches. Are you missing `useUnmergedNode = true` in your finder?

semantics について、ちゃんと読みたい。。。

https://developer.android.com/jetpack/compose/semantics?hl=ja

[kokoichi206]

横画面どうするか問題

Jetpack compose にした段階で、詳細画面で横画面にした時に情報が見切れてしまう問題が復活してしまった。

これをどうするかを考える。

案

• 横画面時においても、xml の時と同様スクロールさせるようにする
  • Bottom Bar 増えたから微妙かも
    • 詳細画面では Bottom Bar 消してもいいかも
• 横画面独自のレイアウトを作る
  • 横分割して、画像を左半分・情報を右半分など
• そもそも縦画面で固定する！
  • 意外とそういう仕様になってる他アプリ多そう

調査

所感

AbbBar + BottomBar をどちらも表示するレイアウトにおいては、横画面のメインスペースが非常に小さくなる。
（DropBox,）
よって、そのままではあんまり見せたくないな。。。

• 横画面時も縦画面と同じレイアウト（向きのみ変更）
  • Kindle 本の内容描画時
  • DropBox
  • Line (タブレットなど画面幅によっては別レイアウトだった気する)
  • Gmail
• 縦画面固定
  • Kindle 一覧ページ
  • PayPay
  • MoneyForward
  • メルカリ
• 横画面用の別レイアウト
  • スマホサイズでこれを実装してるアプリはなさそうかも

動画や横開きの本以外では、あまり横で使うケースやメリットを感じない
→ 縦画面で固定する方針で進める

Links

• docs: core-app-quality
• How to fix layout orientation to vertical?
• Orientation on Jetpack Compose