android imageview scaletype充分说明了AdjustViewbound

学习Android开发(Learning Android Development)

I thought I know what Android ImageView ScaleType behavior is until I see the below. Sometimes the CenterInside is the same as FitCenter. Sometimes the CenterInside is the same as Center. Confusing?! 🧐

我以为我知道什么是Android ImageView ScaleType行为，直到看到以下内容。 有时CenterInside相同FitCenter。 有时CenterInside与Center相同。 令人困惑？ 🧐

Different scale types produce the same result, confusing.

不同的比例尺类型产生相同的结果，令人困惑。

If you search the internet, the above differences are not described clearly. So I decided to flush out my confusion entirely by providing a full illustration of all ScaleType that behave differently across different sizes images.

如果您在互联网上搜索，上述区别将无法清楚描述。 因此，我决定通过提供所有在不同尺寸图像上表现不同的ScaleType的完整说明来完全消除我的困惑。

图片尺寸类型 (Images Size Type)

To fully illustrated them, I have to use there are 4 types of images

为了充分说明它们，我必须使用4种类型的图像

1. Bigger Image: Both height and width of the image bigger than the Device View. I use the waterfall image for this.

   图片更大：图片的高度和宽度都大于设备视图。 我为此使用瀑布图像。

2. Smaller Image: Both height and width of the image smaller than the Device View. I use the lion image for this.

   图片较小：图片的高度和宽度均小于设备视图。 我为此使用狮子图像。

3. Taller Image: Only the height of the image is bigger than the device, the width is smaller. I use the tree image for this.

   较高的图像：仅图像的高度大于设备的高度，宽度较小。 我为此使用树图像。

4. Longer Image: Only the width of the image is bigger than the device, the height is smaller. I use the bridge image for this.

   图像更长：仅图像宽度大于设备宽度，高度较小。 我为此使用桥接映像。

ScaleType说明 (ScaleType Illustrated)

There are 8 types altogether.

共有8种类型。

规模中心 (Scale Center)

Scale Center is actually no scaling at all, but just take the center of the image and align with the center of the view.

“缩放中心”实际上根本没有缩放比例，仅取图像的中心并与视图的中心对齐。

Bigger Image: only the center part of the image is cropped into the view.

图片更大：仅将图片的中心部分裁剪到视图中。

Smaller Image: the entire image got put in the device view. As the image is not scaled, the surround of it is padded.

图片较小：整个图片都放在设备视图中。 由于未缩放图像，因此将填充其周围。

Taller Image: both the top and bottom of it got cropped away, while it’s sides are padded.

较高的图像：顶部和底部均被裁剪掉，而侧面则被填充。

Longer Image: both the sides of it got cropped away, while it’s top and bottom are padded.

较长的图像：裁剪了图像的两边，同时填充了顶部和底部。

规模中心作物 (Scale Center Crop)

Scale Center Crop is to align the center of the image with the center of the view. After that. If shrink to ensure that at least either horizontal edge or vertical edge will fit into the view with no padding on all sides of the view.

缩放中心裁剪用于将图像的中心与视图的中心对齐。 之后。 如果缩小，请确保至少水平边缘或垂直边缘都适合视图，且视图的所有侧面均不填充。

Bigger Image: it is shrunk proportionally. For the image beside, it’s height/width ratio is bigger than the view height/width ratio, the top and bottom got cropped away

图片更大：按比例缩小。 对于旁边的图像，其高宽比大于视图的高宽比，顶部和底部被裁剪掉

Smaller Image: it is enlarged proportionally. For the image beside, it’s height/width ratio is smaller than the view height/width ratio, the sides got cropped away.

较小的图像：按比例放大。 对于旁边的图像，其高/宽比小于视图的高/宽比，侧面被裁剪掉。

Taller Image: the image is enlarged proportionally until it’s both sides met the edge of the view. The top and bottom of it got cropped away.

较高的图像：图像按比例放大，直到两边都与视图边缘相交。 它的顶部和底部被裁剪掉了。

Longer Image: the image is enlarged proportionally until it’s top and bottom met the edge of the view. Both sides of it cropped away.

较长的图像：图像按比例放大，直到顶部和底部与视图边缘相交。 双方都消失了。

内部秤中心 (Scale Center Inside)

Scale Center Inside is to align the center of the image with the center of the view. After that, if the image has any side that is bigger than the view, shrink it proportionally the image is fully inside the view.

在内部缩放中心用于将图像的中心与视图的中心对齐。 之后，如果图像的任何一面大于视图，则按比例缩小图像，使其完全位于视图内。

Bigger Image: it is shrunk proportionally. For the image beside, it’s height/width ratio is bigger than the view height/width ratio, the sides will now be padded.

