横幅に合わせた画像のサイズ調整について

11,478 views
Skip to first unread message

Noriko Iwai

unread,
Jul 6, 2010, 2:12:00 AM7/6/10
to 日本Androidの会
最近androidの実装を始めました。
画像表示でわからないことがあるので、アドバイスいただければと思います。

やりたいことは、携帯ゲームのトップのような画面構成で、
1. タイトル画像
2. ボタン画像
3. テキスト表示
のような順番で1行に1アイテムを縦に並べるイメージです。

ここで、1のタイトル画像を画面の横幅に合わせて拡大したいのですが、このやり方がわかりません。
main.xmlで、LinearLayoutを指定し、その中で1をImageViewとして記述しているのですが、以下のような感じでハマってま
す。

- ImageViewのlayout_widthはfill_parentに設定してそのまま表示すると、画像は原寸サイズで表示されます。
- ScaleTypeをcenter_cropに設定するとイメージは近いのですが、画像の高さが原寸のまま(?)なのか、上下が切れてしまいま
す。
- ScaleTypeをfit_xyに設定すると縦横比が崩れ、adjustViewBoundsをtrueにしても効果がありません。

画面の縦横変換時、それぞれで動的に横幅に合わせたサイズになってほしいと思っています。
イベントリスナを利用し、コーディングでサイズ調整をする方法もあるでしょうが、もし、xml設定ファイルで簡単に設定できるのであれば、そちらを利用
したいです。

# そもそも、ImageViewやLinearLayoutを利用するのが違うのでしょうか。

恐れ入りますが、ご教示のほどよろしくお願いいたします。

Glenn Marintes

unread,
Jul 6, 2010, 2:31:39 AM7/6/10
to android-g...@googlegroups.com
こんにちは!

LinearLayoutのlayout_widthをfill_parentに設定してみましたでしょうか。
LinearLayoutとその中のImageViewのlayout_width=fill_parentにセットする必要かと思います。

よろしくお願いします。

グレン


2010/7/6 Noriko Iwai <noriko.h...@gmail.com>

--
このメールは Google グループのグループ「日本Androidの会」の登録者に送られています。
このグループに投稿するには、android-g...@googlegroups.com にメールを送信してください。
このグループから退会するには、android-group-j...@googlegroups.com にメールを送信してください。
詳細については、http://groups.google.com/group/android-group-japan?hl=ja からこのグループにアクセスしてください。


egg

unread,
Jul 6, 2010, 2:59:55 AM7/6/10
to android-g...@googlegroups.com
江川と申します。
ImageViewのandroid:adjustViewBoundsをtrueにしてみて下さい。

------------------------------------------
EGAWA Takashi

2010/7/6 Noriko Iwai <noriko.h...@gmail.com>:

Noriko Iwai

unread,
Jul 6, 2010, 3:00:42 AM7/6/10
to 日本Androidの会
こんにちは。

早速の返信ありがとうございます。

> LinearLayoutのlayout_widthをfill_parentに設定してみましたでしょうか。

はい。親タグのlayout_widthは基本的にfill_parentに設定しています。
この上で、ImageViewのlayout_widthをfill_parentにしても、効果がないようです。

でも、ということは、方向性は間違っていないということですね。

のりこ


On 7月6日, 午後3:31, Glenn Marintes <gmarin...@gmail.com> wrote:
> こんにちは!
>
> LinearLayoutのlayout_widthをfill_parentに設定してみましたでしょうか。
> LinearLayoutとその中のImageViewのlayout_width=fill_parentにセットする必要かと思います。
>
> よろしくお願いします。
>
> グレン
>
> 2010/7/6 Noriko Iwai <noriko.harash...@gmail.com>
>
> > 最近androidの実装を始めました。
> > 画像表示でわからないことがあるので、アドバイスいただければと思います。
>
> > やりたいことは、携帯ゲームのトップのような画面構成で、
> > 1. タイトル画像
> > 2. ボタン画像
> > 3. テキスト表示
> > のような順番で1行に1アイテムを縦に並べるイメージです。
>
> > ここで、1のタイトル画像を画面の横幅に合わせて拡大したいのですが、このやり方がわかりません。
> > main.xmlで、LinearLayoutを指定し、その中で1をImageViewとして記述しているのですが、以下のような感じでハマってま
> > す。
>
> > - ImageViewのlayout_widthはfill_parentに設定してそのまま表示すると、画像は原寸サイズで表示されます。
> > - ScaleTypeをcenter_cropに設定するとイメージは近いのですが、画像の高さが原寸のまま(?)なのか、上下が切れてしまいま
> > す。
> > - ScaleTypeをfit_xyに設定すると縦横比が崩れ、adjustViewBoundsをtrueにしても効果がありません。
>
> > 画面の縦横変換時、それぞれで動的に横幅に合わせたサイズになってほしいと思っています。
> > イベントリスナを利用し、コーディングでサイズ調整をする方法もあるでしょうが、もし、xml設定ファイルで簡単に設定できるのであれば、そちらを利用
> > したいです。
>
> > # そもそも、ImageViewやLinearLayoutを利用するのが違うのでしょうか。
>
> > 恐れ入りますが、ご教示のほどよろしくお願いいたします。
>
> > --
> > このメールは Google グループのグループ「日本Androidの会」の登録者に送られています。
> > このグループに投稿するには、android-g...@googlegroups.com にメールを送信してください。
> > このグループから退会するには、android-group-j...@googlegroups.com<android-group-japan%2Bunsu...@googlegroups.com>にメールを送信してください。
> > 詳細については、http://groups.google.com/group/android-group-japan?hl=jaからこのグループにアクセスしてください。

