初學(xué)者經(jīng)常糾結(jié)于各種控件的各種顯示模式,居中還是居上靠左還是靠右?

在此徹底總結(jié)一下:

• textAligment:文字顯示模式

NSTextAlignmentLeft      = 0,    // 左對齊
NSTextAlignmentCenter    = 1, // 居中對齊
NSTextAlignmentRight    = 2,   // 右對齊
NSTextAlignmentJustified = 3, // 充滿view來顯示

這四個顯示模式在storeboard里面是這幾個設(shè)置:

storeboard設(shè)置

左對齊,右對齊,居中對齊就不多說了
重點(diǎn)說說一下NSTextAlignmentJustified,他是storeboard中的第四個按鈕
把它和左對齊的效果圖作比較
就能很明顯的看出它的作用:

左對齊

充滿view

UITextField
UILabel
UITextView

• contentHorizontalAlignment\contentVerticalAlignment:內(nèi)容的水平垂直顯示模式

使用較為常見的就是Button的內(nèi)容顯示模式
Button里面有ImageView和Label兩個子控件需要顯示
我們可以分別設(shè)置常用的ImageView的contentMode(下面介紹這個屬性),Label的textAligment
但是要將他們作為一個整體來控制,就需要Button的屬性
contentHorizontalAlignment\contentVerticalAlignment

typedef NS_ENUM(NSInteger, UIControlContentVerticalAlignment) {//垂直方向
    UIControlContentVerticalAlignmentCenter  = 0,
    UIControlContentVerticalAlignmentTop     = 1,
    UIControlContentVerticalAlignmentBottom  = 2,
    UIControlContentVerticalAlignmentFill    = 3,
};
typedef NS_ENUM(NSInteger, UIControlContentHorizontalAlignment) {//水平方向
    UIControlContentHorizontalAlignmentCenter = 0,
    UIControlContentHorizontalAlignmentLeft   = 1,
    UIControlContentHorizontalAlignmentRight  = 2,
    UIControlContentHorizontalAlignmentFill   = 3,
};

在storeboard里面是這幾個設(shè)置:

storeboard中設(shè)置

測試?yán)?代碼中分別設(shè)置了水平靠右,垂直靠上的話,imgeView和Label會一起向左上角靠近(實(shí)際運(yùn)用中一般只單獨(dú)設(shè)置水平方向或者垂直方向)

    button.contentHorizontalAlignment= UIControlContentHorizontalAlignmentLeft;
    button.contentVerticalAlignment = UIControlContentVerticalAlignmentTop;

按照左上角模式顯示(黑色部分是圖片 - -)

擁有contentHorizontalAlignment\contentVerticalAlignment屬性的控件(繼承自UIControl的控件或者UIControl本身):
UIControl
UIButton
UITextField

• contentMode : 內(nèi)容模式(控制內(nèi)容的對齊方式), 一般對UIImageView很有用

typedef NS_ENUM(NSInteger, UIViewContentMode) {
UIViewContentModeRedraw,              
//帶有Scale:可能會被拉伸或者壓縮   
     //帶有Scale - 不帶Aspect:拉伸或者壓縮的時候 不會按照比例             
     UIViewContentModeScaleToFill,    
     //帶有Scale - 帶Aspect:拉伸或者壓縮的時候 會按照比例
     UIViewContentModeScaleAspectFit,  //圖片會適應(yīng)整個ImageView的大小(按照比例縮小擴(kuò)大),全部顯示出來    
     UIViewContentModeScaleAspectFill, //寬高比例不變(原大小顯示) 顯示的時候多余的裁掉   
//不帶Scale:圖片不會被拉伸或者壓縮        
    UIViewContentModeCenter,        
    UIViewContentModeTop,        
    UIViewContentModeBottom,        
    UIViewContentModeLeft,        
    UIViewContentModeRight,        
    UIViewContentModeTopLeft,        
    UIViewContentModeTopRight,        
    UIViewContentModeBottomLeft,
    UIViewContentModeBottomRight,
}

注釋:

以下演示圖片中 : 紅色是背景,黃色是ImageView背景色,白色妹子是圖片

所有顯示模式中
不帶Scale的是較為簡單一些
按照這些顯示模式來顯示,圖片會按照原大小來顯示,不會被拉伸也不會被壓縮,
常用的是UIViewContentModeCenter
讓圖片按照原大小居中顯示:

UIViewContentModeCenter

如果圖片超出控件大小,則圖片就會超出控件顯示,如下圖

UIViewContentModeCenter

下面用力(著重)介紹帶有Scale字眼的模式(圖片會被拉伸或者壓縮)

帶有Scale的三個模式中
有一個是不帶有Aspect字眼的UIViewContentModeScaleToFill
它在拉伸的時候不會按照比例(圖片會變形)
然后非常單純的把整個ImageView填滿:

UIViewContentModeScaleToFill

另外兩個帶有Aspect字眼
他們被拉伸的時候圖片的比例不會改變(圖片不變形)
UIViewContentModeScaleAspectFit:
圖片會完全顯示
圖片等比例縮小至寬等于ImageView的寬
或者高等于ImageView的高為止

UIViewContentModeScaleAspectFit

UIViewContentModeScaleAspectFill

感謝閱讀
你的支持是我寫作的唯一動力