[文組班_作業 2–7] 研究 UIImageView 的 Content Mode

ImageView 是用來顯示圖片,但圖片大小通常跟圖片匡大小不一樣,為了讓照片可以適當的顯示在螢幕上,我們可以透過 Content Mode 屬性來設定圖片匡要如何顯示圖片。

原圖

以下圖為原圖,並將 image view 填滿顏色方便觀察。大小為:450 * 210

Scale To Fill:圖片的兩邊一起縮放至 image view 的邊界

可以發現魚🐟明顯變胖了~

為 UIImageView Content Mode 的預設值,圖片與 Image View 的中心同點。圖片比例延展到 Image View 邊界的尺寸,因此長跟寬可能出現變形的效果。
此功能處理的原理是將圖片的 width 跟 height 一起放大比例至 Image View的 width 跟 height。

Aspect Fit:圖片的長邊縮放至 image view 的邊界

即原尺寸全圖塞入Image view中,圖片與Image View的中心同點。
圖片依照長寬的比例延展或是內縮,等碰到Image view邊緣便停止。
此功能處理的原理是圖片的長邊(width > height 或 height > width)其 Max者,縮放時一旦碰到邊界時,便停止縮放的效果。

Aspect Fill:圖片的短邊縮放至 image view 的邊界

即原尺寸填滿 Image view 的範圍中,圖片與 Image View 的中心同點。
圖片依照長寬的比例延展,圖片依原比例鋪滿整個 Image view,故圖片比例與 Image view 不同時就會超出 view 的大小。
此功能處理的原理是圖片的短邊(width < height 或 height < width)其 Min 者,縮放時一旦碰到邊界時,便停止縮放的效果。

Aspect Fill_Clips to Bounds

面板上有一個 Drawing 開關 Clips to Bounds 的預設值是被勾選的。

它的作用是將 AspectFill 效果之下,超出 Image view 的部分截掉的效果,可以維持顯示的圖像控制在 Image view 的範圍之內。那如果這個 Clips to Bounds 不打勾的話,會變成這樣:

左圖:開啟 Clips to Bounds
右圖:不開啟 Clips to Bounds

Redraw基本上與 Scale To Fill 相同

Center/Top/Bottom/Left/Right/TopLeft/Top Right/Bottom Left/Bottom Right

圖片原尺寸不縮放,將(圖片的 中/下/左/又/左上/右上/左下/右下)與 (image view 的 中/下/左/又/左上/右上/左下/右下)重疊。

其他的部分則原尺寸貼上,超出的部分,要看Clips to Bounds是否有開啟。

--

--