Masonry自動布局與UIScrolView適配，masonryuiscrolview

Masonry自動布局與UIScrolView適配，masonryuiscrolview
Masonry介紹

Masonry是一個輕量級的布局架構 擁有自己的描述文法 採用更優雅的鏈式文法封裝自動布局 簡潔明了 並具有高可讀性 而且同時支援 iOS 和 Max OS X。可以通過cocoapods將其匯入。

Masonry使用

Masonry屬性及其說明

//左側//@property (nonatomic, strong, readonly) MASViewAttribute *mas_left;//上側//@property (nonatomic, strong, readonly) MASViewAttribute *mas_top;//右側//@property (nonatomic, strong, readonly) MASViewAttribute *mas_right;//下側//@property (nonatomic, strong, readonly) MASViewAttribute *mas_bottom;//首部//@property (nonatomic, strong, readonly) MASViewAttribute *mas_leading;//尾部//@property (nonatomic, strong, readonly) MASViewAttribute *mas_trailing;//寬度//@property (nonatomic, strong, readonly) MASViewAttribute *mas_width;//高度//@property (nonatomic, strong, readonly) MASViewAttribute *mas_height;//橫向中點//@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerX;//縱向中點//@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerY;//文本基準//@property (nonatomic, strong, readonly) MASViewAttribute *mas_baseline;

其中leading與left trailing與right 在正常情況下是等價的 但是當一些布局是從右至左時(比如阿拉伯文?沒有類似的經驗) 則會對調 換句話說就是基本可以不理不用 用left和right就好了

• 首先介紹下UIScrollView的frame與contentsize的區別

 

• 重要說明

（1）UIScrollView的frame與contentsize屬性的區分：UIScrollView的frame指的是這個scrollview的可視範圍（可看見的地區），contentsize是其滾動範圍。

（2）contentinset（不帶*號的一般不是結構體就是枚舉），為UIScrollView增加額外的捲動區域。（上，左，下，右）逆時針。contentinset可以使用代碼或者是視圖控制器進行設定，但兩者有區別（注意區分）。

（3）contentsize屬性只能使用代碼設定。

（4）contentoffset是個CGpoint類型的結構體，用來記錄ScrollView的滾動位置，即記錄著“框”跑到了哪裡。知道了這個屬性，就知道了其位置，可以通過設定這個屬性來控制這個“框”的移動。

（5）不允許直接修改某個對象內部結構體屬性的成員，三個步驟（先拿到值，修改之，再把修改後的值賦回去）。

（6）增加了額外地區後，contentoffset的原點在哪裡？

• 有助於理解的幾個

模型圖：

對比圖：

座標圖：

Masonry與UIScrollView的自動布局：

• 首先確定UIScrollView的位置：相當於確定UIScrollView的frame

 

 //UIScrollView滑動介面    [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {        make.top.mas_equalTo(self.view);        make.left.equalTo(self.view).offset(0);        make.right.equalTo(self.view).offset(0);        make.bottom.mas_equalTo(self.view.mas_bottom).offset(-60);    }];

• 適配介面1，使介面1的top，left，height，width與scrollview對齊，其中在Masonry適配中top，可以與bottom或則height確定View的豎直方位，同理Left可以與right或則width確定水平位置的方位

//1介面適配    [self.accountElectricChargeView mas_makeConstraints:^(MASConstraintMaker *make) {        make.top.mas_equalTo(@0);        make.left.mas_equalTo(self.scrollView.mas_left);        make.height.mas_equalTo(self.scrollView.mas_height);        make.width.mas_equalTo(self.scrollView.mas_width);    }];

• 適配介面2：因為是適配水平位置，所以top仍然與scrollView的對齊，left與第一個介面的right對齊，bottom與scrollView或則第一個介面對齊

 //2介面適配    [self.accountPeakElectricView mas_makeConstraints:^(MASConstraintMaker *make) {        make.top.mas_equalTo(@0);        make.left.mas_equalTo(self.accountElectricChargeView.mas_right);　　　　 make.bottom.mas_equalTo(self.scrollView);

• 　　　　 make.width.mas_equalTo(self.accountElectricChargeView.mas_width); }];

• 適配介面3：與介面2同理

 //3介面適配    [self.accountElectricFactorView mas_makeConstraints:^(MASConstraintMaker *make) {        make.top.mas_equalTo(@0);        make.left.mas_equalTo(self.accountPeakElectricView.mas_right);        make.bottom.mas_equalTo(self.scrollView);        make.width.mas_equalTo(self.accountElectricChargeView.mas_width);    }];

• 最後，使scrollview的right與第三個介面（即最後一個介面）的right對齊。

[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {        make.right.mas_equalTo(self.accountElectricFactorView.mas_right);    }];