AutoLayout 淺析動畫


1.AutoLayout相關的幾個易混淆的方法

setNeedsLayout
layoutIfNeeded
layoutSubViews
setNeedsUpdateConstraints
updateConstraitsIfNeed
updateConstraints

子視圖在界面上的顯示大概經過了:更新約束-通過約束依賴關系得到具體的frame-展示到界面。上面幾個是和autolayout相關的方法,有必要大概了解一下這些方法具體是怎么用的以及在什么情況下觸發。

1.[layoutView setNeedsUpdateConstraints]:告訴layoutView需要更新約束,在下次計算或者更新約束會更新約束
2.[layoutView updateConstraintsIfNeeded]:告訴layoutView立即更新約束,
3.updateConstraints:系統更新約束的實際方法

總結上面的3點就是,setNeedsUpdateConstraints確保了在將來某一時刻調用updateConstraintsIfNeeded之后會接著調用updateConstraints,從而達到更新view的約束的目的。但是要注意的是,如果僅僅單獨調用2,不一定能夠保證會調用updateConstraints,因為如果view上的約束是沒有變動的且沒有標記需要update的,這時就不會調用updateConstraints

4.[layoutView setNeedsLayout]:告訴layoutView頁面需要更新,但不立即執行
5.[layoutView layoutIfNeeded]:告訴layoutView頁面布局立即更新
6.layoutSubviews:系統重寫布局的實際方法

總結以上3點,setNeedsLayout確保了在將來某個時刻通過調用layoutIfNeeded之后會調用系統的layoutSubviews,從而重寫對view重新布局。同樣的如果單獨調用5,不一定能夠保證調用layoutSubviews。[注:筆者寫了個demo發現,調用setNeedsLayout會直接調用layoutSubviews]。如果想要每次都能立即更新布局,那就要把兩個方法一起用,同樣也適用于1和2。

系統調用layoutSubViews時,就會調用updateConstraintsIfNeeded,通過更新約束,用superView到subView的層次順序,來計算frame,反向確定布局。

stackoverflow上有關于上面幾個方法的深入解答并分享了作者的實用經驗:

  • 如果僅想要立即改變約束,調用setNeedsLayout
  • 如果改變view的一些屬性(如offsets)可能會導致布局的改變,那么調用setNeedsUpdateConstraints,更多的時候后面需要加setNeedsLayout
  • 如果想要立即改變布局,如會形成新的frame,那么需要在調用layoutIfNeeded

2.AutoLayout與動畫

###[UIView animateWithDuration]方法

傳統的動畫主要是通過計算frame來進行動畫,在autolayout下,主要是利用約束,動畫的本質實際上是從一種約束狀態變成另一種約束狀態,從而來達到動畫的目的。

這個例子的Demo在這里。

ViewController.h文件中:

@property (weak, nonatomic) IBOutlet UIView *animateView;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftConstraint;

通過改變leftConstraint的值來實現具體的平移動畫,具體代碼如下:

self.leftConstraint.constant = 200;[UIView animateWithDuration:2 animations:^{[self.view layoutIfNeeded];
}];

對于這類簡單動畫,只需要在animation的block中調用layoutIfNeeded即可,從經驗來看,只要調用這個方法即可。

使用Masonry寫動畫

如果你厭倦了蘋果官方的NSLayoutConstraint的繁雜寫法以及VFL的奇怪語法,那么Masonry是個不錯的選擇。

Masonry的官方介紹,它是一個輕量級的布局框架,擁有自己的描述語法,采用優雅的鏈式語法封裝自動布局,更加簡單的添加和更新約束,提供了友好的屬性和Debug功能,支持iOS和Mac,最重要的是大大提高了可讀性。

目前Masonry處于維護狀態(bugfix),原因是它的開發人員考慮到越來越多的人會用swift,所以開發人員更專注開發其swift版本–SnpaKit。這篇文章仍然用Masonry。

用cocoaPods引用Masonry:

pod 'Masonry'

Masonry提供了非常優雅的屬性和方法:

屬性:MASViewAttribute

Masonry提供的屬性及其對應的NSLayoutAttribute關系如下:

MASViewAttribute NSLayoutAttribute
view.mas_left NSLayoutAttributeLeft
view.mas_right NSLayoutAttributeRight
view.mas_top NSLayoutAttributeTop
view.mas_bottom NSLayoutAttributeBottom
view.mas_leading NSLayoutAttributeLeading
view.mas_trailing NSLayoutAttributeTrailing
view.mas_width NSLayoutAttributeWidth
view.mas_height NSLayoutAttributeHeight
view.mas_centerX NSLayoutAttributeCenterX
view.mas_centerY NSLayoutAttributeCenterY
view.mas_baseline NSLayoutAttributeBaseline