Noriko Iwai

unread,
Jul 6, 2010, 3:08:49 AM7/6/10
to 日本Androidの会
ありがとうございます。

> ImageViewのandroid:adjustViewBoundsをtrueにしてみて下さい。

adjustViewBoundsは試していますが、

> > - ScaleTypeをfit_xyに設定すると縦横比が崩れ、adjustViewBoundsをtrueにしても効果がありません。

ScaleType="fit_xy"ではなく、ということでしょうか。


On 7月6日, 午後3:59, egg <t.eg...@gmail.com> wrote:
> 江川と申します。
> ImageViewのandroid:adjustViewBoundsをtrueにしてみて下さい。
>
> ------------------------------------------
> EGAWA Takashi
>
> 2010/7/6 Noriko Iwai <noriko.harash...@gmail.com>:

egg

unread,
Jul 6, 2010, 3:32:24 AM7/6/10
to android-g...@googlegroups.com
> adjustViewBoundsは試していますが、

こんな感じでできると思います。


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:src="@drawable/hoge"
android:adjustViewBounds="true"
/>
</LinearLayout>

------------------------------------------
EGAWA Takashi

2010/7/6 Noriko Iwai <noriko.h...@gmail.com>:

Ishikawa Hiromi

unread,
Jul 6, 2010, 3:37:00 AM7/6/10
to android-g...@googlegroups.com
こんにちは

上下が切れるということは layout_height が固定だからではないでしょうか?
layout_width を fill_parent、 layout_heght を wrap_content にすれば行ける気がしますがどうでしょうか?

2010年7月6日16:00 Noriko Iwai <noriko.h...@gmail.com>:

Rabbit-U

unread,
Jul 6, 2010, 3:39:13 AM7/6/10
to 日本Androidの会
Referenceを見ましたが、
特にScaleTypeにmatrix以外にこれといったものはないようなので、
ScaleTypeにmatrixを指定して、
javaでsetImageMatrix(Matrix)するのがいいのではないでしょうか?

Glenn Marintes

unread,
Jul 6, 2010, 4:37:29 AM7/6/10
to android-g...@googlegroups.com, noriko.h...@gmail.com
こんにちは。

> ImageViewのlayout_widthはfill_parentに設定してそのまま表示すると、画像は原寸サイズで表示されます。
についてですが、 layout_height は wrap_contentにしたかと思います。 wrap_contentにすると、ImageViewが画像の高さを自分の高さにして、画像のaspect ratioを保持するために、幅を高さにより調整して、結果: 画像が原寸サイズで表示されます。

layout_heightが固定にしてみましたでしょうか。

こちで下記のレィアウトを付けてみました:
一番目のImageViewは layout_height=wrap_contentのため原寸サイズで表示されます。
2番目のImageViewの画像は ImageViewの幅と高さに入れるサイズに自動リサイズされます。


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

<ImageView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/icon"
    android:background="#FF0000"
    />

<ImageView 
    android:layout_width="fill_parent"
    android:layout_height="100px"
    android:src="@drawable/icon_big"
    android:background="#0000FF"
    />

</LinearLayout>

Noriko Iwai

unread,
Jul 6, 2010, 10:39:13 AM7/6/10
to 日本Androidの会
たくさんの回答、ありがとうございます。
初めての投稿で、こんな初心者の質問に感激です!