图片更大：按比例缩小。 对于旁边的图像，其高/宽比大于视图的高/宽比，现在将填充边。

Smaller Image: no scaling is required as the image is fully inside the view.

较小的图像：由于图像完全位于视图内部，因此无需缩放。

Taller Image: the image is shrunk proportionally until it’s height is fully inside the view. Both sides will have padding.

较高的图像：图像按比例缩小，直到其高度完全位于视图内部。 双方都有填充。

Longer Image: the image is shrunk proportionally until both sides and bottom is in the view. Then the top and bottom will have padding.

较长的图像：图像按比例缩小，直到两边和底部都在视图中。 然后顶部和底部将有填充。

Note: Center Inside has the same result as Fit Center for image that has one side larger than the view, and has the same result as Center for image that is smaller that the view.

注意：“中心内部”的结果与“适合中心的图像”的结果相同，该图像的一侧比视图大，并且与“中心的图像”的结果相同，但小于视图的图像的中心。

比例拟合中心 (Scale Fit Center)

Scale Fit Center is to align the center of the image with the center of the view. After that, if the image is shrunk or enlarged proportionally until the

缩放适合中心是使图像的中心与视图的中心对齐。 之后，如果图像缩小或按比例放大，直到

• image is fully inside the view, and
  图像完全在视图内部，并且
• one of the image edge (vertical or horizontal) met the side of the vie
  图像边缘之一(垂直或水平)遇到了视线的一侧

Bigger Image: it is shrunk proportionally. For the image beside, it’s height/width ratio is bigger than the view height/width ratio, the sides will now be padded.

图片更大：按比例缩小。 对于旁边的图像，其高/宽比大于视图的高/宽比，现在将填充边。

Smaller Image: it is enlarged proportionally until the edge of the image met the side of the view. For the image beside, it’s height/width ratio is smaller than the view height/width ratio, the top-bottom will now be padded.

较小的图像：它将按比例放大，直到图像的边缘与视图侧面相遇为止。 对于旁边的图像，其高/宽比小于视图的高/宽比，现在将填充顶部-底部。

Taller Image: the image is shrunk proportionally until it’s height is fully inside the view. Both sides will have padding.

较高的图像：图像按比例缩小，直到其高度完全位于视图内部。 双方都有填充。

Longer Image: the image is shrunk proportionally until both sides and bottom is in the view. Then the top and bottom will have padding.

较长的图像：图像按比例缩小，直到两边和底部都在视图中。 然后顶部和底部将有填充。

比例拟合开始 (Scale Fit Start)

Scale Fit Start is to align the top left of the image with the top left of the view. After that, if the image is shrunk or enlarged proportionally until the

缩放适合开始是将图像的左上方与视图的左上方对齐。 之后，如果图像缩小或按比例放大，直到

• image is fully inside the view, and
  图像完全在视图内部，并且
• one of the image edge (vertical or horizontal) met the side of the view
  图像边缘之一(垂直或水平)与视图侧面相交

Bigger Image: it is shrunk proportionally to top-left. For the image beside, it’s height/width ratio is bigger than the view height/width ratio, the right side will now be padded.

图片更大：按比例缩小到左上角。 对于旁边的图像，其高/宽比大于视图的高/宽比，现在将填充右侧。

Smaller Image: it is enlarged from top-left proportionally until the edge of the image met the side of the view. For the image beside, it’s height/width ratio is smaller than the view height/width ratio, the bottom will now be padded.

较小的图像：从左上角按比例放大，直到图像的边缘与视图侧面相交。 对于旁边的图像，其高/宽比小于视图的高/宽比，现在将填充底部。

Taller Image: the image is shrunk proportionally to top-left until it’s height is fully inside the view. The right side will have padding.

较高的图像：图像会按比例从左上角缩小，直到其高度完全在视图内。 右侧将有填充。

Longer Image: the image is shrunk proportionally to top-left until both sides and bottom is in the view. Then the bottom will have padding.

较长的图像：图像按比例从左上角缩小，直到在视图的两侧和底部都可见。 然后底部将有填充。

刻度适合端 (Scale Fit End)

Scale Fit End is to align the bottom right of the image with the bottom right of the view. After that, if the image is shrunk or enlarged proportionally until the

缩放适合端使图像的右下角与视图的右下角对齐。 之后，如果图像缩小或按比例放大，直到

• image is fully inside the view, and
  图像完全在视图内部，并且
• one of the image edge (vertical or horizontal) met the side of the view
  图像边缘之一(垂直或水平)与视图侧面相交

Bigger Image: it is shrunk proportionally to bottom-right. For the image beside, it’s height/width ratio is bigger than the view height/width ratio, the left side will now be padded.

