AutoLayout 相關概念介紹和動畫demo

2021-06-27 09:02:22 字數 2553 閱讀 8853

cocoa touch 開發中適配各種螢幕尺寸已經是能夠**的了,那麼跟進autolayout 也就是必備技能了。

一開始接觸ios的時候,我還是蠻喜歡他的布局系統。簡單來說,乙個影象,我們通過中心點座標,旋轉角度和輪廓大小來定義他在視窗中的位置

這裡的座標和笛卡爾座標系不同的是y的方向

這裡表示了anchorpoint含義,用於表示position相對bounds的位置,比如(0.5, 0.5)表示中心,(0,0)表示左上角

下面表示了frame bounds position anchorpoint之間的關係,你可能覺得這個anchorpoint似乎沒有什麼用

但是當我們旋轉乙個view的時候,好處就來了

傳統布局是非常高效的,組合各種變化,可以輕易得實現任意的2d動畫,當然也可以輕易的解決靜態的布局問題。但是在面對多個螢幕,螢幕旋轉時,或是需要在2個view 中間動態增加乙個view的時候顯得非常繁瑣。需要不斷的寫一些計算距離,位置的**(甚至還有一些magic number)。網上有很多例子,比如beginning-auto-layout-part-1-of-2,或是大家在平時工作中遇到的3.5inch和4inch螢幕之間的適配。

autolayout使用非常簡單,xcode的支援也非常直觀。但是因為和之前的方式有很大的不同,新手一開始很容易遇到一大堆的異常,crash在main函式裡面,讓人非常沮喪。但是在了解autolayout之後,就會發現這是乙個非常非常elegant的布局解決方案,也很容易理解為什麼crash,以及應該如何debug。

autolayout 是乙個描述各種約束的行為,比如,乙個view 距離父view上邊距多少,相鄰之間的間隔,各個view之間的寬高關係等等。這一系列的條件就是為了最終確定之前提到的傳統布局中需要的東西,這個view的大小,位置。所以,當我們設定的條件不足,或是條件衝突時,就會產生異常。

在使用autolayout的時候,uilabel 我們只需要設定他的position,不需要設定寬高,而乙個自定義的uiview,我們不僅僅需要位置,還需要設定寬高,這是為什麼呢?

每乙個view 都有乙個特別的屬性叫做intrinsic content size,這個可以理解成是乙個view的最合適而且最小的寬度和高度。對於uilabe來說,就是至少得把我設定的文字都顯示完整吧,所以系統只需要知道uilabel的位置。而uiview的intrinsic content是(0,0)所以需要設定uiview的寬高(或是設定周圍的邊距等等其他關係可以讓系統知道這個view應該多寬,多高)。而intrinsic content size,也是未來自定義view顯示到xcode中必須設定的屬性之一。

使用autolayout之後,把view顯示到螢幕上面大體分成3步。

一般來說layoutsubviews負責布局,比如調整view之間的距離,大小,drawrect負責繪製,比如使用什麼顏色。而autolayout則是在layout之前增加了乙個設定約束的過程,也就是上面提到了update constraints

在view的layoutsubview中,如果我們呼叫了[super layoutsubview]系統就把設定的這些約束計算成每個view的bounds,center屬性。當然我們也可以基於autolayout的結果,再做布局的調整。

display 不是這篇文章的重點,這裡略過

autolayout也可以配合傳統的animation方法,整體**結構如下。

123

4567

8

[

self

.view

layoutifneeded];[

uiview

animatewithduration:

0.3f

animations:^];

使用autolayout也可以輕易的實現之前的設定frame很難實現的動畫效果。比如下面的例子(很奇怪,優酷吃掉了後面幾秒的動畫…)

使用之前傳統的動畫,實現這個過程,需要計算所有subview之間的距離,位置。而且在修改乙個view的frame時,很難做到和其他view的移動速度同步。除非是customlayoutsubview。做起來相當麻煩。但是用autolayout則非常簡潔直觀,只需要設定第乙個view的position,然後其他view約定好高度和間隔依次排列就好了。

demo code

當然autolayout做動畫的時候有的地方也很麻煩,比如希望旋轉view a 的時候,或是使用transform時,很容易產生奇怪的結果。一般來說會設定乙個host view通過autolayout設定位置,然後在旋轉view a。一句話就是混合起來,各取優點。

簡單的來說compression resistance 設定view有多大意願(優先順序),願意壓縮裡面的內容。content hugging設定view 有多大願意(優先順序),願意顯示裡面內容之外的部分。

stackoverflow上面有乙個很清晰的通過uibutton解釋的[例子],可以很容易理解這2個屬性。

advanced auto layout toolbox-objc.io

AutoLayout 相關概念介紹和動畫demo

jun 13th,2014 comments cocoa touch 開發中適配各種螢幕尺寸已經是能夠 的了,那麼跟進autolayout 也就是必備技能了。一開始接觸ios的時候,我還是蠻喜歡他的布局系統。簡單來說,乙個影象,我們通過中心點座標,旋轉角度和輪廓大小來定義他在視窗中的位置 這裡的座標...

Python之requests模組相關介紹

在之前的文章中我們一直用到的庫是 urllib.request,該庫已經包含了平常我們使用的大多數功能,但是它的 api 使用起來讓人感覺不太好,而 requests 自稱 http for humans 說明使用更簡潔方便。requests 唯一的乙個非轉基因的 python http 庫,人類可...

Lodrunner相關概念

1.集合點 集合虛擬使用者,以便於準備好使用者,一致在某個時刻執行任務 在某個時間把需要虛擬的使用者數目準備好 如何新增集合點 設定指令碼執行場景時,也可以對集合點策略進行相應配置 2.事物 事物是用來度量伺服器響應事物的時間。乙個完整任務有開始,結束 插入事物方式有2種 事物狀態有3種 lr pa...