我們可以很方便的獲得到屬性。

常見用法示例(引自官方文檔)

edges

//讓當前view的top bottom left right和view2完全一樣,表現為和view2大小一樣
make.edges.equalTo(view2);// 讓當前view進行這樣的約束:top = superview.top + 5, left = superview.left + 10,bottom = superview.bottom - 15, right = superview.right - 20
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

size

//讓當前view的size相對于titleLabel的size要greater than or equal to  
make.size.greaterThanOrEqualTo(titleLabel)// 讓當前view進行約束:width = superview.width + 100, height = superview.height - 50
make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))

center

// 當前view的中心點和button1相等
make.center.equalTo(button1)// 當前view約束:centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))

還可以將屬性連起來寫:

// 左右低對superview對齊,高和otherView對齊
make.left.right.and.bottom.equalTo(superview); //接近于自然語言了
make.top.equalTo(otherView);

三個方法

1.mas_makeConstraints

給view添加約束的方法,

[masView mas_makeConstraints:^(MASConstraintMaker *make) {make.leading.equalTo(self.view).offset(20);make.top.equalTo(self.view).offset(200);make.width.offset(80);make.height.offset(80);
}];

2.mas_updateConstraints
更新約束的方法,如果view已經使用了mas_makeConstraints這個方法后,在更新約束時需使用這個方法。

3.mas_remakeConstraints
重新添加約束,它是先將view上的約束全部uninstall掉,然后添加約束。

比較友好的Debug(引自官方文檔)

在添加約束的時候避免不了的會遇到約束錯誤,蘋果原生的報錯真的很不友好,讓人看不懂,如下:

Unable to simultaneously satisfy constraints.....blah blah blah....
("<NSLayoutConstraint:0x7189ac0 V:[UILabel:0x7186980(>=5000)]>","<NSAutoresizingMaskLayoutConstraint:0x839ea20 h=--& v=--& V:[MASExampleDebuggingView:0x7186560(416)]>","<NSLayoutConstraint:0x7189c70 UILabel:0x7186980.bottom == MASExampleDebuggingView:0x7186560.bottom - 10>","<NSLayoutConstraint:0x7189560 V:|-(1)-[UILabel:0x7186980]   (Names: '|':MASExampleDebuggingView:0x7186560 )>"
)Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x7189ac0 V:[UILabel:0x7186980(>=5000)]>

UILabel:0x7186980可能也會非上一點時間找具體的Label是哪個。

Masonry重寫了NSLayoutConstraint的(NSString *)description的方法,使得一起看起來較為友好了:

Unable to simultaneously satisfy constraints......blah blah blah....
("<NSAutoresizingMaskLayoutConstraint:0x8887740 MASExampleDebuggingView:superview.height == 416>","<MASLayoutConstraint:ConstantConstraint UILabel:messageLabel.height >= 5000>","<MASLayoutConstraint:BottomConstraint UILabel:messageLabel.bottom == MASExampleDebuggingView:superview.bottom - 10>","<MASLayoutConstraint:ConflictingConstraint[0] UILabel:messageLabel.top == MASExampleDebuggingView:superview.top + 1>"
)Will attempt to recover by breaking constraint
<MASLayoutConstraint:ConstantConstraint UILabel:messageLabel.height >= 5000>

可以具體是UILabel:messageLabel.height出了問題。

具體Demo

ViewController.m中,先對masView進行約束:

masView = [UIView new];
masView.backgroundColor = [UIColor redColor];
[self.view addSubview:masView];
[masView mas_makeConstraints:^(MASConstraintMaker *make) {make.leading.equalTo(self.view).offset(20);//距離self.view左側20make.top.equalTo(self.view).offset(200);//距離self.view頂部200make.width.offset(80);//寬度80make.height.offset(80);//高度80
}];

動畫的實現代碼:

[masView mas_updateConstraints:^(MASConstraintMaker *make) {make.width.and.height.offset(100);make.leading.equalTo(self.view).offset(100);
}];[UIView animateWithDuration:3 animations:^{[self.view layoutIfNeeded];
}];

先用mas_updateConstraints更新masView的約束,然后調用animateWithDuration方法。

通過用masonry實現的動畫可讀性更高,利于維護,且能實現比較多的動畫效果。

3.實際經驗

