一直認為寫博客是一個非常有意義卻又懶得去做的事情,因為去看別人的博客的時候會覺得收獲很大,所以才覺得寫博客非常的有意義。為了感謝那些一直被我看了博客的博主和網民們,也是為了成為促進互聯網發展的一塊小小的磚頭,從今天起我也決定寫自己的博客了,可能寫的有些因為自己表達不夠比較難懂的東西,或者有些只是一些小技巧,但是在平時的工作當中,這些都是非常實用的技巧。
在這個開源當然社會,如果一直保持着保守的狀態,是無論如何都無法促進社會的進步的,在這里先向大家保證,此博文與我的github的博客,所有的一切代碼與知識,將全部開源,你將不會看到任何的加密鎖密才能訪問,我將盡自己的一生,完善此技術博客,而你獲得的,將是永無至今分享與源代碼Demo.
貌似裝逼過頭了,先自我介紹一下, 本人擅長動畫設計,自動布局,今天的第一篇博文就不為大家嘮叨什么了不起的工程,為大家介紹一下自動布局上本人發現的一些非常有用的小技巧,或許能幫到大家。
好了廢話不多說,現在開始進入正題
所謂的自動布局,就是為控件添加約束,使控件能夠在不同尺寸比例的屏幕下完美地呈現在相應的位置,屬於適配的一種方法,做適配有兩種方法,一種是代碼適配,另一種則是自動布局,我們先說代碼的適配(前面都懂的也請耐心看到最后的解決辦法)
代碼的適配
附上一段代碼自動布局的自定義CGRectMakeInLine的函數
//下面是一段內聯函數,目的是為了讓控件適應不同機型時所在的位置及大小,以iphone6plus的大小和尺寸為基准,接下來VC
CG_INLINE CGRect CGRectMakeInLine (CGFloat x, CGFloat y, CGFloat width, CGFloat height)
{
CGRect rect;
//以6plus為基准
CGFloat autoSizeX = [UIScreen mainScreen].bounds.size.width / 414;
CGFloat autoSizeY = [UIScreen mainScreen].bounds.size.height/736;
rect.origin.x = x * autoSizeX;
rect.origin.y = y * autoSizeY;
rect.size.width = width * autoSizeX;
rect.size.height = height * autoSizeY;
return rect;
}
詳細說明:所謂的內聯函數,可以讓代碼的執行效率更快,具體的意義就不在這里多說,感興趣的大伙可以上stackOverFlow上看一下大神的解釋,因為國內給的翻譯真的是太渣了,即使你懂中文你也看不懂內聯函數是什么。
代碼上的適配,歸根接地就是比例適配而已,按照上述的代碼,只要自己設計UI界面的時候按照自己腦海里面的6lus的尺寸比例進行輸入,那么它在任何尺寸上的機型,都比較能完美地適配出來,注意:這里是比較完美地適配出來,因為代碼適配並不是萬能的,如果控件的長高比例很不協調的話那么就很容易早上控件在試圖上的扭曲,過度拉長,或者過度拉高。
然而,代碼的適配並不是我們今天要講的主題,我們今天要講的主題是如何讓Xib上的約束葉能夠實現和代碼適配的一個效果。
首先,是xib上的控件長度和寬度的比例適配
長度和寬度的比例適配:在VC的xib上添加一個imageView拉到屏幕中央,設置的約束有四個,相對於view是:1.容器視圖的豎直中心。2.容器視圖的水平中心。3.和view同寬4.和view同高。(本人喜歡夏娜,這里就不要吐槽了)
第二步:點擊剛剛的imageView,來到右側選項欄的尺度選項下面,為剛剛得等高等寬的contrains進行編輯
如下面兩張圖片所示
這樣子就能保證可愛的夏娜無論在哪個機型下面都能保證與屏幕的比例相協調了。
我們可以這樣子查看不同屏幕比例下的格局:
這樣子就實現了imageView的寬高隨着屏幕尺寸的變化而變化了。
可是,僅僅是控件的寬高能夠自適應,位置卻很難自適應,以前解決位置上的自適應的方法一般都是按照附近的控件的位置來添加約束,大於等於一定的距離或者小於等於一定的距離,然而這種添加約束的方法不僅開發效率慢,而且容易導致邏輯混亂。
接下來的位置自適應就是本篇博文要講的重點了,首先,我先提一個問題
問題:現在有三張圖片,如何讓三張圖片在不同的屏幕上,保持在同一水平線上,且三張圖片的間距,最左邊的圖片距離屏幕左邊界的距離,最右邊的圖片距離屏幕右邊界的距離,三樣距離都相等。。
以前這個問題交給我的同事,他是這么解決的,如下面圖片所示
大家應該也都知道了他的大致的解決思路了,他是在三張圖片之間添加了一個輔助view然后通過這些輔助view來確定三張圖片的位置,這種方法也是一個方法,但是這種方法的話在可視化編程上耦合度太高,一旦刪除了其中的一個控件,其余的控件的位置也會跟着變化,而且添加的約束也很多,牽扯太大,一旦需求修改,將是個非常大的麻煩。
現在我介紹我的方法給大家
1.首先是給中間的圖片添加約束,約束如下:讓中間圖片位與屏幕中央
2.再者給三張圖片添加寬高的約束: (三張圖片的寬高相同)這時候添加完應該會報紅色警告,因為左右兩張圖片的位置並沒有約束條件
3.給左邊的圖片添加位置約束:使其位於容器視圖的豎直中心和水平中心
這時候應該也會顯示這樣的黃色警告:因為圖片沒有出現在黃色線警告上出現的相對應的位置,這時候先不要着急updateFrame,先按照以下步驟進行操作
4.點擊左邊圖片,來到右邊選項浪的尺度選項欄,點擊位置約束進行edit操作,先設置水平中心約束的edit下的倍數,再設置豎直中心約束的edit下的倍數
如下圖所示:
直到黃色線完全消失為止,你也可以自己先算出圖片的為止的倍數關系,大概原理如下
它的大概原理是 最左邊0 ~ 1(水平中間)~ 2最右邊
同理上下一樣 最上邊 0~ 1 (豎直中間) ~ 2最下邊
接着就可以根據左邊圖片的設置方法,另外設置中間圖片和最右邊圖片的位置約束啦,這樣子就實現了夏娜醬在任何屏幕上的位置上的完美適配
再結合高度和寬度的比例適配,這樣子就能完全實現x,y,width,height完全只靠比例適配,不需要添加任何的其他大於等於或者小於等於的約束了