? ? ? ?前兩天做了一個不規(guī)則圖形布局，由于當(dāng)初做時沒有考慮清楚布局的思路和實現(xiàn)的邏輯，所以走了不少彎路，試了很多辦法才做出來的?，F(xiàn)在有時間，將這類UI的布局思路先記下來，以防日后自己再遇到還會吃虧。
一、多排不規(guī)則圖形的布局
? ? ? ?類似這種不規(guī)則圖形的布局，為了方便適配，必須讓所有按鈕按比例布局，否則無法完美適配各種機(jī)型的屏幕。但這里有個問題，按鈕的寬高比是一定的，所以我們必須將其中一個（寬高）作為基準(zhǔn)才能按比例擺放。從UI效果圖來看，以寬度作為基準(zhǔn)比較合適，考慮到按鈕擺放的位置應(yīng)該是以寬度為準(zhǔn)，高度動態(tài)增長來設(shè)計的，否則按鈕距離左右邊距會發(fā)生變化，且若按高度來算，寬度有可能會出現(xiàn)超過屏寬或離左右邊距太多的情況，所以我是按寬度為基準(zhǔn)來布局的。
? ? ? ? 這里還有一個問題就是寬度可以很容易固定（只需要添加左右邊距約束即可），但是高度卻是時時變化的（隨屏寬不同而改變），所以若是按單個按鈕布局，就很難將這幾個按鈕的中心點擺放在背景圖的中心上（不可固定按鈕的上下邊距）。我嘗試了多種方法，最后的靈感是將這幾個按鈕放到一個自己手動添加的view中，view只需要添加左右邊距約束，并將Y軸的中心與背景圖中心設(shè)為相等即可，然后在view里面添加這些按鈕，view的大小會隨著按鈕的大小而改變，這樣就可以完美的實現(xiàn)這種不規(guī)則圖形的布局了。還有最重要的一點，一定要將中間的按鈕擺放在最上層，否則它的點擊事件會被其他按鈕覆蓋。
二、一排不規(guī)則圖形的布局
? ? ? ? 看到這個UI效果圖，首先腦海里想到的方法跟以往的布局一樣，將三個按鈕分別添加約束，并按照比例擺放。由于這是個不規(guī)則圖形，不能簡單的將按鈕三等分，所以做法是將左右兩個按鈕的邊距固定，中間按鈕的中心點與背景圖中心相等，以高度為基準(zhǔn)來算按鈕寬度，這樣適配屏幕一定是沒有問題的（第一次只在6上面運(yùn)行了，效果和設(shè)計圖一樣）。
? ? ? ? 按理說，切換屏幕得到的效果應(yīng)該是一樣的，但是我卻忽略了一個最重要的問題，跟第一種布局一樣，UI效果圖都是以寬度為基準(zhǔn)來設(shè)計的，可是我在這里卻以高度為基準(zhǔn)來布局（因為寬度無法固定，與第一種情況略有差異），所以切換屏幕得到的效果會導(dǎo)致按鈕之間的間距變大，十分不美觀。之后的想法是通過手動修改圖片的尺寸（保持按鈕的大小不變），讓圖片之間的間距變小，看起來更接近UI的效果。剛開始在6plus上調(diào)試的結(jié)果是可以的，基本可以達(dá)到UI的效果，但是切換到5上面就不行了，因為5和6都是加載的@2x的圖片，且5上的圖片顯示已經(jīng)達(dá)到按鈕的最大飽滿度了，再手動修改圖片尺寸，會導(dǎo)致圖片顯示不全，在6上也會受到影響，所以放棄了這種做法。最后參考安卓同事的建議，將圖片切成整個背景的，只是將后面的按鈕處理成透明，這樣一來，三個按鈕的約束都是相同的，左右邊距均為0 ，以寬度為基準(zhǔn)算高度，適配就不會再有任何問題了。
? ? ? 到這里，不規(guī)則圖形的布局已經(jīng)完美的解決了，但是功能卻有缺陷，因為三個按鈕的位置是完全重疊在一起的，所以不管你點擊哪個按鈕，響應(yīng)的永遠(yuǎn)是最上層的按鈕（底下按鈕的點擊事件被覆蓋了）。要怎么解決這個問題呢，很簡單，只要讓按鈕的響應(yīng)區(qū)域為圖片可視范圍即可（即是通過圖片的透明度來判斷按鈕的點擊能力），這里有兩個思路：1、重寫按鈕的點擊范圍方法（- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event ?），可以在這里畫出按鈕的響應(yīng)區(qū)域，如圓形，三角形等等（用貝塞爾曲線實現(xiàn)），這種做法不需要判斷圖片透明度，相對來說比較簡單，但是該方法僅適用于不規(guī)則圖形是一類的情況（在這里就不適用，因為三個按鈕的圖形都不相同）；2、首先獲取圖片的透明度，然后通過透明度來判斷按鈕的點擊能力，該方法較為復(fù)雜，但是適用性廣，適用于任何圖形的按鈕（原理現(xiàn)在還沒看懂，先收藏，以后有時間再慢慢鉆研）。
? ? ? ? 這個方法的實現(xiàn)可以是按鈕的類別，或者自定義按鈕都可以，看個人喜好，如果是通過類別實現(xiàn)，則不需要做任何事情，如果是通過自定義按鈕實現(xiàn)，只需要將按鈕關(guān)聯(lián)起來即可。
