2

概要：ImageButtonの水平方向の行を、画面サイズに合わせて均等に縮小したい。

画面の上部にImageButtonの行があります。さまざまなアクションのために、左揃えのロゴImageButton、次に右揃えのImageButton。

はい、それはHoneycomb / ICSアクションバーのように聞こえますが、コードはFroyoを対象としているため、2.2互換のレイアウトでデザインを実装する必要があります。

プログラムで7インチ以上の画面を表示し、ImageButtonの大きな画像に切り替えます（drawable-xlargeディレクトリは10インチ以上でのみ機能し、drawable-largeは4インチ以上で機能するため）。

これは、携帯電話や10インチのタブレットでうまく機能します。ただし、7インチのタブレットでは、画像が大きすぎてポートレートモードのスペースには収まりません（アプリはポートレートモードにロックされています）。

7インチのタブレットだけに別の画像セットを使用したくないので、画像を縮小するためにさまざまなアプローチを試しました。しかし、画像の間隔が適切でないか、異なるレベルで拡大縮小されているか、一部の画像しか使用されていません。画面に画像が表示されます。RelativeLayout、LinearLayout、android：weightSumを使用して、画像を背景画像、src画像などに設定しました。

編集：実験で気付いたもう1つの癖は、同じlayout_weightを設定すると、レイアウトが機能し、各アイテムの幅が同じになることでした。一部のアイテムの幅を変えたい場合（この場合、最初のボタンを大幅に広くする必要があるため必要です）、他のアイテムと一致しないlayout_weightを設定すると、レイアウトが壊れます。画面に表示されるアイテムは1つか2つだけで、残りは押し出されていると考えられます。

これが私が使用しているレイアウトです。これはこれまでのところ私の最高です。10インチのタブレットや携帯電話でうまく機能し、7インチのタブレットでもほとんど耐えられます。ただし、ロゴ（ボタンと同じ高さで約2.5倍の幅）は、他のボタンよりも著しく高くなっています。レイアウトを改善するための提案はありますか？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/actionBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0"
    android:padding="5dip"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:background="@drawable/action_bar_bg"
     >

    <ImageButton
         android:id="@+id/logoButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:background="@null"
         android:src="@drawable/save_logo_03"
         android:padding="2dip"
         android:adjustViewBounds="true"
         android:scaleType="centerInside"
          />
     <View
         android:id="@+id/spacer"
         android:layout_width="50dip"
         android:layout_height="1dip"
         android:layout_weight="1"
         android:visibility="invisible"
         />
     <ImageButton
         android:id="@+id/listButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:src="@drawable/list_button"
         android:background="@null"
         android:adjustViewBounds="true"
         android:padding="2dip"
         android:scaleType="centerInside"
          />

     <ImageButton
         android:id="@+id/mapButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:background="@null"
         android:src="@drawable/map_button2"
         android:adjustViewBounds="true"
         android:padding="2dip"
         android:scaleType="centerInside"
          />

     <ImageButton
         android:id="@+id/ltoButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:background="@null"
         android:src="@drawable/lto_button"
         android:adjustViewBounds="true"
         android:padding="2dip"
         android:scaleType="centerInside"
          />

     <ImageButton
         android:id="@+id/searchButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:background="@null"
         android:src="@drawable/search_button"
         android:adjustViewBounds="true"
         android:padding="2dip"
         android:scaleType="centerInside"
          />

</LinearLayout>
4

2 に答える 2

1

残念ながら、最終的には、画面のサイズに応じてボタンのサイズをプログラムで変更する必要がありました。

私の最終的なレイアウトは次のようになりました（消毒済み）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0"
    android:padding="5dip"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:background="@drawable/action_bar_bg"
     >
     <ImageButton
         android:id="@+id/logoButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:adjustViewBounds="true"
         android:src="@drawable/logo"
         android:scaleType="centerInside"
          />

     <View
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:layout_weight="1"/>

     <ImageButton
         android:id="@+id/button1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:src="@drawable/button1"
         android:scaleType="centerInside"
         android:adjustViewBounds="true"
         />

     <ImageButton
         android:id="@+id/button2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:src="@drawable/button2"
         android:scaleType="centerInside"
         android:adjustViewBounds="true"
          />

     <ImageButton
         android:id="@+id/button3"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:src="@drawable/button3"
         android:scaleType="centerInside"
         android:adjustViewBounds="true"
          />

     <ImageButton
         android:id="@+id/button4"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:src="@drawable/button4"
         android:adjustViewBounds="true"
         android:scaleType="centerInside"
          />

</LinearLayout>

空のビューが利用可能なスペースを埋め、他のボタンを画面の右側に押し上げていることに注目してください。

コードでは、画面サイズを確認しています。>= 7" と思われる場合は、より大きな画像に切り替えます。 >= 7" であるが < 9" と思われる場合は、プログラムで画像のサイズを変更します。それが機能するのにちょうどいい数を考え出す. もっと多くの画像があったり、それらが変わったりしたら、それを繰り返さなければならないだろう. 私はそのような柔軟性のない解決策を誇りに思っていませんが、機能するものを他に見つけることができませんでした.

于 2012-06-11T23:10:11.910 に答える
0

これは私が持っているものです:

特定のケースでは、アプリのレイアウトとボタンのサイズは次のものに依存していると言えます。

  • モバイル デバイスの画面サイズ/解像度。
  • 行内のボタンの数。

2 つのアプローチをお勧めします。

  • RelativeLayoutとweightタグを使用してレイアウトを実装します。これらのレイアウトを使用すると、柔軟なレイアウトを非常に簡単に作成できます。
  • この投稿の最後のスニペットのような DisplayMetrics クラスを使用してプログラムでボタンのサイズを定義し、ボタンの数の定数値を定義できる追加の .xml ファイル (integer.xml など) を使用します。

このスニペットでは、dmはデバイスの解像度を保持する構造体です。 

DisplayMetrics dm = new DisplayMetrics();
context.getWindowManager().getDefaultDisplay().getMetrics(dm);

それがあなたを助けたことを願っています! :)

于 2012-06-01T23:41:33.137 に答える