iOS混合開發庫(GICXMLLayout)佈局案例分析(2)閒魚案例

文章中貼出的XML代碼你能夠直接從git下載而且運行查看效果，git下載地址

這篇帶給你們的是對閒魚app搜索結果頁面的佈局分析。這類佈局的特色是瀑布流宮格佈局，也可能設計多種不一樣的Cell(模板),先上圖，以下：

從圖片中能夠看出以下幾個點。

1. 宮格佈局(嚴格來講能夠說是瀑布流佈局)。
2. 每行顯示兩個Cell
3. 共有三種不一樣的Cell
4. 有些Cell會橫跨兩列。好比細選那個Cell

上面的是大致佈局。下面分別分析不一樣Cell的佈局分析

Cell-1(商品佈局)

商品信息Cell總體屬於自上而下佈局。

1. 頂部的是商品的圖片，而且是按照1：1比例顯示。
2. 商品名稱。而且最多顯示一行
3. 商品價格等信息
4. 用戶和位置等信息。而且信用的信息顯示在右邊,頭像的右下角還有一個綠色小點。
5. 包郵、全新等信息。

下面一一進行分析。

1. 商品圖片的顯示。

   <!-- 商品圖片，而且按照1：1的比例來顯示 -->
    <ratio-panel ratio="1" background-color="gray">
        <image url="{{cover}}" />
    </ratio-panel>
   複製代碼

   使用ratio-panel提供1:1比例的佈局。

2. 商品名稱顯示。

   <!-- 商品名稱 -->
   <lable text="{{name}}" font-size="14" font-color="444444" lines="1" />
   複製代碼

3. 商品價格等信息。

   價格信息原本是可使用lable的富文本方式來顯示的，可是lable的富文本的內容是靠底部顯示的。可是這裏須要垂直居中來顯示。那麼只有使用stack-panel才能知足要求了

   <!-- 水平佈局，而且垂直方向居中顯示 -->
   <stack-panel is-horizon="true" align-items="2">
       <!-- 商品價格 -->
       <lable text="￥" font-color="FB2A35" font-size="12" />
       <lable text="{{price}}" font-color="FB2A35" font-size="16" />
       <!-- 想要數量 -->
       <lable text="{{want+'人想要'}}" font-color="gray" font-size="11" space-before="5" />
   </stack-panel>
   複製代碼

   stack-panel的align-items屬性是關鍵，決定了垂直方向是居中顯示的。

4. 用戶和位置等信息。而且信用的信息顯示在右邊，頭像的右下角還有一個綠色小點。

   <!-- 用戶信息 水平佈局，而且垂直方向居中佈局-->
   <stack-panel data-path="user" is-horizon="true" space="5" align-items="2">
       <!-- 頭像 -->
       <dock-panel size="25" corner-radius="5" clips-bounds="true">
           <image background-color="gray" url="{{headIcon}}" />
           <!-- 右下角顯示綠色小點 -->
           <panel size="8" background-color="49C856" dock-panel.horizal="2" dock-panel.vertical="2" border-color="white" border-width="2" corner-radius="4" />
       </dock-panel>
       <!-- 用戶位置信息 -->
       <lable text="{{location.name}}" font-color="gray" font-size="10" />
       <!-- 信用顯示在右邊 -->
       <lable text="芝麻信用|極好" font-color="2EC5BE" font-size="10" flex-grow="1" text-align="2" />
   </stack-panel>
   複製代碼

   1. 信用信息顯示在右邊。關鍵代碼是flex-grow="1" text-align="2"。這段代碼的意思是該lable佔用右邊的全部剩餘空間，而且文本靠右顯示。
   2. 用戶右下角的綠色小點。關鍵代碼是dock-panel.horizal="2" dock-panel.vertical="2"。

