大きいスクリーンの小さいもの

タブレットとfoldablesは、特に中規模の多機能電話と比較されるとき、スクリーン不動産をたっぷり提供します.証明されたユーザーインターフェイスのデザインパターンの多くは、例えば、大規模なデバイス上のアプリケーションのコンテンツを手配するのに役立ちます.しかし、あなたのアプリケーションがすべてのスペースを必要としない場合はどうですか?この記事はあまりにも多くの部屋に対処する方法を探る.
私が何を話しているかという考えを得るために、以下のスクリーンショットを見てください.

Time Calculator を追加し、時間、分、および秒減算します.それ以上.だから、当然大きな画面を利用することはできない.つの画面モードでは、ユーザーインターフェイスが微細に見えます.ここではアプリは2つの画面に見える方法です.

デバイスのヒンジは、一部のユーザーインターフェース要素の部品を妨害する.しかし、それはここの主な問題でありません.私は何を参照している:アプリは、画面サイズを尊重しようとするが、途方もなく大きなボタンでこの結果.
これは質問をお願いします.
このような巨大なバーチャルダイヤルパッドでは、追加または減算する時間を入力すると、不快な経験です.より小さなキーは、おそらくより自然で、流暢な入力で結果として生じる運動を減らすでしょう.
よく知られているAndroidアプリからいくつかのインスピレーションを描画しようとしましょう.次のスクリーンショットは、Androidの12 Lを実行してシミュレートされた10インチデバイスから撮影されました.それはタイマーモードで時計アプリを示しています.

仮想キーも多少大きいです.しかし、全体としてのパッドはほとんど中心に見えます.これは時間の計算のための作品かどうかを見てみましょう.

悪くない.
簡単に既存のユーザーインターフェイスを中心にすることができますBoxWithConstraints() :

