[Android] ImageView ScaleType 画像をScreenにフィットさせる

Android端末の画面サイズは様々で画像のサイズをスクリーン画面にフィットさせるには ImageView.ScaleType を上手に使わないといけません。

Android Studio
2024.1.1

 




ImageView.ScaleType

 

設定のパラメータは8つあります
Google Developer:Reference ImageView.ScaleType

    1. CENTER
      • Viewの中央に表示
      • 拡大/縮小 無し
      • android:scaleType=”center”
         
        小さい画像  大きい画像
        1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる  1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる
         
    2. CENTER_CROP
      • Viewの中央に表示
      • View内で画像の縦横比を維持して余分な部分はCrop(切り取り)
      • android:scaleType=”centerCrop”
         
        1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる  1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる
         
    3. CENTER_INSIDE
      • Viewの中央に表示
      • View内で画像の縦横比を維持し画像すべてをView内に配置
      • android:scaleType=”centerInside”
         
        1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる  1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる
         
    4. FIT_CENTER
      • Viewの中央に表示
      • View内で画像の縦横比を維持しViewの全体に拡大/縮小して配置
      • android:scaleType=”fitCenter”
         
        1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる  1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる
         
    5. FIT_END
      • 右下に寄せて配置
      • View内で画像の縦横比を維持しView全体に拡大/縮小
      • android:scaleType=”fitEnd”
         
        1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる  1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる
         
    6. FIT_START
      • 左上に寄せて配置
      • View内で画像の縦横比を維持しView全体に拡大/縮小
      • android:scaleType=”fitStart”
         
        1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる  1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる
         
    7. FIT_XY
      • 画像の縦横比は関係なくView内でリサイズして全画面
      • android:scaleType=”fitXY”
         
        1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる  1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる
         
    8. MATRIX
      • Image Matrix を使うときに使用する
      • android:scaleType=”matrix”
         1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる 

 

画像が小さい大きいというのは単にそのサイズではなく規定した「View」よりも大きいか小さいかといことです。
 
以下の大小の画像を使ってみました。

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

image1
200×200

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

image2
900×900(実機画面サイズによる)

 
レイアウトファイルは以下のように記述して
android:scaleType をそれぞれ変えて試してみます。
またTitleが邪魔になるのでNo Action BarのActivityでの設定です。
 
activity_main.xml

 

CENTER

 

Viewの中央に表示
拡大/縮小 無しでそのまま表示

 
image1:画像の拡大はなく中央に配置

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

image2: 画像の縮小はなく中央に配置

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

 

CENTER_CROP

 

Viewの中央に表示
View内で画像の縦横比を維持して余分な部分はCrop(切り取り)

 
image1:画像の拡大はなく中央に配置

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

image2: 画像縦方向を縮小して中央に配置

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

image1は”center”と変わりませんが、referenceでは Center the image in the view とありScreenの中央とは言っていないのでViewの範囲を match_parent で画面いっぱいに引き伸ばすと

画像縦方向を拡大して中央に配置となりました

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

例えばViewの範囲のセンターが右下にある場合

View:
Horiaontal baias = 0.75
Vertical baias = 0.85
縦横サイズ: 300dpx300dp

この条件でのcenterCropです

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる


 
 

CENTER_INSIDE

 

Viewの中央に表示
View内で画像の縦横比を維持し画像すべてをView内に配置

image1:画像の拡大はなく中央に配置

画像がViewよりも小さくView内に収まっていればサイズを変更しない

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

image2:画像は縮小されてView内に収まるように配置

画像が大きい場合は縮小されView内に収める

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

Google referenceでは

CENTER_CROP: Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

CENTER_INSIDE: Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

larger than か less than の違いだけであとの文面は同じ
とにかくViewの中に収まるように配置されるようです。

 

FIT_CENTER

 

Viewの中央に表示
View内で画像の縦横比を維持しViewの全体に拡大/縮小して配置

 

image1:画像を拡大して中央に配置

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

image2:画像を縮小して中央に配置

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

 

FIT_END

 

右下に寄せて配置
View内で画像の縦横比を維持しView全体に拡大/縮小
ここでもViewの範囲に注意が必要

 

mage1:画像を拡大して右下に配置

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

mage2:画像を縮小して右下に配置

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

 

FIT_START

 

左上に寄せて配置
View内で画像の縦横比を維持しView全体に拡大/縮小

 
image1:画像を拡大して左上に配置

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

image2:画像を縮小して左上に配置

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる 

FIT_XY

 

画像の縦横比は関係なくView内でリサイズして全画面

image1:画像を縦横が画面いっぱいになるように拡大
1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

image2:画像を縦横が画面いっぱいになるように拡大/縮小

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる
 
 

MATRIX

 

Matrixで画像を変形させるケースで使います。

例えばこのように画像を30°回転させたものを表示させる場合です
MainActivity.java

 
activity_main.xml

 
1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる


 
これは、他とは毛色が違うので、別物として扱うことになりますね
 
 
関連ページ:

References:
ImageView.ScaleType – Android Developers
Matrix | Android デベロッパー | Android Developers

シェアする

  • このエントリーをはてなブックマークに追加

フォローする