iOS適配,iOS自動佈局的幾種高階用法(autoresizing,Masonry)

熟悉iOS開發的人，可能都知道，iOS6出來以後，autolayout自動佈局就出現了，但是剛開始大家都不怎麼用，直到iPhone 5s、iPhone6出來後，螢幕變得越來越多樣，單純用if來判斷尺寸已完全不能滿足了，自動佈局才逐漸走程序序猿的程式設計程式碼中。
Autolayout自動佈局為什麼能被大家所常用呢？可能大家都知道之前有一個自動伸縮的autoresizing屬性，主要適用於一個控制元件和自己父控制元件之間的關係，而只有autolayout才真正可以在任意兩個控制元件中建立關係。

一 ,autoresizing
autoresizing需要注意的是 storyboard中設定的約束和手碼中設定的約束是相反的。 storyboard圖形頁面裡點的右邊的線和下邊的線的意思是“固定”

而手碼中常用的autoresizingMasks屬性中的列舉都是Flexible可“伸縮”的。所以假如想要讓右邊和下邊的距離固定，在程式碼中應該設定左邊和上邊的可伸縮約束。

yellowView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin |UIViewAutoresizingFlexibleTopMargin;
有了autolayout之後這個自動伸縮很少用了一共七個屬性。

無，寬可伸縮，高可伸縮，左間距可伸縮，右間距可伸縮，上間距可伸縮，下間距可伸縮

UIViewAutoresizingNone                = 0,

UIViewAutoresizingFlexibleWidth       = 1 << 1,

UIViewAutoresizingFlexibleHeight    = 1 << 4,

UIViewAutoresizingFlexibleLeftMargin = 1 << 0,

UIViewAutoresizingFlexibleRightMargin  = 1 << 2,

UIViewAutoresizingFlexibleTopMargin = 1 << 3,

UIViewAutoresizingFlexibleBottomMargin = 1 << 5

每個列舉值都是位移列舉，可以在一行程式碼中傳多個值。

關於label的自動識別大小

label想要在介面中顯示成這樣

<ignore_js_op>

<ignore_js_op>

意義是下面的控制元件可以根據上面label的底部進行自動調整。

這個不是用sizetofit設定的，而是用約束，會在程式執行中資料變了約束立即改變，尺寸也立即改變。

這種設計方法是：

1.設定label的左邊和上邊的約束，然後再設定下最寬度約束假設是150，把label裡面的lines屬性設定成0即隨意任意多行。這樣裡面的文字就會自動換行並且一直顯示完，label的背景色也是自動匹配。

2.但是右邊還多出了一塊。label的右邊還有一塊藍色並不是緊緊的挨著。這時就要選中那個寬度的約束

<ignore_js_op>

再到右邊把Relation由原本的equal改成

<ignore_js_op>

less than or Equal 。這時候左邊的約束顯示變了

<ignore_js_op>

變成≤了。
執行之後結果是：

<ignore_js_op>

這裡可以清楚的看到label的右邊緊緊挨著邊了。

3.但是有時候資料可能為空，一旦為空label的大小就被擠沒有了，下面的控制元件也凌亂了。所以為了保證就算資料沒有空當也要留著佔位，就找給他設定兩個高度約束，一個是大於等於一個是小於等於，包裹成一個範圍。這時候要把上面width的小於等於改成equal。

<ignore_js_op>

這時候執行效果遇到大量文字和沒文字的兩種效果是

<ignore_js_op>

<ignore_js_op>

起到了佔位的作用。即使文字沒有地方還在。

關於Constraints在哪找的問題

<ignore_js_op>

左邊的圖constraints有的在label節點下有的在View節點下，究竟是什麼原因決定了constraints在哪個節點下面？

是看這個約束是否依賴了別的控制元件，如果就是自己設定固定寬高啥的不關係到別人那就是在自己下面。如果依賴誰設定了間距，那這個約束就會放在自己和依賴的控制元件的最小公共父控制元件下。
如圖

<ignore_js_op>

<ignore_js_op>

二,Masonry

Masonry下載地址：

本文Demo下載地址：

開源專案Masonry旨在讓自動佈局（Auto Layout）的程式碼更簡潔、可讀性更強。

Masonry，“一個輕量級的佈局框架，採用更優雅的語法封裝自動佈局”，不需要使用XIB和Storyboard。它的創造者Jonas Budelmann論證了儘管自動佈局很強大，但它很快就變得冗長而不可讀。

Masonry是一種領域特定語言（DSL），為自動佈局的所有功能提供便捷的方法，包括建立和修改約束、存取屬性、設定優先順序以及除錯支援。

GitHub上的示例程式碼展示了Masonry的典型用法及其簡潔的語法。

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
   make.edges.equalTo(superview).with.insets(padding);
}];

自動佈局最重要的是約束：UI元素間關係的數學表示式。約束包括尺寸、由優先順序和閾值管理的相對位置。它們是新增劑，可能導致約束衝突、約束不足造成佈局無法確定。這兩種情況都會產生異常。

通過程式設計的方式，不使用Masonry，也可以建立約束：建立NSLayoutConstraint,關聯到檢視並指定屬性和關係。Apple也提供了Visual Format Language，它是另一種以文字方式描述關係的領域特定語言。

自動佈局既不是強制的，也不是獨有的方法。“springs and struts”仍然是一種有效的方法。“springs and struts”也就是autoresizing masks，決定了一個檢視的父檢視大小變化時，其自身如何變化。

