研究 UIImageView 的 Content Mode

本篇主要是研究UIImageView的Content Mode,其中比較重要的部分,會集中在Scale To Fill、Aspect Fit、AspectFill這三個部分,其他的應該較容易懂。

使用的樣本圖,是目前最有梗的鮭魚圖,原圖尺寸為 450 x 210:

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

Aspect Fit:即原尺寸全圖塞入Image view中,口訣:長邊撐滿剛剛好( →Fit合適)!!,圖片與Image View的中心同點,圖片依照長寬的比例延展或是內縮,等碰到Image view邊緣便停止。此功能處理的原理是圖片的長邊(w>h 或 h>w)其Max者,縮放時一旦碰到邊界時,便停止縮放的效果。

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

但注意了,面板上有一個Drawing開關 Clips to Bounds的預設值是被勾選的,它的作用是將AspectFill效果之下,超出Image view的部分截掉的效果,可以維持顯示的圖像控制在Image view的範圍之內。那如果這個Clips to Bounds不打勾的話,會變成這樣:

圖片維持原有比例,但是顯示範圍會超乎Image view的界線。

Redraw:基本上與Scale To Fill相同
・與
Scale To Fill 的差別在於
Scale To Fill :Image view的 drawRect呼叫了一次後,就不能再變更
Redraw :每次呼叫 drawRect時都會跟著Image view的尺寸改變

Center/Top/Bottom/Left/Right/TopLeft/Top Right/Bottom Left/Bottom Right:圖片原尺寸不縮放,居view 中/下/左/又/左上/右上/左下/右下。其功能處理的原理是圖片的某端,比如說選擇 Top,則圖片的上方與Image view的上方邊界是重疊(match)的,其他的部分則原尺寸貼上,超出的部分,要看Clips to Bounds是否有開啟,如果有On,則圖片會出現截圖效果,此例為Top Left:

可以看出圖形被截圖了,若Clips to Bounds是Off時,圖示:

會看到大部分的魚身,但由於原圖尺寸大於模擬器simulator iphone 11的 width = 414甚多,因此還是會超出其可視範圍。

參考老師的資料如下:

--

--