實踐出真知,需要通過實際項目來進行實踐驗證。我也總結項目過程中的一些實際經驗:

  • 不能有任何一個約束的warning。對于約束的warning是要引起最夠重視的,我們發現在iOS8下約束的warning沒有引起crash,但是在iOS6上卻crash。這個原因應該是蘋果開發autolayout的歷史變遷所致。所以當我們發現約束有warning的時候一定要改正確,項目中保證0warning。
  • 復雜頁面的約束出現較多約束錯誤時,可以先清掉所有的約束,重新加約束。有時候發現約束越改越混亂,不如清掉所有的約束重新理清思路加約束。
  • 動畫不一定非要是約束動畫。我們知道autolayout到最終都是轉化為對應的frame,所以frame是關鍵點。當一個視圖(superView)布局好了之后,它的subView實際上仍然可以用傳統的frame進行動畫,不一定非要寫約束。但是這個方法是不倡導的,既然用了約束就該將約束進行到底。
  • 犧牲了部分的效率。約束在轉化為具體的frame過程中必然會產生性能上的問題,我們發現在iPhone4的iOS6上面表現的效果并不是很好,但是隨著硬件的越來越強大,這個性能問題最終會被忽略掉的。

對于一般應用類的app上的動畫效果,使用上述方法已經足夠。方法最夠的簡單,需要理解的是其中的約束思想。文中用到的demo已經上傳到這里。

通過這三篇關于AutoLayout的介紹文章,相信足以解決AutoLayout這個問題了。


本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/397823.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/397823.shtml
英文地址,請注明出處:http://en.pswp.cn/news/397823.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

vue 轉為靜態html,Vue CLI 3使用:HTML和靜態資源(五)

HTMLpublic/index.html 文件是一個會被 html-webpack-plugin 處理的模板。構建中&#xff0c;各種資源路徑會被注入解析。可以使用 lodash template 語法插入內容。用來做不轉義插值&#xff1b;用來做 HTML 轉義插值&#xff1b;用來描述 JavaScript 流程控制。除了被 html-we…

animate css3 應用的借鑒,一個同事寫的JS

$("#banner").height($(window).height()-125);$(window).resize(function(){ $("#banner").height($(window).height()-125);}); //首頁幻燈$(".indeximgs:first").show();var i0;$(".leftbut").click(function(){$(".indexim…

從html導出帶樣式的excel,Jquery導出帶樣式的Excel

工作中做導出的時候&#xff0c;需要導出自定義的表格或嫌棄導出的Excel格式太難看了。需要設置顏色、字號大小、加粗、合并單元格等等。特性&#xff1a;支持過濾 某個位置支持過濾 img 標簽支持過濾 a 標簽支持過濾 input 標簽支持包含 行內樣式。HTML頁面&#xff1a;HTML頁…

elementui from表單提交_elementui upload與form一起提交

學生基本信息管理操作中&#xff0c;有照片&#xff0c;可以上傳也可以不上傳&#xff0c;在表單界面可以修改照片&#xff0c;el-upload控件可以帶額外參數提交&#xff0c;jquery的post模擬不了成表單帶文件提交的方式&#xff0c;因此&#xff0c;判斷如果有上傳文件時&…

information_schema.character_sets 學習

information_schema.character_sets 表用于查看字符集的詳細信息 1、character_sets 常用列說明&#xff1a; 1、character_set_name&#xff1a;    字符集名 2、default_collate_name&#xff1a;    默認排序規則   3、description&#xff1a;         …

asp.net mvc 用Redis實現分布式集群共享Session。

1、這兩天研究Redis搞分布式session問題&#xff0c;網上找的資料都是用ServiceStack.Redis來實現的&#xff0c;但是在做性能測試的時候發現最新的v4版本有限制每小時候最多請求6000次&#xff0c;因為官網開始商業化要收費了&#xff0c;好坑爹的說&#xff0c;還好我前期弄了…

如何用計算機求和,求和計算器

求和計算器您可以使用此求和計算器快速計算預定范圍內某個表達式的序列之和。如何使用求和計算器輸入總和的表達式輸入上限和下限提供表達式中使用的變量的詳細信息單擊“計算”按鈕生成結果。求和Σ符號計算器k ∑n 0變量:nixyzabc 103740支持的運算符常量和函數算術運算符加“…

Zookeeper概述、特點、數據模型

Zookeeper1.Zookeeper概述Zookeeper是一個工具&#xff0c;可以實現集群中的分布式協調服務。所謂的分布式協調服務&#xff0c;就是在集群的節點中進行可靠的消息傳遞&#xff0c;來協調集群的工作。Zookeeper之所以能夠實現分布式協調服務&#xff0c;靠的就是它能夠保證分布…

云計算機創意名,有創意的道路名字推薦,分享一些好聽有內涵的路名

提到龍崗板塊&#xff0c;“風向”一直飄忽不定。原本地鐵4號線今年通車&#xff0c;但是因為五象火車站的規劃建設&#xff0c;暫時未開通;機場線已經敲定&#xff0c;然而沒有龍崗的份…… [本文來自&#xff1a;www.777y.com]雖然機場線暫時無緣(可以期待下)&#xff0c;但是…

