? ? ? ?前兩天做了一個不規(guī)則圖形布局窿祥，由于當(dāng)初做時沒有考慮清楚布局的思路和實(shí)現(xiàn)的邏輯株憾，所以走了不少彎路，試了很多辦法才做出來的∩柜茫現(xiàn)在有時間嗤瞎，將這類UI的布局思路先記下來，以防日后自己再遇到還會吃虧听系。
一贝奇、多排不規(guī)則圖形的布局
? ? ? ?類似這種不規(guī)則圖形的布局，為了方便適配靠胜，必須讓所有按鈕按比例布局掉瞳，否則無法完美適配各種機(jī)型的屏幕毕源。但這里有個問題，按鈕的寬高比是一定的陕习，所以我們必須將其中一個（寬高）作為基準(zhǔn)才能按比例擺放霎褐。從UI效果圖來看，以寬度作為基準(zhǔn)比較合適该镣，考慮到按鈕擺放的位置應(yīng)該是以寬度為準(zhǔn)冻璃，高度動態(tài)增長來設(shè)計(jì)的，否則按鈕距離左右邊距會發(fā)生變化损合，且若按高度來算省艳，寬度有可能會出現(xiàn)超過屏寬或離左右邊距太多的情況，所以我是按寬度為基準(zhǔn)來布局的嫁审。
? ? ? ? 這里還有一個問題就是寬度可以很容易固定（只需要添加左右邊距約束即可）跋炕，但是高度卻是時時變化的（隨屏寬不同而改變），所以若是按單個按鈕布局土居，就很難將這幾個按鈕的中心點(diǎn)擺放在背景圖的中心上（不可固定按鈕的上下邊距）枣购。我嘗試了多種方法，最后的靈感是將這幾個按鈕放到一個自己手動添加的view中擦耀，view只需要添加左右邊距約束棉圈，并將Y軸的中心與背景圖中心設(shè)為相等即可，然后在view里面添加這些按鈕眷蜓，view的大小會隨著按鈕的大小而改變分瘾，這樣就可以完美的實(shí)現(xiàn)這種不規(guī)則圖形的布局了。還有最重要的一點(diǎn)吁系，一定要將中間的按鈕擺放在最上層德召，否則它的點(diǎn)擊事件會被其他按鈕覆蓋。
二汽纤、一排不規(guī)則圖形的布局
? ? ? ? 看到這個UI效果圖上岗，首先腦海里想到的方法跟以往的布局一樣，將三個按鈕分別添加約束蕴坪，并按照比例擺放肴掷。由于這是個不規(guī)則圖形，不能簡單的將按鈕三等分背传，所以做法是將左右兩個按鈕的邊距固定呆瞻，中間按鈕的中心點(diǎn)與背景圖中心相等，以高度為基準(zhǔn)來算按鈕寬度径玖，這樣適配屏幕一定是沒有問題的（第一次只在6上面運(yùn)行了痴脾，效果和設(shè)計(jì)圖一樣）。
? ? ? ? 按理說梳星，切換屏幕得到的效果應(yīng)該是一樣的赞赖，但是我卻忽略了一個最重要的問題滚朵，跟第一種布局一樣，UI效果圖都是以寬度為基準(zhǔn)來設(shè)計(jì)的前域，可是我在這里卻以高度為基準(zhǔn)來布局（因?yàn)閷挾葻o法固定始绍，與第一種情況略有差異），所以切換屏幕得到的效果會導(dǎo)致按鈕之間的間距變大话侄，十分不美觀。之后的想法是通過手動修改圖片的尺寸（保持按鈕的大小不變）学赛，讓圖片之間的間距變小年堆，看起來更接近UI的效果。剛開始在6plus上調(diào)試的結(jié)果是可以的盏浇，基本可以達(dá)到UI的效果变丧，但是切換到5上面就不行了，因?yàn)?和6都是加載的@2x的圖片绢掰，且5上的圖片顯示已經(jīng)達(dá)到按鈕的最大飽滿度了痒蓬，再手動修改圖片尺寸，會導(dǎo)致圖片顯示不全滴劲，在6上也會受到影響攻晒，所以放棄了這種做法。最后參考安卓同事的建議班挖，將圖片切成整個背景的鲁捏，只是將后面的按鈕處理成透明，這樣一來萧芙，三個按鈕的約束都是相同的给梅，左右邊距均為0 ，以寬度為基準(zhǔn)算高度双揪，適配就不會再有任何問題了动羽。
? ? ? 到這里，不規(guī)則圖形的布局已經(jīng)完美的解決了渔期，但是功能卻有缺陷运吓，因?yàn)槿齻€按鈕的位置是完全重疊在一起的，所以不管你點(diǎn)擊哪個按鈕擎场，響應(yīng)的永遠(yuǎn)是最上層的按鈕（底下按鈕的點(diǎn)擊事件被覆蓋了）羽德。要怎么解決這個問題呢，很簡單迅办，只要讓按鈕的響應(yīng)區(qū)域?yàn)閳D片可視范圍即可（即是通過圖片的透明度來判斷按鈕的點(diǎn)擊能力）宅静，這里有兩個思路：1、重寫按鈕的點(diǎn)擊范圍方法（- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event ?）站欺，可以在這里畫出按鈕的響應(yīng)區(qū)域姨夹，如圓形纤垂，三角形等等（用貝塞爾曲線實(shí)現(xiàn)），這種做法不需要判斷圖片透明度磷账，相對來說比較簡單峭沦，但是該方法僅適用于不規(guī)則圖形是一類的情況（在這里就不適用，因?yàn)槿齻€按鈕的圖形都不相同）逃糟；2吼鱼、首先獲取圖片的透明度，然后通過透明度來判斷按鈕的點(diǎn)擊能力绰咽，該方法較為復(fù)雜菇肃，但是適用性廣，適用于任何圖形的按鈕（原理現(xiàn)在還沒看懂取募，先收藏琐谤，以后有時間再慢慢鉆研）。
? ? ? ? 這個方法的實(shí)現(xiàn)可以是按鈕的類別玩敏，或者自定義按鈕都可以斗忌，看個人喜好，如果是通過類別實(shí)現(xiàn)旺聚，則不需要做任何事情织阳，如果是通過自定義按鈕實(shí)現(xiàn)，只需要將按鈕關(guān)聯(lián)起來即可翻屈。
