點擊整個專欄查看其它系列文章 （系列文章更新中…）：《iVX 高仿美團APP制作移動端完整項目》

項目界面預覽：

一、搜索制作

在上一節中我們完成了標題頭的制作，接下來我們查看如何制作搜索欄以及分類區制作。

首先我們分析一下界面，整個內容是由一個內容大塊包裹：

在此我們創建一個內容包裹塊，并且設置其高度為包裹、背景色為類白色：

我們先查看上面兩塊內容，其一為推薦搜索內容以及搜索框，其二為分類大塊：

在此我們先制作一個搜索框，添加一個行命名為搜索框：

接著添加一個搜索框以及一個搜索按鈕：

如何才能像我那樣設置較為“美觀”的按鈕呢？此時我們需要對其設置對應的圓角，首先查看文本輸入框的屬性：

在此需要設置其圓角值，我設置的圓角值為18，并且取消了右上角和右下角的圓角，因為我們需要使其與按鈕的圓角對應。接著我們開始查看按鈕的對應的屬性值，我們可以看到按鈕的背景色為黃色，其圓角設置如下：

為了圓角的直角是左上角和左下角，在此取消了該角的圓角，這樣將會使其重合，但是需要注意，一定要設置對應的高度使其統一，在此我設置的高度為 40px：

接著我們把搜索行的背景色修改為透明，否則就會覆蓋掉原來的顏色了：

我們查看原頁面得知，該區域是有一個圓角的，我們設置內容行的圓角值如下：

此時我們可以取消左下角和右下角的圓角值：

但此時我們發現，搜索內容行標簽并不居中，我們設置一下搜索行的內容水平居中顯示：

此時搜索內容行又距離頂部太過接近，我們可以設置其搜索行的上內邊距的內容為如下：

由于搜索行占據了一定高度，在此我們將該高度值設置為包裹，否則接下來該行會占據過多的高度：

二、搜索提示

接著制作搜索提示區域內容：

首先創建一個行為搜索提示：

接著設置這個行的高度為包裹，并且使其背景色為透明：

接著在其添加一個文本：

接著我們更改其對應的背景顏色、字號及文字內容：

那如何才能使其具有以下呈現呢？

此時只需要設置其圓角以及內邊距即可，內邊距使其有內部的寬度，圓角使其角度圓潤，設置 如下：

接著再進行圓角設置：

接著我們復制多個內容：

發現其會換行顯示，我們需求并不需要其進行換行，如何制作呢？我們只需要在當前搜索提示行屬性中，關掉其自動換行屬性即可：

接著我們預覽，發現該行不能左右滑動：

我們只需要設置該行的剪切屬性為滾動 x（橫）軸，并且隱藏其內容滾動條即可：

最后在設置其上下左右的內邊距，使其與之有距離即可：

三、種類

接著繼續往下，查看種類區域的內容為上圖下文：

那么此時就需要一個行來包裹這些內容，在內容行中創建一個行為種類，設置背景色透明、高度為包裹：

接著需要想如何在該行中添加對應的內容，在此我們可以注意到，內容每一行中有 5 個列，每列均分寬度，每個列的寬度那么則為 20%、背景色透明，那么在此創建一個列：

接著往這個列中添加對應的圖片：

此時由于圖片會按照本來的分辨率進行顯示，我們需要設置其寬度為父容器的寬度，那么設置寬度為 100%：

接著在設置其一個文本，設置對應的字號：

此時并不居中顯示，再設置這個行的顯示為居中：

由于這些種類本身是存在一定的內部寬度的（你也可以用別的方法設置）：

我們設置其該行的上下左右內邊距：

剩余的種類也是這樣制作（可以復制），制作完后內容如下：

若你還想使其邊緣的種類增加一些距離，直接在種類大塊的行中添加對應的內邊距內容即可：