使用Masonry進行介面搭建吧

2022-09-11 06:27:07 字數 3632 閱讀 8753

在建立ios專案時,要對使用者介面進行處理,常用的方式分為視覺化程式設計**搭建檢視兩種。

1.視覺化程式設計分又為storyboardxib兩種。

使用xib可以進行**與視覺化混編,在建立viewcontroller或cell時,直接勾選also create xib file即可使用,乙個xib負責乙個介面檢視的搭建。

而使用storyboard則可以在乙個storyboard檔案內進行多個介面的搭建以及跳轉,控制器與介面的關聯則通過storyboard id(identifier)。

無論是xib還是storyboard進行介面搭建,都要使用約束進行各個空間的布局,可以更加直觀的看到介面搭建的效果,但想要實現**的管理,似乎比較不容易。

2.使用**搭建,可以使用cgrect,cgsize,cgpoint等相關方法,但是效率太低,容易寫死資料,適配性不太好;還可以使用autolayout(自動布局)處理,在github上有乙個針對於autolayout的第三方:masonry,已經將其封裝的非常好,可以方便快捷的使用**對檢視進行布局。

masonry的檢視布局,需要在子檢視已經載入在父檢視之後才能使用方法進行布局處理。布局**書寫在乙個block塊中,通過鏈式語法進行方法的呼叫:

1

#import

"viewcontroller.h"2

#import

// 使用了cocoapods進行第三方的安裝,使用<>引用

3#import

"uiview+equalspacingline.h

" // 原masonry中沒有的,需要引用自定義的等寬排列的類目45

#define size [uiscreen mainscreen].bounds.size67

@inte***ce

viewcontroller ()89

@end

1011

@implementation

viewcontroller

1213 - (void

)viewdidload ];

2425

//等寬排列設定

2627 uiview *view2 = [uiview new

];28 view2.backgroundcolor =[uicolor whitecolor];

29[view addsubview:view2];

3031 [view2 mas_makeconstraints:^(masconstraintmaker *make) ];

3637 uiview *view3 = [uiview new

];38 view3.backgroundcolor =[uicolor greencolor];

39[view addsubview:view3];

4041 [view3 mas_makeconstraints:^(masconstraintmaker *make) ];

4546 uiview *view4 = [uiview new

];47 view4.backgroundcolor =[uicolor redcolor];

48[view addsubview:view4];

4950 [view4 mas_makeconstraints:^(masconstraintmaker *make) ];

5455 uiview *view5 = [uiview new

];56 view5.backgroundcolor =[uicolor cyancolor];

57[view addsubview:view5];

5859 [view5 mas_makeconstraints:^(masconstraintmaker *make) ];

6465 uiview *view6 = [[uiview alloc] initwithframe:cgrectmake(0, 0, 50, 500

)];66 view6.backgroundcolor =[uicolor bluecolor];

67[view addsubview:view6];

6869 [view6 mas_makeconstraints:^(masconstraintmaker *make) ];

7475

//等寬排列

76 [view equalspacinglinewithviews:@[view2, view3, view4, view5, view6] bydirection:direction_horizontal andblock:^(masconstraintmaker *make) ];

7980}81

82@end

效果圖:

等寬排列類目:

uiview+equalspacingline.h1 #import

2#import

//!!! 使用前務必引用masonry34

//排列方向

5typedef ns_enum(nsinteger, direction) ;910

@inte***ce

uiview (equalspacingline)

1112/**

13* 等寬排列

14* @param views 子檢視陣列,僅設定寬高即可(使用masonry設定)

15* @param direction 排列方向

16* @param block 新增masonry**塊,如果為nil,則姿勢圖居中

17* @return void

18*/

19 - (void)equalspacinglinewithviews:(nsarray*)views bydirection:(direction)direction andblock:(void(^)(masconstraintmaker *make))block;

2021

@end

uiview+equalspacingline.m1#import

"uiview+equalspacingline.h"2

3@implementation

uiview (equalspacingline)

45 - (void)equalspacinglinewithviews:(nsarray*)views bydirection:(direction)direction andblock:(void(^)(masconstraintmaker *make))block16}

1718

//檢視排列

19for(int i = 0; i < newviews.count; i++)else

40//

新增masonry**塊,若為nil,則居中

41if

(block)

42block(make);

43}];44}

45}4647

@end

iOS使用Masonry時進行動畫操作

最近稍微閒了一些,決定把之前漏掉的知識再補充一下,然後發現在使用masonry的時候動畫怎麼實現呢?於是經過練習和查詢相關方法,終於找到了正確的做法,希望能夠對有需要的人提供一些幫助。簡單來說masonry的動畫使用方式是和正常的動畫的使用方式是一樣的,通過uiview animatewithdur...

Masonry使用小結

推薦使用pod進行管理安裝 開啟終端,pod search masonry 得到當前可用版本 進入工程主目錄,編輯podfile,增加 pod masonry 在終端進入工程主目錄,執行 pod update 含義mas makeconstriaints 新增約束 mas updateconstri...

Masonry 簡單使用

magicnumber autoresizingmask autolayout 以上是純手寫 所經歷的關於頁面布局的三個時期 在iphone1 iphone3gs時代 window的size固定為 320,480 我們只需要簡單計算一下相對位置就好了 在iphone4 iphone4s時代 蘋果推出...