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);
    }];