※ この記事は『ぼっちブログ Advent Calendar 2014』の12月13日分のエントリとして登録しています。ぼっちなので、ただ一人で興味のあることを気の向くままに書いています。
————

layout_weightを使った均等配置について、いつも「あれ？ どうやるだっけ」ってなるので、メモです。

やりたいこと

layout_weight=1をそれぞれのImageViewに設定して、横方向に均等な大きさで配置したい。

ImageViewに「button」という正方形の画像リソースを配置。

ImageView自体は正方形にしたい。

いつもよくやる失敗

上下に不要な空白ができてしまって、「あれ？ どうやるだっけ？」ってなってしまう。

android:layout_weight="1"を設定するだけでは不足なんですね。

コードは下記の通りです。色設定、dp設定はとりあえず直値で(^^;;

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- ２個配置 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">
        <ImageButton
            android:background="#80ff0000"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:src="@drawable/button"
            android:scaleType="centerInside"
            android:layout_weight="1" />
        <ImageButton
            android:background="#800ff000"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:src="@drawable/button"
            android:scaleType="centerInside"
            android:layout_weight="1" />
        </LinearLayout>

    <!-- ３個配置 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">
        <ImageButton
            android:background="#80ff0000"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:src="@drawable/button"
            android:scaleType="centerInside"
            android:layout_weight="1" />
        <ImageButton
            android:background="#800ff000"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:src="@drawable/button"
            android:scaleType="centerInside"
            android:layout_weight="1" />
        <ImageButton
            android:background="#800000ff"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:src="@drawable/button"
            android:scaleType="centerInside"
            android:layout_weight="1" />
    </LinearLayout>
</LinearLayout>

修正方法

各ImageViewに「android:adjustViewBounds=”true”」を設定して、縦横比を維持するように設定します。

そうしたら、やりたいことは実現できました。

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- ２個配置 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">
        <ImageButton
            android:background="#80ff0000"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:src="@drawable/button"
            android:scaleType="centerInside"
            android:adjustViewBounds="true"
            android:layout_weight="1" />
        <ImageButton
            android:background="#800ff000"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:src="@drawable/button"
            android:scaleType="centerInside"
            android:adjustViewBounds="true"
            android:layout_weight="1" />
        </LinearLayout>

    <!-- ３個配置 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">
        <ImageButton
            android:background="#80ff0000"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:src="@drawable/button"
            android:scaleType="centerInside"
            android:adjustViewBounds="true"
            android:layout_weight="1" />
        <ImageButton
            android:background="#800ff000"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:src="@drawable/button"
            android:scaleType="centerInside"
            android:adjustViewBounds="true"
            android:layout_weight="1" />
        <ImageButton
            android:background="#800000ff"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:src="@drawable/button"
            android:scaleType="centerInside"
            android:adjustViewBounds="true"
            android:layout_weight="1" />
    </LinearLayout>
</LinearLayout>

このコードをコピペして、４個配置、５個配置としていけば、下記のようになります。

横幅が広い端末でも均等に配置してくれます。

Tweet

Categorised as: 画面関連