こものAndroidメモ

Androidアプリの開発メモブログ!!

layout_weightを使って均等配置すると上下に隙間ができる —

※ この記事は『ぼっちブログ 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">
    <!-- 2個配置 -->
    <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>

    <!-- 3個配置 -->
    <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">
    <!-- 2個配置 -->
    <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>

    <!-- 3個配置 -->
    <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>

 

 

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

均等配置

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

 



Categorised as: 画面関連



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です