“Springs and struts”模式需要編寫程式碼來處理各種螢幕方向、尺寸和動態內容。
iOS 7中的動態型別允許使用者在應用中設定文字大小偏好。
支援iOS 6和iOS 7以及它們不同的元素度量。

自動佈局並非完美無缺。Apple提供了一篇指南，以常用的UIScrollView為例說明如何使用自動佈局。Matt Newburg在一篇回覆中給出了充足的理由說明為什麼“自動佈局在檢視轉換時並不完美”。為了彌補這種不足，他建議更多地使用層轉換。

任何型別的自動佈局程式碼意味著你將無法獲得Xcode5提供的Interface Builder增強功能的支援。特別是視覺化地解決自動佈局問題的功能，在assistant editor的預覽模式中檢視各種螢幕方向、尺寸和iOS系統版本下的執行時佈局的功能。

Masonry是一個輕量級的佈局框架擁有自己的描述語法採用更優雅的鏈式語法封裝自動佈局簡潔明瞭並具有高可讀性而且同時支援 iOS 和 Max OS X。

我們先來看一段官方的sample code來認識一下Masonry

123	`[view1 mas_makeConstraints:^(MASConstraintMaker *make) {make.edges.equalTo(superview).with.insets(padding);}];`

看到block裡面的那句話: make edges equalTo superview with insets

通過鏈式的自然語言就把view1給autolayout好了是不是簡單易懂?

使用

看一下Masonry支援哪一些屬性

1234567891011 @property (nonatomic, strong, readonly) MASConstraint *left;@property (nonatomic, strong, readonly) MASConstraint *top;@property (nonatomic, strong, readonly) MASConstraint *right;@property (nonatomic, strong, readonly) MASConstraint *bottom;@property (nonatomic, strong, readonly) MASConstraint *leading;@property (nonatomic, strong, readonly) MASConstraint *trailing;@property (nonatomic, strong, readonly) MASConstraint *width;@property (nonatomic, strong, readonly) MASConstraint *height;@property (nonatomic, strong, readonly) MASConstraint *centerX;@property (nonatomic, strong, readonly) MASConstraint *centerY;@property (nonatomic, strong, readonly) MASConstraint *baseline;

這些屬性與NSLayoutAttrubute的對照表如下

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

在ios8釋出後又新增了一堆奇奇怪怪的屬性(有興趣的朋友可以去瞅瞅) Masonry暫時還不支援(不過你要支援ios6,ios7 就沒必要去管那麼多了)

在講例項之前先介紹一個MACRO

1	`#define WS(weakSelf) __weak __typeof(&*self)weakSelf = self;`

快速的定義一個weakSelf 當然是用於block裡面啦下面進入正題(為了方便我們測試的superView都是一個size為(300,300)的UIView)

下面通過一些簡單的例項來簡單介紹如何輕鬆愉快的使用Masonry:

1. [基礎] 居中顯示一個view

1234567891011121314151617 - (void)viewDidLoad{[super viewDidLoad];// Do any additional setup after loading the view.WS(ws);UIView *sv = [UIView new];[sv showPlaceHolder];sv.backgroundColor = [UIColor blackColor];[self.view addSubview:sv];[sv mas_makeConstraints:^(MASConstraintMaker *make) {make.center.equalTo(ws.view);make.size.mas_equalTo(CGSizeMake(300, 300));}];}

程式碼效果

使用我之間寫的MMPlaceHolder 可以看到superview已經按照我們預期居中並且設定成了適當的大小

那麼先看看這幾行程式碼

123456789101112

//從此以後基本可以拋棄CGRectMake了UIView *sv = [UIView new];//在做autoLayout之前一定要先將view新增到superview上否則會報錯[self.view addSubview:sv];//mas_makeConstraints就是Masonry的autolayout新增函式將所需的約束新增到block中行了[sv mas_makeConstraints:^(MASConstraintMaker *make) {//將sv居中(很容易理解吧?)make.center.equalTo(ws.view);//將size設定成(300,300)make.size.mas_equalTo(CGSizeMake(300, 300));

iOS適配,iOS自動佈局的幾種高階用法(autoresizing,Masonry)

iOS適配,iOS自動佈局的幾種高階用法(autoresizing,Masonry)

適配手機端的幾種寫法

Java生成隨機數的幾種高階用法！

適配 iOS 8 時遇到的問題兩則：遠程推送和 Unwind Segue

iOS 適配iOS9

0c-適配 iOS 11

css適配ios Android

iOS----------適配iOS12

iOS 適配 iOS11，會引起呼叫系統相簿、分享郵件的系統介面上移問題

適配iOS 11和iPhone X——導航欄、UITableView

iOS中Runtime的幾種基本用法記錄（必看）

iOS 適配iPhone XR/XS/XS MAX

適配 iOS 11 & iPhone X

貓貓分享 iOS 適配iPhoneXS Max，iPhoneXS，iPhoneXR

iOS 適配iPhone XR/iPhone XS Max

iOS 適配全面屏iPhone X系列手機-Swift版

Unity打包IOS 適配iPhone X

iOS適配的相關內容的整理

ios適配

Unity3d 二維碼功能（掃碼及相簿讀取，適配ios與android）

iOS適配,iOS自動佈局的幾種高階用法(autoresizing,Masonry)

相關推薦