android - 複数のサイズ要素に対応する Android UI 設計

Question

ストックPIN入力画面に似たPIN画面で始まるアプリを構築していますが、問題は、すべての種類の電話でデザインを機能させることができないことです。簡単にするために、ポートレートモードについてのみ話しましょう（以下のレイアウト xml をリンクします):

画面の小さいデバイスでは、ボタンのサイズを dp 単位で小さくして、ボタンが画面の端にはみ出さないようにする必要がありました
大型デバイスではボタンが大きくなるため、画面の中央にボタンが密集することはありません
サポートが必要な古い (2.3) デバイスがいくつかあります。そのうちの 1 つは 5 インチのタブレットで、ボタンがぶら下がっています (サイズ係数が大きなカテゴリに分類されるため)。ただし、通常のサイズにする必要があります。幅が最小のグループについては知っていますが、それは 3.2 以上のデバイスのみです。

形状やサイズに関係なく、すべてのデバイスである程度一貫した外観にしたいと考えています。要素の動的なサイズ変更を考えましたが、サポートがなく、AbsoluteLayout クラスに近づきたくありません。

誰かが私のフラストレーションを共有していますか、または良い解決策を開発しましたか?

私が使用しているレイアウトファイル：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="fill_parent" >

    <TextView android:id="@+id/enter_pin"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:text="@string/DIALOG_ENTERPIN" />

    <EditText android:id="@+id/pin_box"
              android:layout_below="@id/enter_pin"
              android:layout_centerHorizontal="true"
              android:layout_width="fill_parent" />


    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:layout_below="@id/pin_box"
                 android:layout_width="fill_parent"
                 android:layout_height="wrap_content" >

        <TableRow android:gravity="center" >
            <Button android:id="@+id/pin_1"
                    style="@style/pinbutton"
                    android:text="1" />

            <Button android:id="@+id/pin_2"
                    style="@style/pinbutton"
                    android:text="2" />

            <Button android:id="@+id/pin_3"
                    style="@style/pinbutton"
                    android:text="3" />    
        </TableRow>

        <TableRow android:gravity="center" >
            <Button android:id="@+id/pin_4"
                    style="@style/pinbutton"
                    android:text="4" />

            <Button android:id="@+id/pin_5"
                    style="@style/pinbutton"
                    android:text="5" />

            <Button android:id="@+id/pin_6"
                    style="@style/pinbutton"
                    android:text="6" />
        </TableRow>

        <TableRow android:gravity="center" >
            <Button android:id="@+id/pin_7"
                    style="@style/pinbutton"
                    android:text="7" />

            <Button android:id="@+id/pin_8"
                    style="@style/pinbutton"
                    android:text="8" />

            <Button android:id="@+id/pin_9"
                    style="@style/pinbutton"
                    android:text="9" />
        </TableRow>

        <TableRow android:gravity="center" >
            <Button android:id="@+id/pin_back"
                    style="@style/pinbutton"
                    android:text="‹" />

            <Button android:id="@+id/pin_0"
                    style="@style/pinbutton"
                    android:text="0" />

            <Button android:id="@+id/pin_ok"
                    style="@style/pinbutton"
                    android:text="OK" />
          </TableRow>
     </TableLayout>
</RelativeLayout>

アップデート：

サイズグループごとに異なるレイアウトを既に使用しており、dp と sp のみを使用しています。参考までに、一般論を書くことは控えてください。それでも問題は細部にあり、サイズビンは適切に選択されていません。

score 2 · Accepted Answer

はい、Android の UI 設計は、アプリ開発で最も退屈でイライラする側面の 1 つです。

この問題に対処するにはいくつかの方法があります (いずれも迅速かつ簡単ではありません)。コードで物事をレイアウトし、さまざまな密度/解像度を処理します。

それ以外の場合は、レイアウトを複製しますが、値を調整し、製造元が指定した画面サイズに応じて OS が自動的に選択する別のレイアウトフォルダーに保存します。

などを利用してくださいlayout, layout-small, layout-large, layout-xlarge, layout-xlarge, layout-land。このようにして、基本的にレイアウトを各ディレクトリにc&pし、その方法で特定の寸法を変更できます。さらに、さまざまなディメンションを多数再利用している場合は、dimensions.xml または styles.xml を指定して、それらを繰り返し入力する必要がないようにします。

http://developer.android.com/guide/practices/screens_support.html

は非常に優れたリソースですが、一般的に答えは、複数のサイズの UI デザインには多くの作業が必要だということです。

score 2 · Accepted Answer

要素の動的なサイズ変更を考えましたが、サポートされていません

これは何を意味するのでしょうか？動的なサイズ変更は、多かれ少なかれ Android レイアウトの基礎です。密度に基づいた相対的なサイズ設定について言及したように DP を使用できlayout_weightます。中身。最初に私が提案するのは、ボタンに/属性の両方を与えることです。そうすれば、大きなデバイスではボタンがばかげたほど大きくなることはありませんが、小さなデバイスでは小さすぎて押せなくなります。wrap_contentmatch_parentmin_widthmin_height

レイアウトファイルのいくつかの異なるバージョンを使用してもかまわない場合の代替方法は、ディスプレイの一般的なサイズに応じてレイアウトがわずかに異なる、より多くのリソース修飾レイアウトフォルダー (例: 、など) を使用することですlayout-large。layout-small

編集: OK、簡単なアイデアです。PIN パッドについては、レイアウトエディターでこれを確認することさえしませんでしたが、これはおそらくこれを行う方法の基本的なアイデアです。には maxWidth 属性または maxHeight 属性がないため、およびLinearLayoutのリソースフォルダーを作成し、そのサイズの画面用の PIN パッドの小さいサイズをハードコーディングします。layout_sw600dplayout_sw720dp

<LinearLayout
    android:id="@+id/pin_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:max_width="480dp"
    android:max_height
    android:layout_margin="20dp"
    android:orientation="vertical"
    >
    <LinearLayout
        android:id="@+id/pin_row1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        >
        <Button
            android:id="@+id/num1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="1"
            />
        <Button
            android:id="@+id/num2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="2"
            />
        <Button
            android:id="@+id/num3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="3"
            />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/pin_row2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        >
        <Button
            android:id="@+id/num4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="4"
            />
        <Button
            android:id="@+id/num5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="5"
            />
        <Button
            android:id="@+id/num6"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="6"
            />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/pin_row3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        >
        <Button
            android:id="@+id/num7"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="7"
            />
        <Button
            android:id="@+id/num8"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="8"
            />
        <Button
            android:id="@+id/num9"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="9"
            />
    </LinearLayout>
</LinearLayout>

score 0 · Accepted Answer

一般的には、dip または dp を使用してボタンまたはその他のビューのサイズを定義し、sp を使用してテキストのサイズを定義します。そうすれば、アプリはほとんどの画面に収まります。

android - 複数のサイズ要素に対応する Android UI 設計

アップデート：

3 に答える 3

Related

Reference