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

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

Android Studio 4.1.3
API 30

 

R904D.P21641J - [Android] ImageView ScaleType 画像をScreenにフィットさせるimpression?a id=2545321&p id=969&pc id=1263&pl id=47128 - [Android] ImageView ScaleType 画像をScreenにフィットさせる

ImageView.ScaleType

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

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

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

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

image1
200×200

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

image2
900×900

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

 

CENTER

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

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

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

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

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

 

CENTER_CROP

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

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

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

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

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

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

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

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

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

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

この条件でのcenterCropです

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

 

CENTER_INSIDE

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

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

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

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

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

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

as413 m42 - [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:画像を拡大して中央に配置

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

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

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

 

FIT_END

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

 

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

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

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

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

 

FIT_START

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

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

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

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

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

FIT_XY

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

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

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

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

MATRIX

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

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

 
activity_main.xml

 
as413 m51 - [Android] ImageView ScaleType 画像をScreenにフィットさせる
 
これは、他とは毛色が違うので、別物として扱うことになりますね
 
 
関連ページ:

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

アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

TECH ACADEMY
Androidアプリコース



Code Camp
現役エンジニアによるオンラインプログラミングスクール【CodeCamp】


直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。



侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


シェアする

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

フォローする