图片更大：它会按比例缩小到右下角。 对于旁边的图像，其高/宽比大于视图的高/宽比，现在将填充左侧。

Smaller Image: it is enlarged from bottom-right proportionally until the edge of the image met the side of the view. For the image beside, it’s height/width ratio is smaller than the view height/width ratio, the top will now be padded

较小的图像：从右下角按比例放大，直到图像的边缘与视图侧面相交。 对于旁边的图像，其高/宽比小于视图的高/宽比，现在将填充顶部

Taller Image: the image is shrunk proportionally to bottom-right until it’s height is fully inside the view. The left side will have padding.

更高的图像：图像会从右下角按比例缩小，直到其高度完全在视图内。 左侧将有填充。

Longer Image: the image is shrunk proportionally to bottom-right until both sides and bottom is in the view. Then the top will have padding.

较长的图像：图像从右下角按比例缩小，直到视图的两侧和底部都可见。 然后顶部将有填充。

比例尺XY (Scale Fit XY)

Scale Fit Center is to align the center of the image with the center of the view. After that, if the image is shrunk or enlarged until

缩放适合中心是使图像的中心与视图的中心对齐。 之后，如果图像缩小或放大，直到

• image is fully inside the view, and
  图像完全在视图内部，并且
• all of the image edge (vertical or horizontal) met the side of the view
  所有图像边缘(垂直或水平)都与视图侧面相交

Bigger Image: it is shrunk proportionally until all side is in the view. For the image beside, it’s height/width ratio is bigger than the view height/width ratio, so it is stretched horizontally.

图像放大：图像按比例缩小，直到所有侧面都在视野中。 对于旁边的图像，其高/宽比大于视图的高/宽比，因此将其水平拉伸。

Smaller Image: it is enlarged from bottom-right until the edge of the image met the side of the view. For the image beside, it’s height/width ratio is smaller than the view height/width ratio, the image is stretched vertically.

较小的图像：从右下角开始放大，直到图像的边缘与视图侧面相交。 对于旁边的图像，其高/宽比小于视图的高/宽比，图像将被垂直拉伸。

Taller Image: the image is shrunk until all it is fully inside the view. The image is horizontally stretched.

更高的图像：图像会缩小，直到所有图像完全进入视图。 图像被水平拉伸。

Longer Image: the image is shrunk to bottom-right until all sides and is in the view. The image is vertically stretched.

较长的图像：图像缩小到右下角，直到所有侧面都在视图中。 图像被垂直拉伸。

比例矩阵 (Scale Matrix)

Scale Matrix is basically no scale by default. It aligns the top-left of the image with the top-left of the view. For any side of the image that is larger than the view, it is cropped. For any side that is smaller, it is padded.

默认情况下，“缩放矩阵”基本上没有缩放比例。 它将图像的左上角与视图的左上角对齐。 对于图像中大于视图的任何一侧，都会对其进行裁剪。 对于较小的任何一侧，都会对其进行填充。

Bigger Image: the right and bottom of the images are cropped away.

图像更大：图像的右侧和底部被裁剪掉。

Smaller Image: the right and bottom of the view are padded

较小的图像：填充视图的右侧和底部

Taller Image: the bottom of the image is cropped, but the right side is padded.

较高的图像：图像的底部被裁剪，但右侧被填充。

Longer Image: the right of the image is cropped, but the bottom of the view is padded

图片较长：图片的右侧被裁剪，但视图的底部被填充

Scale Matric allows custom scaling, which I plan to cover in another blog. Stay tuned.

Scale Matric允许自定义缩放，我打算在另一个博客中介绍。 敬请关注。

摘要视图 (Summary Views)

To make it easier for comparison across the ScaleType, I put them side by side for the same image type.

为了更轻松地在ScaleType中进行比较，我将它们并排放置为相同的图像类型。

图片更大 (Bigger Image)

较小的图像(Smaller Image)

较高的图像(Taller Image)

更长的图像(Longer Image)

That’s it. Hopefully, this provides you a crystal clear everything that one needs to know about ScaleType… with the exception of Matrix… and also AdjustViewBounds, which I plan to explore on in my next writing.

而已。 希望这可以为您提供一个清晰的，关于ScaleType的所有知识，除了Matrix以及AdjustViewBounds，我计划在我的下一篇文章中进行探讨。

Updated, For AdjustViewBounds, check out

已更新，对于AdjustViewBounds，请签出

For Matrix ScaleType, checkout

对于Matrix ScaleType，签出

You can get the example app code to experiment with it.

您可以获取示例应用代码来进行实验。

演示地址

翻译自: https://medium.com/mobile-app-development-publication/android-imageview-scaletype-fully-illustrated-with-adjustviewbound-1ce094dee777