iOS自適應布局之Masonry 一

2021-12-29 20:33:32 字數 2095 閱讀 3758

iphone 5之前我們對應用布局停留在3.5寸乙個螢幕的階段,當時的安卓屌絲們是多麼的羨慕ios開發,不會被大量的螢幕適配所煩惱。隨著iphone產品的迭代,逐漸出現4寸、4.7寸、5.5寸….,你們說,iphone10+會有多少寸?o(∩_∩)o~

正因為上面說的那樣,螢幕的尺寸逐步增多,還沿用以前的方法布局顯然是不行的,這時候為布局引進新的結局辦法nsautolayout,但蘋果提供的比較複雜麻煩,所以就有人在此基礎上進行封裝,而提供一種高效的框架—-masonary

如何安裝框架?還是建議用cocoapods,這裡有我之前寫的cocoapods相關用法

pod 'masonry'使用引數功能說明表

1.居中顯示乙個view,並能時刻保持比螢幕的寬和高少60畫素

這裡需要注意的是:控制項用masonry約束的時候必須先將控制項用addsubview載入到父檢視中才能進行約束,不然就會造成崩潰。

masonry中有三個函式

(nsarray *)mas_makeconstraints:(void(^)(masconstraintmaker *make))block; (nsarray *)mas_updateconstraints:(void(^)(masconstraintmaker *make))block; (nsarray *)mas_remakeconstraints:(void(^)(masconstraintmaker *make))block;

mas_makeconstraints 只負責增加約束,當對同乙個控制項兩次呼叫這個函式就會造成崩潰。

mas_updateconstraints 更新約束,用mas_makeconstraints定義約束之後,可以用更新約束進行補充

mas_remakeconstraints 作用比較霸道,刪除之前對該控制項存在的所有約束,只保留block函式裡面的最新約束。

上面的make.center.equalto(self.view);

make.top.equalto(self.view).with.offset(30);

make.left.equalto(self.view).with.offset(30);

make.bottom.equalto(self.view).with.offset(-30);

make.right.equalto(self.view).with.offset(-30);

你是不是想更優雅,更棒一點呢?可以這樣:

uiedgeinsets padding = uiedgeinsetsmake(30, 30, -30, -30);

make.center.equalto(self.view);

make.top.equalto(self.view).with.offset(padding.top);

make.left.equalto(self.view).with.offset(padding.left);

make.bottom.equalto(self.view).with.offset(padding.bottom);

make.right.equalto(self.view).with.offset(padding.right);

我們還可以簡化為

make.edges.equalto(self.view).with.insets(uiedgeinsetsmake(10, 10, 10, 10));也可以這樣:

make.top.left.bottom.and.right.equalto(self.view).with.insets(uiedgeinsetsmake(10, 10, 10, 10));

iOS自適應布局之Masonry 一

正因為上面說的那樣,螢幕的尺寸逐步增多,還沿用以前的方法布局顯然是不行的,這時候為布局引進新的結局辦法nsautolayout,但蘋果提供的比較複雜麻煩,所以就有人在此基礎上進行封裝,而提供一種高效的框架 masonary 如何安裝框架?還是建議用cocoapods,這裡有我之前寫的cocoapod...

自適應布局

請你說一說你知道的所有web布局方式?1.浮動 float left right 2.inline block display inline block 行內塊級 3.flexible box 彈性盒子 display flex 4.grid display grid 5.絕對 相對布局 posit...

學習筆記之自適應布局

這個只是我學習過程中從各處找資料整理的筆記,如果有不對的或者不準確的說法還希望各路大神能幫我指正,在此謝過!尺寸 1.百分比 相對于父物件 2.auto 塊級水平方向的auto,塊級元素的margin border padding content寬度之和等於父元素width 3.包裹性 元素被設定為...