250W電源帶i7+GTX1080?

電源的科學: Q1&#xff1a;電源的額定功率是什么&#xff1f;峰值功率又是什么&#xff1f;A1&#xff1a;電源的額定功率就是電源正常工作時的功率&#xff0c;它的值為用電器的額定電壓乘以額定電流。而峰值功率指的是電源短時間內能達到的最大功率&#xff0c; 一般情況下電…

uml里的extend和include_用例圖中包含(include)擴展(extend)和泛化(generalization)關系詳解...

標簽&#xff1a;uml用例圖是解決用戶需求的圖&#xff0c;畫好用例圖一定要理清用例之間的關系。用例之間有三種關系&#xff1a;包含(include)擴展(extend)和泛化(generalization)。下面介紹三者的相同點和不同點以便區分&#xff1a;相同點&#xff1a; 三者都是從現有的用例…

數據庫的數據類型及運算符

一、數據類型 1、整數類形&#xff1a; &#xff08;重點記憶&#xff0c;常用&#xff09;有符號整形&#xff1a;int--每個int類型的數據按4個字節存儲&#xff0c;其中1位表示整數值的正負號&#xff0c;其他31位表示整數值長度和大小&#xff1b; 大整形&#xff1a;bigint…

浙江大學計算機博士很難復試專業課,浙江大學計算機學院2020年博士研究生招生復試公告...

一、復試資格通過計算機學院博士生材料初審的考生獲得復試資格&#xff0c;名單見附件。二、復試內容和成績組成博士研究生的復試內容主要包括對考生思想政治素質和品德、學術水平考核。1&#xff0e; 思想政治素質和道德品質考核思想政治素質和品德考核是博士研究生招生復試的…

推薦幾款熱門的敏捷開發工具

不知道有多少企業在很好的應用敏捷模式&#xff1b; 在今天的文章中&#xff0c;我們將一同了解更多有趣、高效且面向敏捷的項目管理工具。 Atlassian Jira/ Jira Agile   Atlassian的Jira是一款熱門工具&#xff0c;用于追蹤產品開發、幫助團隊組織問題、分配工作并保證團隊…

語言語法糖_【c#】幾種常用語法糖

語法糖&#xff08;syntactic sugar&#xff09;是由英國計算機科學家Peter J. Landin發明的術語&#xff0c;指計算機語言中添加的某種語法。這種語法不影響語言的功能&#xff0c;但更方便使用。在開發中使用語法糖能夠讓程序變得更短&#xff0c;使看起來更美觀些~空檢查pub…

CodeForces 696B Puzzles

思維&#xff0c;簡單樹$dp$。 首先計算出每一個子樹包含多少個節點&#xff0c;記為$f[i]$。然后就可以從$root$開始推出所有節點的期望了。 現在已知$fa$節點的答案為$ans[fa]$&#xff0c;假設要計算$fa$的一個兒子$v$的期望&#xff0c;那么$ans[v]ans[fa]1.0(f[fa]-f[v]-1…

2018清華計算機類專業錄取分數線,清華大學2018年各省錄取分數線及各專業錄取分數線 - 高教網...

【一批錄取分數線】港澳臺聯招&#xff1a;630分安徽&#xff1a;理科689分&#xff1b;文科675分&#xff1b;理科定向683分北京&#xff1a;理科694分&#xff1b;文科677分福建&#xff1a;理科681分&#xff1b;文科650分甘肅&#xff1a;理科652分&#xff1b;文科637分廣…

ASP.NET 對類進行XML序列化和反序列化

1 序列化方法 public void SerializeObject<T>(string Xmlname,T t){XmlSerializer ser new XmlSerializer(typeof(T));TextWriter writer new StreamWriter(Xmlname);ser.Serialize(writer, t);//要序列化的對象writer.Close();} 2 序列化方法的使用 NodeConfigInfo n…

python100內3整除while_python-循環語句-習題及答案-for-while

for 變量 in range(起始&#xff0c;終止&#xff0c;步長):循環體變量 起始while 終止條件(bool):循環體步長break continue1. 盈盈為了考驗令狐沖奪冠的決心&#xff0c;要他說一百遍“我能行&#xff01;”# for i in range(0,100,1):# print("我能行")2.本金100…

怎么用計算機連接電視,電腦怎么連接電視 詳細步驟【圖文】

現在一般的LED電視機都有連接電腦的功能&#xff0c;如何讓電腦連接電視&#xff0c;讓電視的大屏幕成為電腦的顯示器呢?下面給大家說明電腦連接電視詳細步驟!電腦連接電視步驟&#xff1a;1 電腦連接電視所需的接口及連接線我們先來介紹一下&#xff0c;電視上需要的接口&…