BoxWithConstraints(
  modifier = Modifier
    .fillMaxSize()
    .background(color = MaterialTheme.colorScheme.tertiaryContainer),
  contentAlignment = Alignment.Center
) {
  Column(
    modifier = Modifier
      .width(min(maxWidth, 600.dp))
      .background(color = MaterialTheme.colorScheme.surface)
  ) {
  …

この方法で最大の幅を設定できます.この例では600個の密度非依存のピクセルがあります.
だから、我々の評決は?我々はこのために行く必要がありますか?左と右に着色されたボックスが特に喜ばない間、ユーザーインターフェースはより膨張しないように見えます.そして、画面の中心に注意を向けることは、悪いことでもありません.

よく、領域が妨げられるかもしれないヒンジを有する装置に.スクリーンショットで見ることができるように、ヒンジは、アプリケーションのメイン領域を分割します.まったく喜ばない.
レシピを直しましょう.

普通のデバイスでは何もしない

コンテンツを妨害するヒンジなしの大きな画面では、ユーザーインターフェイスを水平方向に集中してください

障害物やブロッキングヒンジを持つデバイスでは、ヒンジの片側にユーザーインターフェイスを表示します

Jetpack WindowManagerでは、これは非常に簡単です.まず、モジュールレベルのビルドに実装依存を追加します.Gradleファイル:

implementation "androidx.window:window:1.0.0-rc01"

アクティビティーが作成されると、ウィンドウの制限といくつかのヒンジ関連情報をチェックする必要があります.これは次のようにします.

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  lifecycleScope.launchWhenResumed {
    setContent {
      val li by WindowInfoTracker.getOrCreate(this@TimeCalculatorActivity)
        .windowLayoutInfo(this@TimeCalculatorActivity).collectAsState(
          initial = null
        )
      val wm = WindowMetricsCalculator.getOrCreate()
        .computeCurrentWindowMetrics(this@TimeCalculatorActivity)
  …
  Content(li, wm)
  …

ここに何があるContent() です

@Composable
fun Content(layoutInfo: WindowLayoutInfo?,
            windowMetrics: WindowMetrics) {
  …
  val hingeDef = createHingeDef(layoutInfo, windowMetrics)
  val largeScreen = windowWidthDp(windowMetrics) >= 600.dp
  BoxWithConstraints(
    modifier = Modifier
      .fillMaxSize()
      .background(color =  
         MaterialTheme.colorScheme.tertiaryContainer),
    contentAlignment = if (hingeDef.hasGap and largeScreen)
      Alignment.TopStart
    else
      Alignment.Center
  ) {
    val width = min(
      maxWidth, if (hingeDef.hasGap)
        hingeDef.sizeLeft
      else
        600.dp
    )
    Column(
      modifier = Modifier
        .width(width)
        .background(color = MaterialTheme.colorScheme.surface)
    ) {
      Column(
        …

ご覧のように、私の弾丸ポイントのリストをうまく実行することができますif s. createHingeDef() and windowWidthDp() 小さなヘルパー関数です.それらを見つけることができますhere . 次のスクリーンショットは結果を示します.

これはずっとよく見えると思う.しかし、それはまだ理想的ではありません.何も表示しないので、右の招待はありませんか?

コンテンツの追加
ここでは、表面のデュオエミュレータの電話アプリはどのように2つの画面に見えます:

現在のところ、ヒンジを尊重するのに貧しい仕事をしていますが、追加のスペースで何ができるかを示しています.これは

アクション(ユーザができること)

ヒントまたはトリック

簡単な指示

あなたのアプリケーションの設定ページがある場合は、そこに表示することがあります.しかし、尊重を確立した画面の流れとの相互作用のパターンを尊重してください.また、例えば、関係のない情報や内容を示すことによって、ユーザを迂回することを控える.どんな状況でも、あなたのユーザーが予想しない何かを示すか、提示してください.
どうやってこれを実装するのですか?幸運にもHingeDef クラスも、ギャップの大きさと、右側の領域のサイズが含まれているので、ここで助けることができます.タイム電卓での実装を見てみましょう.

BoxWithConstraints(
  modifier = Modifier
    .fillMaxSize()
    .background(color = MaterialTheme.colorScheme.tertiaryContainer),
  contentAlignment = if (hingeDef.hasGap and largeScreen)
    Alignment.TopStart
  else
    Alignment.Center
) {
  val width = min(
    maxWidth, if (hingeDef.hasGap)
      hingeDef.sizeLeft
    else
      600.dp
  )
  Row(
    modifier = Modifier
      .fillMaxSize()
      .background(color = MaterialTheme.colorScheme.surface)
  ) {
    Column(
      modifier = Modifier
        .width(width)
    ) {
      Column(…) {
        …
      }
      Spacer(modifier = Modifier.height(16.dp))
      Column(…) {
        …
      }
    }
    Spacer(modifier = Modifier.width(hingeDef.widthGap))
    Column(
      modifier = Modifier
        .width(hingeDef.sizeRight)
        .fillMaxHeight()
        .padding(16.dp),
      horizontalAlignment = Alignment.CenterHorizontally
    ) {
      Text(text = stringResource(id = R.string.info1))
      Spacer(modifier = Modifier.height(16.dp))
      Text(text = stringResource(id = R.string.info2))
      Spacer(modifier = Modifier.height(16.dp))
      Text(text = stringResource(id = R.string.info3))
      Spacer(modifier = Modifier.height(16.dp))
      Text(text = stringResource(id = R.string.info4))
    }
  }
}

それで、我々がするすべては、3つの作曲性を加えることですRow() .


結論
小さなユーティリティは本当に大きな画面を埋めるために十分なコンテンツを持っていない可能性があります.あなたは価値が追加の情報を追加することにより、経験を強化することができます.ただし、あなたのアプリケーションのコアアイデアに関連するコンテンツを表示する必要はありません.そして、あなたはちょうどディスプレイを移すために新しいインタラクションパターンを発明することを慎まなければなりません.あなたは小さなツールを書いて、そのような問題に直面しましたか?コメントであなたの考えを共有してください.