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

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

• textAligment:文字顯示模式

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

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

storeboard設(shè)置

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

左對(duì)齊

充滿view

UITextField
UILabel
UITextView

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

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

storeboard中設(shè)置

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

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

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

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

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

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

注釋:

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

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

UIViewContentModeCenter

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

UIViewContentModeCenter

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

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

UIViewContentModeScaleToFill

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

UIViewContentModeScaleAspectFit

UIViewContentModeScaleAspectFill

感謝閱讀
你的支持是我寫作的唯一動(dòng)力