1. 程式人生 > >Xib實現控制元件的螢幕適配 iOS

Xib實現控制元件的螢幕適配 iOS

使用Xib可以實現控制元件的螢幕適配,但是並不是十全十美。因為我們使用Xib新增約束的時候,比如說距離左邊多少距離,這是設定的一個確定的阿拉伯數字,是絕對的,並不是設定的一個比例,在不同的機型上面,裝置的尺寸寬高不一定,Xib以絕對的阿拉伯數字新增約束並不能做到完美的螢幕適配,但是!!!大體還是可以的。

     功能按鈕介紹:

  

     這四個按鈕對你的新增約束至關重要。

      第一個圖示: 這是xcode7在iOS9中新加入的功能——stack view,相當於一個容器view用來統一管理他所有subView的約束,其實普通的UIView也可以作為容器view來管理其subView的約束,我們之前做複雜UI顯示邏輯的時候往往也會放一個背景的容器view,stack view就是起到這個作用,意義不是很大,它做的事情UIView也可以做,但 他的優勢在於:可以通過設定屬性的方式讓系統自動新增對其subView的約束,而且該view是不渲染在頁面上的,對它設定背景色等屬性是無效的。

      第二個圖示:這是一個關於控制元件對齊的選項,我們可以在裡面新增對齊約束條件。如下圖:


    雖然是老版本圖,但是是一樣的。 從上到下依次是左對齊、右對齊、上對齊、下對齊、水平對齊、豎直對齊,這些現在都是灰色的不能選擇,只有同時選中多個控制元件,他們才是可用的,或者先選擇一個控制元件,然後按住control拖動到另一個控制元件上,就會彈出一個控制元件對齊的視窗,可以在裡面設定兩個控制元件的對齊關係。 下圖就是先選擇一個控制元件,然後按住control拖動到另一個控制元件上,就會彈出一個控制元件對齊的視窗,可以在裡面設定兩個控制元件的對齊關係的方法:


下面的Equal Withs 和Equal Hights就是指讓兩個檢視等高或者等寬。

第三個圖示:更多用來新增單個控制元件的約束。


Add New Constrains 設定單個控制元件的約束能設定很多約束,詳解見圖
在約束上、下、左、右的時候,右邊有個下箭頭,你點選可以選擇(比如說你點選左邊的下箭頭)就會讓你選擇左邊是距離父檢視多遠,還是距離左邊子檢視多遠(假設在你設定的這個檢視的左邊還有一個與你設定的檢視平級的檢視)。 值得一提的是,在最新的Xcode中,本欄目多出這麼一個選項:       它是在寬高的欄目裡,意思是一個寬高的比例,根據比例來確定或者叫約束你的控制元件的寬高大小。比如說你拖了控制元件過後,約束這個控制元件距離上下多遠,然後勾選這個選項。那麼這個控制元件在下個模擬器中確定大小的原理是,同樣的距離上下多遠,那麼它的高就確定下來,寬是多少呢?就是你最初在Xib檔案中約束的時候,那個時候有一個當時的寬高之比,我在當前的模擬器中就根據這個比例來確定寬。

第四個圖示:更新約束、更新尺寸、去掉約束、新增需要的約束等功能


紅色勾選的就是去掉約束的方法,不同的是,上面的是你選中某一個控制元件的時候,刪除單個空間的所有約束。下面的是刪除整個Xib檔案中所有控制元件的所有約束。其實還有一個比較簡略的新增全域性約束的方法,就是你在Xib檔案中將控制元件拖好後,在下面的一欄(因為下面的一欄是新增全域性的)選擇Add Missing Constraints 選項,系統自動就將全域性的約束給你新增好了。不過,這個約束比較粗略,最好還是自己動手,豐衣足食吧。
#pramg  mark -  在二和三兩個圖示按鈕裡面,會有這麼一個選項:


        預設是None在約束後不會有位置發生變化,但會出現一個黃色的框框,就是你新約束的frame,並且這個時候會有個黃色警告箭頭表示當前view的frame不匹配,需要更新frame。
        點選黃色尖頭後會告訴你警告的原因.
    黃色的警報就是給你說你的約束和以前不一樣了,這時候你就選中那個控制元件,點選第4個圖示,然後選擇更新尺寸就可以了。(Update  Frame)      還有個紅色的警報就比較嚴重,表示當前有錯誤約束:1.約束衝突,需要刪除衝突的部分條件。2.約束條件不完善,需要新增完善約束(就是讓編譯器明確view的frame),需要仔細體會,怎麼樣加約束才能讓控制元件的大小和位置在螢幕中固定下來,多加或者少了都不好。

    檢視你的約束:約束新增好了過後,必要的時候可以去檢視或者修改他們。如圖:

        這就是你新增好了控制元件的約束情況,你還可以點選Edit去再次修改它。

   修改約束的優先順序:約束新增好了過後,必要的時候可以去修改他們的優先順序。如圖:


其中的Priority就是本約束的優先順序,預設為1000,你可以自己改,程式會優先執行優先順序高的約束。    其他的話,多練習就會了。用Xib實現表格檢視單元格的高度動態返回,就只需要一句話就夠了,好強大。

_TestTableView.estimatedRowHeight = 200;

 寫上上面這句話,然後將表格檢視的heightforrowatindexpath協議方法遮蔽掉就可以了,自己去試試吧!