画像をスクリーン画面の中央に設定して、かつ枠からはみ出さないようににフィットさせるには ImageView.ScaleType を上手に使わないといけません。
![[Android] ImageView画像をScreenのレイアウトにフィットさせるには centerCrop1b 300x168 - [Android] ImageView画像をScreenのレイアウトにフィットさせるには](http://akira-watson.com/wp-content/uploads/2013/12/centerCrop1b-300x168.png)
![[Android] ImageView画像をScreenのレイアウトにフィットさせるには scaletype 1b 300x300 - [Android] ImageView画像をScreenのレイアウトにフィットさせるには](https://akira-watson.com/wp-content/uploads/2013/12/scaletype_1b-300x300.png)
Android 8.0
ImageView.ScaleTyp
設定のパラメータは8つあります
Google Developer:Reference ImageView.ScaleType
-
- CENTER
- Viewの中央に表示、拡大縮小無し
- android:scaleType=”center”
- CENTER_CROP
- View内で画像の縦横比を維持し、Cropして中央に配置
- android:scaleType=”centerCrop”
- CENTER_INSIDE
- View内で画像の縦横比を維持し画像すべてをView内の中央に配置
- android:scaleType=”centerInside”
- FIT_CENTER
- View内で画像の縦横比を維持し中央に配置
- android:scaleType=”fitCenter”
- FIT_END
- View内で画像の縦横比を維持し、右下に寄せて配置
- android:scaleType=”fitEnd”
- FIT_START
- View内で画像の縦横比を維持し、左上に寄せて配置
- android:scaleType=”fitStart”
- FIT_XY
- View内で縦横を独立してリサイズし、フル画面にする
- android:scaleType=”fitXY”
- MATRIX
- Image Matrix を使うときに使用する
- android:scaleType=”matrix”
- CENTER
これだけ見ると、簡単に色々設定できそうですが android:scaleType=”center” だけ追加しても期待通りのレイアウトにならないケースがあったりします
下のように2つの縦長、横長画像を用意して ローテーションさせた時の表示を確認してみます
Test Case:
スマホ画面サイズ: 540×897 pix
【image1】
854×480 pix
16:9 横長画像(Landscape)
960×1708 pix
16:9 縦長画像(Portrait)
![[Android] ImageView画像をScreenのレイアウトにフィットさせるには image2 168x300 - [Android] ImageView画像をScreenのレイアウトにフィットさせるには](http://akira-watson.com/wp-content/uploads/2013/12/image2-168x300.jpg)
レイアウトファイルは以下のように記述して
android:scaleType をそれぞれ変えて試してみます
activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000000" tools:context=".MainActivity"> <ImageView android:id="@+id/image_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" /> <==この部分を変更 </RelativeLayout> |
MainActivity.java
1 2 3 4 5 6 7 8 9 10 11 12 |
... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageView imageView = findViewById(R.id.image_view); imageView.setImageResource(R.drawable.image1); // imageView.setImageResource(R.drawable.image2); } } |
CENTER
Viewの中央に表示、拡大縮小無し
1 2 |
android:scaleType="center" |
リサイズしないので、画像がスクリーンよりも大きいとはみ出て
Portraitでは横長画像は左右が切れてしまう
![]() |
![]() |
縦長画像は、landscapeで上下が切れる
![]() |
![]() |
ところで、CENTERとあるのに、縦長画像のPortraitは橋が画面の中央ではなく 上に張り付いています
referenceでは Center the image in the view とあるが、
Screenの中央とは言っていない!…(x~x)
android:layout_height=”wrap_content” これを
1 2 |
android:layout_height="match_parent" |
に変更すると
画面中央に配置できました。
Viewの範囲を意識しないといけないのですね
とは言っても アプリが複雑になり、ネストのネストの中に入り込んでいると
match_parent を使えないケースもあります
RelativeLayout、LineaLayout に
android:gravity=”center”
などを入れるとうまくいったりします。
CENTER_CROP
1 2 |
android:scaleType="centerCrop" |
CROPなので惜しげもなくバッサリ切られる
![]() |
![]() |
縦長画像は
![]() |
![]() |
はて、CENTER と同じような結果となりました?・・・
画像サイズが画面より 大きい かあるいは 小さい 場合に差がはっきりするようです
CENTER は中央に表示しますが、拡大縮小は無し
CENTER_CROP 縦横比を維持し、Cropして中央に配置
CENTER | CENTER_CROP |
![]() |
![]() |
元画像が 80×60 pix と小さいので、拡大されると粗が出る
このケースでは
android:layout_width=”wrap_content“
android:layout_height=”wrap_content“
をそれぞれ match_parent に変更しないと
CENTER_CROPでは元の画像サイズとなり、同じ表示になってしまうので注意
CENTER_INSIDE
1 2 |
android:scaleType="centerInside" |
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の中に収まるように配置される
![]() |
![]() |
縦長画像のPortraitではView内に収めるため余白が出る
![]() |
![]() |
FIT_CENTER
1 2 |
android:scaleType="fitCenter" |
画像のアスペクト比を変えずにView内に収め、中央に配置する
android:layout_height=”wrap_content”
にすると右下のように中央ではなくなる
android:layout_height=”match_parent”
にすると修正される
![]() |
![]() |
縦長画像は
![]() |
![]() |
このケースでは CENTER_INSIDE と同じような結果となりました
これも、画像サイズとそれを入れる枠によって表示が異なります
それぞれ
1 2 3 4 5 6 |
<ImageView android:id="@+id/image_view" android:scaleType="centerInside" android:background="#ffffff" android:layout_width="200dp" android:layout_height="200dp" /> |
1 2 3 4 5 6 |
<ImageView android:src="@drawable/handbag" android:scaleType="fitCenter" android:background="#ffffff" android:layout_width="200dp" android:layout_height="200dp" /> |
CENTER_INSIDE では枠内の中央に配置されるだけですが
FIT_CENTERの場合は、上のように拡大されて中央表示となっています
FIT_END
1 2 |
android:scaleType="fitend" |
END、右下に寄った画像配置となる、ここでもViewの範囲に注意が必要となる
![]() |
![]() |
縦長画像は
![]() |
![]() |
FIT_START
1 2 |
android:scaleType="fitStart" |
START、左上に寄った画像配置となる
![]() |
![]() |
縦長画像は
![]() |
![]() |
FIT_XY
1 2 3 |
android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" |
縦横をそれぞれ独立して、Screen いっぱいに拡大縮小する 当然本来の画像ではなくなるが、
プレーンな背景たとえば空色一色の画像や あるパターンの繰り返しで背景を埋めたいとき、
余白を残したくない場合に有効なのかもしれない 因みにこの設定には、やはり
android:layout_width=”match_parent”
android:layout_height=”match_parent”
としないと画面いっぱいにリサイズされないので注意
![]() |
![]() |
縦長画像は
![]() |
![]() |
MATRIX
1 2 3 |
android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="matrix" |
Canvas, draw 等で
setImageMatrix() を使うときに設定する
画面に関係なく指定したサイズで左上に寄せて表示させることもできる
これは、他とは毛色が違うので、別物として扱うことになりますね
関連ページ: