IOS不用AutoLayout也能實現自動佈局的類(3)----MyRelativeLayout 相對佈局

時間  2019-11-12
標籤 ios 不用 autolayout 實現 自動 佈局 myrelativelayout 相對 欄目 iOS 简体版
原文   原文鏈接

對於IOS開發者來講，在自動佈局出現前只能經過計算和設置frame的值來處理，這樣設置位置時就會出現不少硬編碼，同時在屏幕旋轉和不一樣屏幕之間適配時須要編碼從新調整位置和尺寸，咱們也能夠重載視圖的layoutSubviews的函數來寫代碼從新佈局。自動佈局出現後確實在必定程度上解決了位置和尺寸硬編碼的問題，可是經過代碼來寫自動佈局很是的複雜和麻煩，並且代碼量會增長不少。在自動佈局領域android系統經過提供FrameLayout, LinearLayout, RelativeLayout, AbsoluteLayout等幾個類來分別處理各類不一樣的佈局需求，經過wrap_content,match_parent來自動計算尺寸。android

     android系統的FrameLayout類用於進行上下左右居中填充方式的佈局，而LinearLayout則是用於進行水平和垂直方向的流式佈局，AbsoluteLayout則是硬編碼方式的絕對佈局。在我前面的2篇文章中分別介紹了MyFrameLayout, MyLinearLayout兩種方式的佈局，而這章我將繼續介紹相對佈局MyRelativeLayout.git

       所謂相對佈局就是指某個視圖的位置和尺寸不是固定寫死的而是依賴於其餘關聯的視圖，好比一個視圖在另一個視圖的左邊，或者在另一個視圖的右下方，或者一個視圖的寬度和另一個視圖寬度是相等的，或者視圖是在父視圖的頂部偏移必定的量，或者某一組視圖的寬度要平分父視圖等等功能。所以咱們分別爲子視圖定義了以下的擴展屬性：github

 

 

@interface UIView(MyRelativeLayoutEx)數組

 

//位置xcode

@property(nonatomic,readonly) MyRelativePos *leftPos;app

@property(nonatomic,readonly) MyRelativePos *topPos;框架

@property(nonatomic,readonly) MyRelativePos *rightPos;函數

@property(nonatomic,readonly) MyRelativePos *bottomPos;oop

@property(nonatomic,readonly) MyRelativePos *centerXPos;佈局

@property(nonatomic,readonly) MyRelativePos *centerYPos;

 

//尺寸

@property(nonatomic,readonly) MyRelativeDime *widthDime;

@property(nonatomic,readonly) MyRelativeDime *heightDime;

 

@end

 
分別來定義視圖的左，上，右，下，水平中心，垂直中心，寬度，高度8個方位和尺寸的相對依賴對象，其中MyRelativePos用來定義相對的依賴位置類。它的定義以下：
 

@interface MyRelativePos :NSObject

//偏移

-(MyRelativePos* (^)(CGFloat val))offset;

 

//NSNumber, MyRelativePos對象,若是是centerXPos或者centerYPos則能夠傳NSArray，數組裏面裏面也必須是centerXPos，表示指定的視圖數組

//在父視圖中居中，好比： A.centerXPos.equalTo(@[B.centerXPos.offset(20)].offset(20)

//表示A和B在父視圖中居中往下偏移20，B在A的右邊，間隔20。

-(MyRelativePos* (^)(id val))equalTo;

 

@end

 
這個類中的offset用來指定某個位置的偏移值，而equalTo則用來指定依賴的某個位置和值，好比：
 
1.A視圖的左邊等於B視圖的右邊並偏移30個點： A.leftPos.equalTo(B.rightPos).offset(30)
 
2.A視圖的頂部和父視圖的頂部相等：A.topPos.equalTo(A.superView.topPos)
 
3.A視圖的中間在父視圖的中間：   A.centerXPos.equalTo(A.superView.centerXPos); A.centerYPos.equalTo(A.superView.centerYPos)
 
4.A視圖的左邊偏移20: A.topPos.equalTo(@0).offset(20)
5.A,B,C三個視圖要總體在佈局視圖中水平居中：A.centerXPos.equalTo(@[B.centerXPos,C.centerXPos])
 
 
而對於相對尺寸則定義了MyRelativeDime類來定義寬度和高度，這個類的定義以下：

@interface MyRelativeDime :NSObject

 

//乘

-(MyRelativeDime* (^)(CGFloat val))multiply;

//加,用這個和equalTo的數組功能能夠實現均分子視圖寬度以及間隔的設定。

-(MyRelativeDime* (^)(CGFloat val))add;

 

 

//NSNumber, MyRelativeDime以及MyRelativeDime數組，數組的概念就是全部數組裏面的子視圖的尺寸平分父視圖的尺寸。

-(MyRelativeDime* (^)(id val))equalTo;

 

@end

 
尺寸定義中equalTo用來指定尺寸的值，能夠是NSNumber型指定絕對的尺寸，MyRelativeDime型指定相對的尺寸，NSArray[MyRelativeDime]來指定按比例分配父視圖的尺寸，mutiply用來指定在equalTo上指定的值的倍數比例，add指定在equalTo上指定的值的增量值(add方法更可能是用來指定間距)。
 
1.A視圖的寬度等於B視圖的寬度，A視圖的高度等於B視圖的高度的一半：  A.widthDime.equalTo(B.widthDime); A.heightDime.equalTo(B.heightDime).multiply(0.5)
 
2.A視圖的高度等於B視圖的高度，並增長20：   A.heightDime.equalTo(B.heightDime).add(20)
 
3.A,B,C三個視圖平分父視圖的寬度：  A.widthDime.equalTo(@[B.widthDime, C.widthDime])
 
4.A視圖固定寬度爲20， B,C視圖按4：6平分剩餘的寬度：   A.widthDime.equal(@20)  B.widthDime.equalTo(@[A.widthDime, C.widthDime.multiply(0.6)]).multiply(0.4)
 
 
好了介紹了上述擴展的子視圖的擴展屬性後，咱們須要的只是創建一個MyRelativeLayout佈局視圖，而後設置好子視圖之間的相對依賴，而後添加進去就OK了。
 
 
1、相對佈局的子視圖的依賴。
 
 
上述的佈局就是用相對佈局實現，代碼很簡單，請參考以下：
 
[objc]  view plain copy
  1. -(void)loadView  
  2. {  
  3.       
  4.     MyRelativeLayout *rl = [MyRelativeLayout new];  
  5.     rl.padding = UIEdgeInsetsMake(10, 10, 10, 10);  
  6.     rl.backgroundColor = [UIColor grayColor];  
  7.     self.view = rl;  
  8.       
  9.     UILabel *lb1 = [UILabel new];  
  10.     [rl addSubview:lb1];  
  11.     lb1.text = @"你好";  
  12.     [lb1 sizeToFit];  
  13.     lb1.backgroundColor = [UIColor blueColor];  
  14.      
  15.       
  16.     lb1.leftPos.equalTo(rl.leftPos); //和父視圖左邊一致  
  17.     lb1.topPos.equalTo(rl.topPos).offset(10); //和父視圖頂部一致並偏移10  
  18.     lb1.widthDime.equalTo(@60); //固定寬度  
  19.       
  20.     UILabel *lb2 = [UILabel new];  
  21.     [rl addSubview:lb2];  
  22.     lb2.text = @"我好 hello";  
  23.     lb2.backgroundColor = [UIColor redColor];  
  24.       
  25.     lb2.leftPos.equalTo(lb1.rightPos);  
  26.     lb2.topPos.equalTo(lb1.bottomPos);  
  27.     lb2.widthDime.equalTo(lb1.widthDime).add(30); //寬度是lb1的寬度加30  
  28.     lb2.heightDime.equalTo(lb1.heightDime).multiply(2).add(-10); //高度是lb1高度的2倍再-10  
  29.       
  30.     UILabel *lb3 = [UILabel new];  
  31.     lb3.text = @"中間";  
  32.     lb3.backgroundColor = [UIColor greenColor];  
  33.     [rl addSubview:lb3];  
  34.       
  35.     lb3.centerXPos.equalTo(rl.centerXPos);  
  36.     lb3.centerYPos.equalTo(rl.centerYPos);  
  37.     lb3.widthDime.equalTo(rl.widthDime).multiply(0.2);  
  38.     lb3.heightDime.equalTo(rl.heightDime).multiply(0.1);  
  39.       
  40.     UILabel *lb4 = [UILabel new];  
  41.     lb4.text = @"他好";  
  42.     [lb4 sizeToFit];  
  43.     lb4.backgroundColor = [UIColor orangeColor];  
  44.     [rl addSubview:lb4];  
  45.       
  46.     //寬度和高度由左右決定  
  47.     lb4.leftPos.equalTo(rl.leftPos);  
  48.     lb4.rightPos.equalTo(rl.rightPos);  
  49.     lb4.topPos.equalTo(@100);  
  50.      
  51. }  


 
這段代碼中請注意lb4的設置，咱們會發現當咱們同時指定了左右和上下的依賴視圖時，寬度和高度就不須要指定出來，佈局會自動算出高度和寬度。注意代碼中咱們還爲相對佈局指定了padding的值，表示裏面的全部子視圖都會在padding以內。
 
 
2、相對佈局的子視圖的平均分配
 
有時候咱們的佈局的有些子視圖但願能按父視圖的尺寸來進行按某些規則進行分配，好比下面的佈局：
 
 
 
 
上面的視圖中，第一排的3個子視圖平分父視圖的寬度。第二排子視圖中第一個視圖寬度固定，剩餘的兩個平分。第三排的子視圖按0.2 0.3 0.5的比例來平分父視圖，代碼以下：
 
[objc]  view plain copy
  1. -(void)loadView  
  2. {  
  3.     MyRelativeLayout *rl = [MyRelativeLayout new];  
  4.     rl.padding = UIEdgeInsetsMake(0, 0, 0, 10);  
  5.     rl.backgroundColor = [UIColor grayColor];  
  6.     self.view = rl;  
  7.       
  8.     /**水平平分3個子視圖**/  
  9.     UIView *v1 = [UIView new];  
  10.     v1.backgroundColor = [UIColor redColor];  
  11.     v1.heightDime.equalTo(@40);  
  12.     [rl addSubview:v1];  
  13.       
  14.     UIView *v2 = [UIView new];  
  15.     v2.backgroundColor = [UIColor redColor];  
  16.     v2.heightDime.equalTo(@40);  
  17.     [rl addSubview:v2];  
  18.   
  19.     UIView *v3 = [UIView new];  
  20.     v3.backgroundColor = [UIColor redColor];  
  21.     v3.heightDime.equalTo(@40);  
  22.     [rl addSubview:v3];  
  23.   
  24.     //v1,v2,v3平分父視圖的寬度。在平分前減去了30用做間距  
  25.     v1.widthDime.equalTo(@[v2.widthDime.add(-10), v3.widthDime.add(-10)]).add(-10);  
  26.     v1.leftPos.offset(10);  
  27.     v2.leftPos.equalTo(v1.rightPos).offset(10);  
  28.     v3.leftPos.equalTo(v2.rightPos).offset(10);  
  29.       
  30.   
  31.     /**某個視圖固定其餘平分**/  
  32.     UIView *v4 = [UIView new];  
  33.     v4.backgroundColor = [UIColor greenColor];  
  34.     v4.topPos.equalTo(v1.bottomPos).offset(80);  
  35.     v4.heightDime.equalTo(@40);  
  36.     v4.widthDime.equalTo(@260); //第一個視圖寬度固定  
  37.     [rl addSubview:v4];  
  38.       
  39.     UIView *v5 = [UIView new];  
  40.     v5.backgroundColor = [UIColor greenColor];  
  41.     v5.topPos.equalTo(v4.topPos);  
  42.     v5.heightDime.equalTo(@40);  
  43.     [rl addSubview:v5];  
  44.       
  45.     UIView *v6 = [UIView new];  
  46.     v6.backgroundColor = [UIColor greenColor];  
  47.     v6.topPos.equalTo(v4.topPos);  
  48.     v6.heightDime.equalTo(@40);  
  49.     [rl addSubview:v6];  
  50.       
  51.     //v1,v2,v3平分父視圖的寬度。在平分前減去了30用做間距  
  52.     v5.widthDime.equalTo(@[v4.widthDime.add(-10), v6.widthDime.add(-10)]).add(-10);  
  53.     v4.leftPos.offset(10);  
  54.     v5.leftPos.equalTo(v4.rightPos).offset(10);  
  55.     v6.leftPos.equalTo(v5.rightPos).offset(10);  
  56.       
  57.    
  58.       
  59.     /**子視圖按比例平分**/  
  60.     UIView *v7 = [UIView new];  
  61.     v7.backgroundColor = [UIColor blueColor];  
  62.     v7.topPos.equalTo(v4.bottomPos).offset(80);  
  63.     v7.heightDime.equalTo(@40);  
  64.     [rl addSubview:v7];  
  65.       
  66.     UIView *v8 = [UIView new];  
  67.     v8.backgroundColor = [UIColor blueColor];  
  68.     v8.topPos.equalTo(v7.topPos);  
  69.     v8.heightDime.equalTo(@40);  
  70.     [rl addSubview:v8];  
  71.       
  72.     UIView *v9 = [UIView new];  
  73.     v9.backgroundColor = [UIColor blueColor];  
  74.     v9.topPos.equalTo(v7.topPos);  
  75.     v9.heightDime.equalTo(@40);  
  76.     [rl addSubview:v9];  
  77.       
  78.     v7.widthDime.equalTo(@[v8.widthDime.multiply(0.3).add(-10),v9.widthDime.multiply(0.5).add(-10)]).multiply(0.2).add(-10);  
  79.     v7.leftPos.offset(10);  
  80.     v8.leftPos.equalTo(v7.rightPos).offset(10);  
  81.     v9.leftPos.equalTo(v8.rightPos).offset(10);  
  82.       
  83.     //請分別設置每一個視圖.hidden = YES 而且設置佈局的@property(nonatomic, assign) BOOL flexOtherViewWidthWhenSubviewHidden爲YES和NO的效果  
  84.   
  85. }  

看代碼咱們發現，在分配視圖時指定了視圖之間的間距這須要藉助offset的調用來指定間距，由於是均分視圖咱們又須要爲視圖的寬度留有間隔，所以咱們須要藉助add的方法來將計算出的寬度減去間距的值，而同時咱們爲佈局視圖的padding的值，咱們設置了10的間距來控制最右邊的間距爲10。
 
  有的時候咱們在均分子視圖時，當某個子視圖隱藏時其餘的剩餘的子視圖的寬度會進行調整，好比某個子視圖設置爲隱藏後，右邊的子視圖向左邊靠攏。而有的時候咱們但願當某個子視圖隱藏時，剩餘的部分從新填充慢佈局視圖的某個方位的尺寸，所以咱們能夠爲佈局視圖設置開關：
 

//均分寬度時當有隱藏子視圖，是否參與寬度計算,這個屬性只有在參與均分視圖的子視圖隱藏時纔有效,默認是NO

@property(nonatomic,assign)BOOL flexOtherViewWidthWhenSubviewHidden;

 

//均分高度時當有隱藏子視圖，是否參與高度計算,這個屬性只有在參與均分視圖的子視圖隱藏時纔有效，默認是NO

@property(nonatomic,assign)BOOL flexOtherViewHeightWhenSubviewHidden;

 

這兩個佈局視圖的屬性分別標明當某個子視圖數組均分父視圖時，而其中某個子視圖隱藏時，是否其餘視圖會從新分配寬度和高度。
 
3、相對佈局的高寬由子視圖決定
 
我在線性佈局的文章中有說明能夠經過wrapContent來決定是否佈局視圖的非方向是否由子視圖來決定。這時候咱們就不須要手動的指定佈局視圖的高度和寬度，而是由佈局視圖裏面的子視圖來決定佈局的尺寸，在android系統中咱們能夠設置wrapContent來設置佈局視圖的尺寸。一樣咱們在佈局中也分別提供了兩個屬性：
 
 

@property(nonatomic,assign)BOOL wrapContentWidth;

@property(nonatomic,assign)BOOL wrapContentHeight;

 
 
從上面的定義能夠看出，wrapContentWidth, wrapContentHeight則是指定佈局視圖的寬度和高度由子視圖決定，對於線性佈局來講若是是垂直方向的話wrapContentHeight是默認設置爲YES的，而水平方向則wrapContentWidth設置爲YES。而對於相對佈局來講二者默認都設置爲NO。
 
咱們先看結果界面：
 
 
[objc]  view plain copy
  1. -(void)loadView  
  2. {  
  3.     [super loadView];  
  4.       
  5.     MyRelativeLayout *rl = [[MyRelativeLayout alloc] initWithFrame:CGRectMake(10, 10, 0, 0)];  
  6.     rl.padding = UIEdgeInsetsMake(10, 10, 10, 10);  
  7.     [self.view addSubview:rl];  
  8.     rl.wrapContentWidth = YES;  
  9.     rl.wrapContentHeight = YES; //設置寬度和高度由全部子視圖包裹  
  10.     rl.backgroundColor = [UIColor grayColor];  
  11.       
  12.     UILabel *lb1 = [UILabel new];  
  13.     lb1.leftPos.equalTo(rl.leftPos).offset(20);  
  14.     lb1.text = @"aaaa";  
  15.     lb1.backgroundColor = [UIColor redColor];  
  16.     [lb1 sizeToFit];  
  17.     lb1.rightPos.offset(20);  
  18.       
  19.     [rl addSubview:lb1];  
  20.       
  21.       
  22.     UILabel *lb3 = [UILabel new];  
  23.     lb3.rightPos.equalTo(rl.rightPos).offset(5); //雖然這時候父視圖的寬度爲0,但仍是能夠設置離父視圖的距離  
  24.     lb3.topPos.equalTo(rl.topPos).offset(30);  
  25.     lb3.bottomPos.offset(10);  
  26.     lb3.text = @"ccc";  
  27.     lb3.backgroundColor = [UIColor redColor];  
  28.     [lb3 sizeToFit];  
  29.       
  30.     [rl addSubview:lb3];  
  31.       
  32.       
  33.     UILabel *lb2 = [UILabel new];  
  34.     lb2.text = @"bbbb";  
  35.     lb2.backgroundColor = [UIColor blueColor];  
  36.       
  37.     lb2.leftPos.equalTo(lb1.centerXPos);  
  38.     lb2.topPos.equalTo(lb1.bottomPos).offset(40);  
  39.     lb2.widthDime.equalTo(@50);  
  40.     lb2.heightDime.equalTo(@50);  
  41.     lb2.bottomPos.offset(40);  
  42.   
  43.      
  44.     [rl addSubview:lb2];  
  45.       
  46.       
  47.       
  48. }  


 
上面的代碼中咱們能夠看到佈局視圖是沒有指定高度和寬度的，而是設置了屬性wrapContentWidth = YES, wrapContentHeight = YES
 
那麼佈局視圖的高度和寬度是怎麼計算出來的呢。咱們是經過計算出全部子視圖的位置和尺寸的最大高度和寬度來獲得佈局視圖的高度和寬度的，在上面的代碼中咱們看到lb3的右邊和佈局視圖的右邊相差5，可是佈局視圖這時候的寬度是沒有計算出來的，可是咱們仍是能夠這樣設置，由於lb1, lb2的尺寸和高度已經把佈局視圖撐開到足夠的高度和寬度了。
 
同時經過wrapContentXXX的佈局視圖的屬性咱們能夠動態的調整佈局視圖自己的高度和寬度，所以咱們也很適合將佈局視圖放入到一個UIScrollView中去。
 
 
4、一組視圖在佈局視圖中居中
 
     有時候咱們但願佈局中的某些視圖總體居中，一個解決的方法是咱們爲這些視圖創建一個父視圖，而後讓這個父視圖居中，但這個前提是咱們須要新創建一個父視圖來包圍這批視圖。採用相對佈局的方法是不須要再新建一個附加的父視圖的。咱們先看界面。
 
 
 
界面中咱們看到上面的3個視圖總體是在父視圖的水平中間的，而下面3個則是在父視圖的垂直中間的，這個功能的代碼實現很簡單：
 
 
[objc]  view plain copy
  1. -(void)loadView  
  2. {  
  3.       
  4.     MyRelativeLayout *rl = [MyRelativeLayout new];  
  5.     rl.backgroundColor = [UIColor grayColor];  
  6.     self.view = rl;  
  7.       
  8.     //一組視圖水平居中。  
  9.     UILabel *lb1 = [UILabel new];  
  10.     lb1.text = @"abcdefg";  
  11.     [lb1 sizeToFit];  
  12.     lb1.backgroundColor = [UIColor redColor];  
  13.     lb1.topPos.offset(100);  
  14.     [rl addSubview:lb1];  
  15.       
  16.     UILabel *lb2 = [UILabel new];  
  17.     lb2.text = @"abcdefgfd";  
  18.     [lb2 sizeToFit];  
  19.     lb2.backgroundColor = [UIColor blueColor];  
  20.     lb2.topPos.offset(100);  
  21.     [rl addSubview:lb2];  
  22.       
  23.       
  24.     UILabel *lb3 = [UILabel new];  
  25.     lb3.text = @"abc";  
  26.     [lb3 sizeToFit];  
  27.     lb3.backgroundColor = [UIColor greenColor];  
  28.     lb3.topPos.offset(100);  
  29.     [rl addSubview:lb3];  
  30.       
  31.       
  32.     //lb1, lb2, lb3 三個視圖組成一個組在父視圖,lb2離lb15的間隔，lb3離lb210的間隔。若是要3個總體往右移則設置  
  33.     //lb1的offset。  
  34.     lb1.centerXPos.equalTo(@[lb2.centerXPos.offset(5), lb3.centerXPos.offset(10)]);  
  35.       
  36.     //對照。  
  37.     UILabel *lb4 = [UILabel new];  
  38.     lb4.text = @"你好";  
  39.     [lb4 sizeToFit];  
  40.     lb4.backgroundColor = [UIColor orangeColor];  
  41.     [rl addSubview:lb4];  
  42.     lb4.leftPos.equalTo(lb1.leftPos);  
  43.     lb4.topPos.equalTo(lb2.bottomPos).offset(10);  
  44.       
  45.       
  46.     //一組視圖垂直居中  
  47.     UILabel *lb5 = [UILabel new];  
  48.     lb5.text = @"abcdefg";  
  49.     [lb5 sizeToFit];  
  50.     lb5.backgroundColor = [UIColor redColor];  
  51.     lb5.centerXPos.equalTo(rl.centerXPos);  
  52.     [rl addSubview:lb5];  
  53.       
  54.     UILabel *lb6 = [UILabel new];  
  55.     lb6.text = @"abcdefgfd";  
  56.     [lb6 sizeToFit];  
  57.     lb6.backgroundColor = [UIColor blueColor];  
  58.     lb6.centerXPos.equalTo(rl.centerXPos);  
  59.     [rl addSubview:lb6];  
  60.       
  61.       
  62.     UILabel *lb7 = [UILabel new];  
  63.     lb7.text = @"abc";  
  64.     [lb7 sizeToFit];  
  65.     lb7.backgroundColor = [UIColor greenColor];  
  66.     lb7.centerXPos.equalTo(rl.centerXPos);  
  67.     [rl addSubview:lb7];  
  68.       
  69.     lb5.centerYPos.equalTo(@[lb6.centerYPos.offset(5), lb7.centerYPos.offset(10)]);  
  70.   
  71.       
  72. }  


代碼中咱們能夠看到lb1,lb2,lb3是水平居中的，而lb5,lb6,lb7則是垂直居中的。咱們只須要分別爲lb1.centerXPos,lb5.centerYPos指定一個關聯的居中的數組就能夠了，數組的內容就是其餘關聯的視圖的對應的centerXPos或者centerYPos。同時咱們能夠指定offset來代表視圖之間的偏移的距離。
 
 
 
 
代碼以下：
 
[objc]  view plain copy
  1. -(void)loadView  
  2. {  
  3.     MyRelativeLayout *rl = [MyRelativeLayout new];  
  4.     self.view = rl;  
  5.       
  6.     UILabel *lb1up = [UILabel new];  
  7.     lb1up.text = @"左上面";  
  8.     lb1up.backgroundColor = [UIColor greenColor];  
  9.     lb1up.font = [UIFont systemFontOfSize:17];  
  10.     [lb1up sizeToFit];  
  11.     [rl addSubview:lb1up];  
  12.       
  13.     UILabel *lb1down = [UILabel new];  
  14.     lb1down.text = @"我左在下面";  
  15.     lb1down.backgroundColor = [UIColor greenColor];  
  16.     [lb1down sizeToFit];  
  17.     [rl addSubview:lb1down];  
  18.       
  19.       
  20.     UILabel *lb2up = [UILabel new];  
  21.     lb2up.text = @"我在中間上面";  
  22.     lb2up.backgroundColor = [UIColor greenColor];  
  23.     lb2up.font = [UIFont systemFontOfSize:12];  
  24.     [lb2up sizeToFit];  
  25.     [rl addSubview:lb2up];  
  26.       
  27.     UILabel *lb2down = [UILabel new];  
  28.     lb2down.text = @"中";  
  29.     lb2down.backgroundColor = [UIColor greenColor];  
  30.     [lb2down sizeToFit];  
  31.     [rl addSubview:lb2down];  
  32.       
  33.       
  34.     UILabel *lb3up = [UILabel new];  
  35.     lb3up.text = @"右上";  
  36.     lb3up.backgroundColor = [UIColor greenColor];  
  37.     [lb3up sizeToFit];  
  38.     [rl addSubview:lb3up];  
  39.       
  40.     UILabel *lb3down = [UILabel new];  
  41.     lb3down.text = @"右邊的下方";  
  42.     lb3down.backgroundColor = [UIColor greenColor];  
  43.     lb3down.font = [UIFont systemFontOfSize:16];  
  44.     [lb3down sizeToFit];  
  45.     [rl addSubview:lb3down];  
  46.       
  47.     //左，中，右三組視圖分別垂直居中顯示，而且下面和上面間隔10  
  48.     lb1up.centerYPos.equalTo(@[lb1down.centerYPos.offset(10)]);  
  49.     lb2up.centerYPos.equalTo(@[lb2down.centerYPos.offset(10)]);  
  50.     lb3up.centerYPos.equalTo(@[lb3down.centerYPos.offset(10)]);  
  51.       
  52.     //上面的三個視圖水平居中顯示而且間隔60  
  53.     lb1up.centerXPos.equalTo(@[lb2up.centerXPos.offset(60),lb3up.centerXPos.offset(60)]);  
  54.       
  55.     //下面的三個視圖的水平中心點和上面三個視圖的水平中心點對齊  
  56.     lb1down.centerXPos.equalTo(lb1up.centerXPos);  
  57.     lb2down.centerXPos.equalTo(lb2up.centerXPos);  
  58.     lb3down.centerXPos.equalTo(lb3up.centerXPos);  
  59.   
  60.   
  61.       
  62.       
  63. }  

經過代碼咱們能夠看出來雖然是有上下兩排視圖，可是咱們能夠經過centerYPos和centerXPos的值設置數組的方式來實現一組視圖的居中顯示。
 
 
 
5、總結
 
 好了，相對視圖的介紹就佈局到這裏了，到這裏我分別爲你介紹了框架佈局，線性佈局和相對佈局方面的東西，經過這三個佈局的使用咱們徹底能夠擺脫對IOS的自動佈局和sizeClass的使用，而用更加簡單清晰的方法來佈局您的界面，但願個人庫能對您提供很是有利的幫助，若是您須要用個人庫來編碼，那麼就請到：
 
https://github.com/youngsoft/MyLinearLayout 中下載代碼和DEMO吧。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程