5. 包郵、全新等信息

   包郵、全新等信息的顯示比較特殊，顯示在頂部圖片的左下角，而且在x和y方向上分別都偏移了一段距離。GIC並無提供能夠偏移的佈局面板，可是提供了transforms功能。所以這裏就依靠transforms來實現了。

   另外，信息是顯示圖片上，而且顯示在左下角。那麼只能採用dock-panel佈局了。而且和圖片存在於同一個dock-panel中。

   <!-- 商品圖片，而且按照1：1的比例來顯示 -->
   <ratio-panel ratio="1" background-color="gray">
       <dock-panel>
           <!-- 圖片 -->
           <image url="{{cover}}" />
           <!-- 全新和包郵圖標 -->
           <stack-panel dock-panel.horizal="0" dock-panel.vertical="2" space="2" is-horizon="true">
               <transforms>
                   <!-- x和y方向偏移 -->
                   <translate x="10" y="8" />
               </transforms>
               <!-- 全新圖標 -->
               <if condition="{{ isNew }}">
                   <dock-panel background-color="FB2A35" size="30 16" corner-radius="3">
                       <lable text="全新" font-size="10" font-color="white" />
                   </dock-panel>
               </if>
               <!-- 包郵圖標 -->
               <if condition="{{ baoyou }}">
                   <dock-panel background-color="2F9AFE" size="30 16" corner-radius="3">
                       <lable text="包郵" font-size="10" font-color="white" />
                   </dock-panel>
               </if>
           </stack-panel>
       </dock-panel>
   </ratio-panel>
   複製代碼

   全新和包郵的圖標並非每一個cell都有的，所以使用if指令來顯示。

Cell-2(標籤)

上面的cell的佈局區別於商品信息cell。這個cell的佈局難點在於三個頭像的佈局。這裏面使用panel來佈局，而且使用postion來實如今水平方向的偏移佈局。

<panel>
    <for data-path="users">
        <image size="20" url="{{headIcon}}" corner-radius="10" position="{{ 13*$index+' 0' }}" />
    </for>
</panel>
複製代碼

能夠看到，每一個image的大小爲20，設置了10的圓角，這樣就成爲一個圓形頭像。而後每一個圖片在x方向進行偏移13*$index。這樣就造成一個部分重疊交集的佈局效果了。

Cell-3(篩選)

這個cell的佈局就簡單了。上面是`title`，下面是一個每行4列的`宮格佈局`面板。

1. title的佈局。

   左右兩邊分別有一根線，中間是一個lable。

   <stack-panel space-before="20" is-horizon="true" align-items="2" space="10" justify-content="1">
       <panel size="30 1" background-color="light-gray" corner-radius="0.5" />
       <lable text="細選" font-size="16" font-color="111111" />
       <panel size="30 1" background-color="light-gray" corner-radius="0.5" />
   </stack-panel>
   複製代碼

2. 宮格佈局

   <grid-panel columns="4" column-spacing="15" space-before="10" row-spacing="15" space-after="20">
       <for>
           <dock-panel background-color="E1E3E9" height="35" corner-radius="5">
               <lable text="{{}}" font-size="14" font-color="333333" />
           </dock-panel>
       </for>
   </grid-panel>
   複製代碼

總體佈局

上面列出了三種cell的佈局方式。每一個cell對應一個template。而且使用collection-view來實現瀑布流佈局。

另外，Cell3(篩選)的Cell須要跨兩列顯示。只須要設置collection-view的column-span附加屬性便可。

<collection-view columns="2" row-spacing="10" content-inset="10" background-color="F0F2F8">
    <section>
        <for data-path="items">
            <!-- 使用數據綁定的方式來肯定每一個cell對應的跨列數 -->
            <list-item corner-radius="5" background-color="white" collection-view.column-span="{{ (type==3?3:1) }}">
                <!-- 使用數據綁定的方式動態選擇不一樣的模板顯示 -->
                <template-ref t-name="{{ this.typeToTemplateName(type) }}" />
            </list-item>
        </for>
    </section>
</collection-view>
複製代碼

以上的佈局代碼就是整個閒魚app搜索結果界面的佈局代碼。總共才100多行xml代碼，比起傳統的採用UITableViewCell的開發方式，不只在開發效率仍是代碼可讀性上面都有極大的優點。

另外，你能夠在運行demo的時候旋轉屏幕，你會發現全部的佈局都會自動從新佈局。而這個過程你甚至連一行代碼都不用寫。