色々試した結果、以下のことがわかりました。
- android:layout_weight="1" をImageViewにつけたところ、ImageView単体では思い通りの動作になっ
た。
- ImageViewの下にコンテンツを並べると、それを一画面に全部表示するために、ImageViewがリサイズされる。

【OK】
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/
android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:id="@+id/ImageView01"
android:src="@drawable/logo"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1" />
</LinearLayout>

【NG】
ImageViewの下にさらに
<LinearLayout android:id="@+id/LinearLayoutItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button android:id="@+id/Button01" .../>
<TextView android:id="@+id/TextViewItemExpl" .../>
</LinearLayout>
みたいなタグをたくさん。

ScrollViewを利用すれば良いのかな、と思ってはいるのですが、ただLinearLayoutを囲っただけでは
上手くいきませんでした。(画像が原寸になってしまう)
う~ん。根本的にわかってないのかも知れません…^^;


On 7月6日, 午後4:32, egg <t.eg...@gmail.com> wrote:
> > adjustViewBoundsは試していますが、
>
> こんな感じでできると思います。
>
> <?xml version="1.0" encoding="utf-8"?>
> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
> android:orientation="vertical"
> android:layout_width="fill_parent"
> android:layout_height="fill_parent"
> >
> <ImageView
> android:layout_width="fill_parent"
> android:layout_height="0dp"
> android:layout_weight="1"
> android:src="@drawable/hoge"
> android:adjustViewBounds="true"
> />
> </LinearLayout>
>
> ------------------------------------------
> EGAWA Takashi
>
> 2010/7/6 Noriko Iwai <noriko.harash...@gmail.com>:

Rabbit-U

unread,
Jul 6, 2010, 6:38:09 PM7/6/10
to 日本Androidの会
ImageViewのサイズ調整でしたか、
layout-portフォルダ と layout-landフォルダ で分けるとサイズ固定でもいけそうな気もします。

CHIBA Fumiya (Broadtail, Co. Ltd.)

unread,
Jul 7, 2010, 12:15:39 AM7/7/10
to android-g...@googlegroups.com
千葉と申します。

以前、ImageViewの大きさの決まり方をソースから追っかけたことがありますが、なかなか複雑です。
( 詳細はこちら→http://fchiba.blog114.fc2.com/blog-entry-40.html

結論から言うと

・画面の横幅より大きな画像を用意
・android:layout_width="fill_parent"
・android:layout_height="wrap_content"
・android:adjustViewBounds="true"
・android:scaleType="center_inside"

でいけるんじゃないかと思います。

小さい画像しか用意できない場合は、自分でカスタムViewを書いてしまったほうが早いかもしれません。


2010年7月6日23:39 Noriko Iwai <noriko.h...@gmail.com>:

--
千葉 史哉
f-c...@broadtai.jp

Noriko Iwai

unread,
Jul 7, 2010, 8:46:07 AM7/7/10
to 日本Androidの会
> 千葉さん

ありがとうございます!
画像サイズを大きくし、おっしゃるような設定にした上でScrollViewに囲ったところ、思い通りの動きになりました~!!\(〒▽〒)/

紹介いただいたページも拝見しました。とても勉強になります。
奥深いのですね~。これはやりがいがありそうです。

回答くださった皆さんも本当にありがとうございました!
layout-portやlayout-land、matrixなども時間を見つけて少しずつ習得していきたいと思います。

ここに質問して本当に良かったです。
皆さん親切で、とても助かりました。
今後ともよろしくお願いいたしますm(__)m


On 7月7日, 午後1:15, "CHIBA Fumiya (Broadtail, Co. Ltd.)" <f-
ch...@broadtail.jp> wrote:
> 千葉と申します。
>
> 以前、ImageViewの大きさの決まり方をソースから追っかけたことがありますが、なかなか複雑です。
> ( 詳細はこちら→http://fchiba.blog114.fc2.com/blog-entry-40.html
>
> 結論から言うと
>
> ・画面の横幅より大きな画像を用意
> ・android:layout_width="fill_parent"
> ・android:layout_height="wrap_content"
> ・android:adjustViewBounds="true"
> ・android:scaleType="center_inside"
>
> でいけるんじゃないかと思います。
>
> 小さい画像しか用意できない場合は、自分でカスタムViewを書いてしまったほうが早いかもしれません。
>
> 2010年7月6日23:39 Noriko Iwai <noriko.harash...@gmail.com>:
> f-ch...@broadtai.jp
Reply all
Reply to author
Forward
0 new messages