Android ImageViewのscaleType属性図解

ImageViewはAndroidで最も一般的なコントロールの1つですが、ImageViewを使用する場合は、scaleTypeのプロパティを使用する必要があります.このプロパティは、ImageViewにズーム、等比ズーム、ズーム後の表示位置など、画像をどのように表示させるかを指定します.Androidは8種類のscaleTypeの属性値を提供し、それぞれが1つの展示方式に対応しており、以下では各scaleTypeの属性値について図文で説明する.
まず、これはテストがImageViewに置かれた図で、左から右に順番に各役があり、区別しやすい.この図は1920*1080で、縦横にかかわらずテストに使われたImageViewより大きい.
これは、テスト用のImageViewレイアウトです.

ImageViewは正方形で、背景色は紫色で、親レイアウトは背景色が赤色に設定されており、各コントロールのサイズが容易に表示されます.携帯電話のレイアウトはこのように見えますが、紫色の空間はImageViewです.
前に書くscaleTypeプロパティは、XMLでもコードでも設定できます.

android:scaleType="centerInside"          //XML 
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);    //   

8つのScaleTypeは、実際には3つのタイプに分けることができます.

はFIT_で始まる4種類で、それらの共通点はいずれも画像をスケーリングすることである.

はCENTER_で始まる3種類で、それらの共通点は中央に表示され、画像の中心点はImageViewの中心点と重なる.

ScaleType.MATRIX、これは直接最後に内容を見ましょう.

ScaleType.FIT_CENTERデフォルト
このモードはImageViewのデフォルトモードであり、ScaleTypeが設定されていない場合、このモードで画像を表示する.このモードでは、画像はコントロールのサイズを塗りつぶすことができるように均等に縮小され、中央に表示されます.
ここの例では、画像幅が高さより大きいため、コントロールサイズにスケールされて中央に表示され、上下に白が残ります.画像の高さが幅より大きいと、中央に表示されて左右に白が残ります.
ScaleType.FIT_START
画像はコントロールサイズに縮小され、コントロールの上または左に表示されます.図に示すように、このモードではImageViewの後半に白が残り、画像の高さが幅より大きい場合はImageViewの右半分に白が残ります.
ScaleType.FIT_END
画像は、コントロールのサイズを縮小し、コントロールの下または右に表示されます.図に示すように、このモードではImageViewの上半分に白が残り、画像の高さが幅より大きい場合はImageViewの左半分に白が残ります.
ScaleType.FIT_XY
画像をコントロールサイズにスケールし、コントロールサイズの表示を完全に塗りつぶします.なお、このモードは等比スケーリングではありません.このパターンの理解も最も簡単です.図のように.
ScaleType.CENTER
拡大・縮小を使用せずに、ImageViewは、図のような画像の中心部分、すなわち、画像の中心点とImageViewの中心点とが重なることを示す.画像のサイズがコントロールの幅より小さい場合は、画像が中央に表示されます.
ScaleType.CENTER_CROP
これは私の大好きなモードです.このモードでは、ImageView全体が完全に塗りつぶされ、中央に表示されるまで画像が等比的にスケールされるからです.このモードも最もよく使われるモードです.図に示すように、画像の高さは完全に示されています.
ScaleType.CENTER_INSIDE
このモードでは、画像の内容を完全に表示することを目的としています.画像は、コントロールサイズよりも小さい場合は、ImageViewに完全に表示され、中央に表示されるように等比されます.
ここで、このモードの効果はScaleType.FIT_CENTERの効果と同じであることがわかります.これは、使用されるピクチャがImageViewより大きいサイズであり、ピクチャがコントロールサイズより小さい場合、この2つのモードの違いが見られるからです.
ScaleType.MATRIX
一般的には最後に重点を置いていますが、この8つのScaleTypeでは、このモードが重点です.このモードは、画像がどのように表示されるかを指定するために変換マトリクスを指定する必要があるため、ImageView.setImageMatrix(Matrix matrix)と組み合わせて使用する必要がある.実は前の7つのモードはすべてImageViewを通じて内部で相応の変換行列を生成して、このモードの1種の特定の値を提供したことに等しくて、このモードを使って相応の行列に入るだけで、上述の7種類の表示効果を実現することができます.マトリクスの使い方については、すぐには言えないので、ここでは言いません.また、使用時には、先に呼び出す必要があります

imageView.setScaleType(ImageView.ScaleType.MATRIX);

さいよびだし

imageView.setImageMatrix(matrix);

順序を間違えないように注意してください.そうしないと問題が発生します.コードを見てみましょう.

imageView.setScaleType(ImageView.ScaleType.MATRIX);  //       

Matrix matrix = new Matrix();           //        
matrix.setTranslate(100, 100);          //  x y 100  
matrix.preRotate(30);                   //     30 
imageView.setImageMatrix(matrix);       //       

各行のコードにはコメントがあり、その表示効果は下図のように表示されます.
 
作者:545 a 3 c 856 c 5 fリンク:https://www.jianshu.com/p/32e335d5b842出典:簡書簡書の著作権は著者の所有であり、いかなる形式の転載も著者に連絡して授権を得て出典を明記してください.