UIViewContentMode 圖文解說

標籤：

       在iOS應用開發中我們常常要對視圖的contentMode屬性進行設定，尤其在使用UIImageView視圖時設定這個屬性的機率很高。我們知道contentMode的類型是UIViewContentMode的枚舉，那麼其每個值是什麼含義，設定後會有什麼效果呢？下面就來總結下。

UIViewContentModeLeft

       如果將UIImageView對象的contentMode設定為UIViewContentModeLeft，其內部的圖片會按照原有的尺寸大小，以垂直置中，水平居左的方式顯示。見UIViewContentModeLeft模式效果（1）。如果圖片的尺寸大於UIImageView視圖的size，那麼超出size的部分將會被裁減掉。如UIViewContentModeLeft模式效果（2）所示。

               

     UIViewContentModeLeft模式效果（1）                                                                   UIViewContentModeLeft模式效果（2）

        至於其它模式，諸如UIViewContentModeRight、UIViewContentModeTop、UIViewContentModeCenter之類模式與UIViewContentModeLeft類似，只是對齊不同而已。我們可以看下UIViewContentModeCenter模式的顯示效果。

              

            UIViewContentModeCenter模式效果（1）                                                         UIViewContentModeCenter模式效果（2）

 

       由此我們可以得出這樣的結論：UIViewContentModeLeft、UIViewContentModeRight等這類帶有位置資訊的模式，不會改變圖片的尺寸，或者更確切地說不會對圖片進行縮放處理，但有可能對圖片進行裁剪操作，這僅發生在圖片尺寸超出UIImageView視圖size的情況下。

       說完了UIViewContentModeLeft，我們來看看UIViewContentModeScaleAspectFit、UIViewContentModeScaleAspectFill、UIViewContentModeScaleToFill三個比較難理解、容易混淆的模式。

UIViewContentModeScaleAspectFit

                                     

                                                                              UIViewContentModeScaleAspectFit模式效果

       在UIViewContentModeScaleAspectFit模式下，UIImageView視圖會將圖片進行等比例縮放，請注意是等比例縮放。縮放到圖片能夠在視圖size內完整顯示（水平垂直方向均置中），且圖片的寬度或者高度（至少一個）恰好與視圖的寬度或者高度相等。如果高度相等，則圖片左右兩邊會留下等寬的空白空間，如上面UIViewContentModeScaleAspectFit模式效果所示；如果寬度相等，則圖片的上下方會留下等高的空白空間；如果寬高都相等，則圖片恰好鋪滿整個視圖。UIViewContentModeScaleAspectFit模式使用等比例縮放，且不對圖片進行裁剪，顯示效果比較協調，因而是我們最為常用的一種模式。

UIViewContentModeScaleAspectFill

                                                      

                                                                              UIViewContentModeScaleAspectFill模式效果

        UIViewContentModeScaleAspectFill模式也是對圖片進行等比例縮放，與UIViewContentModeScaleAspectFit模式不同的是，它將圖片縮放到正好鋪滿整個UIImageView視圖顯示，且圖片的寬度或者高度（至少一個）恰好與視圖的寬度或者高度相等。如果高度相等，則圖片左右會被裁剪掉等寬的內容；如果寬度相等，則圖片的上下會被裁剪掉等高的內容，如上面UIViewContentModeScaleAspectFill模式效果所示；如果寬高都相等，則圖片不會被裁剪。

UIViewContentModeScaleToFill

                                                       

                                                                                 UIViewContentModeScaleToFill模式效果

       相較於UIViewContentModeScaleAspectFit和UIViewContentModeScaleAspectFill，UIViewContentModeScaleToFill模式好理解多了。它是將圖片的寬高強行變成和UIImageView視圖的寬高相等來顯示，因此該變化無法保證是等比縮放。如果圖片的寬高比與視圖的寬高比相同，則是等比縮放，否則非等比縮放。這樣極易導致圖片變形，顯示不協調。儘管如此，UIViewContentModeScaleToFill仍是比較常用的一種模式，某些視圖（比如UIButton）的背景圖backgroundImage就是以該模式為預設的顯示模式。

UIViewContentModeRedraw

       除了上述模式，UIViewContentMode還有一個枚舉值UIViewContentModeRedraw。UIViewContentModeRedraw模式比較特別，它不是用來說明如何展示圖片的，而是告訴視圖在每次設定或者更改frame的時候自動調用drawRect：方法。

       弄清楚了這些模式的含義和作用，我們就可以在開發iOS應用的過程中更加得心應手地設定圖片了。

 

以上內容是本人結合開發經驗並參考了部分資料而撰寫的，如有不妥之處還請不吝賜教，願大家能夠互相學習，共同進步。

 

轉自：http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/e20914053/article/details/49944281

UIViewContentMode 圖文解說