Swift版仿天貓搜尋介面

最近在逛天貓，發現天貓的搜尋框還不錯，於是就決定動手實現一下這個介面，按照我的習慣首先是分析這個介面，然後構思實現的技術點，之後再動手寫**。

先上效果圖：

分析：1：仔細看了看天貓的整體介面，我的想法是分為兩個view，上面乙個view裝按鈕、搜尋框，下面乙個view就是裝乙個可以滾動的scrollview,看這種布局，所以scrollview上面放乙個collectview(具有九宮格樣式)，好了，大致的控制項摸清楚了，如何實現呢！不要急，一步步來

2：第一步分析整體介面，我用的xib布局整個介面，既然用到了xib,想要載入資料就得註冊cell和定義layout，而「猜你所想」和「最近搜尋」是collectview中的兩個組頭，所以想打好第一步，把該做的都搭好

//設定布局
collectionview.setcollectionviewlayout(xysearchlayout(), animated: true)
//載入cell
collectionview.registernib(uinib(nibname: "xysearchcell", bundle: nil), forcellwithreuseidentifier: "xysearchcell")
//載入cell的頭部
collectionview.registernib(uinib(nibname: "xyreusableview",  bundle: nil), forsupplementaryviewofkind: uicollectionelementkindsectionheader , withreuseidentifier:"xyreusableview")

3：它主要是分兩組，第一組是一開始就載入」猜你所想「資料，當然這組資料應該是請求獲取到的，而第二組資料是搜尋時才會載入出來，也就是說只有使用者進行搜尋了才會顯示第二組資料（當然使用者搜尋的也就成為了歷史資料，儲存下來），所以在搜尋控制項**方法中獲取到輸入的內容然後直接新增到陣列中，重新整理

4：collectview的布局利用系統的無法達到想要的效果，這裡使用自定義布局。計算每個cell的位置

主要**：

//這裡就是返回每個cell，通過這裡來調整位置
override func layoutattributesforelementsinrect(rect: cgrect) -> [uicollectionviewlayoutattributes]? }}
return arrcell
}

5：當然每個cell的大小也得計算，但是我們不能直接寫死，因為每個cell的寬是根據文字的大小來合理設定的，所以這裡我們又得實現返回每個item的size**方法。

**：

//mark - uicollectionviewdelegateflowlayout  itme的大小  根據itme大小決定一行顯示多少
func collectionview(collectionview: uicollectionview, layout collectionviewlayout: uicollectionviewlayout, sizeforitematindexpath indexpath: nsindexpath) -> cgsize 
return cgsizemake(80, 24)
}

總結：主要的幾個關鍵點差不多就是這些，其餘的一些細節就得自己思考來寫了，按照思路每一步慢慢實現，就能完成這個功能點。

**位址

Swift版仿天貓搜尋介面

仿天貓商城資料庫部分

22 0002 天貓店鋪搜尋頁面分析

1688天貓京東等介面詳情

Swift版仿天貓搜尋介面

仿天貓商城資料庫部分

22 0002 天貓店鋪搜尋頁面分析

1688天貓京東等介面詳情

相關推薦