文章中贴出的XML代码你可以直接从git下载并且运行查看效果，

这篇带给大家的是对闲鱼app搜索结果页面的布局分析。这类布局的特点是瀑布流宫格布局，也可能设计多种不同的Cell(模板),先上图，如下：

从图片中可以看出如下几个点。

1. 宫格布局(严格来说可以说是瀑布流布局)。
2. 每行显示两个Cell
3. 共有三种不同的Cell
4. 有些Cell会横跨两列。比如细选那个Cell

上面的是大体布局。下面分别分析不同Cell的布局分析

Cell-1(商品布局)

商品信息Cell整体属于自上而下布局。

1. 顶部的是商品的图片，并且是按照1：1比例显示。
2. 商品名称。并且最多显示一行
3. 商品价格等信息
4. 用户和位置等信息。并且信用的信息显示在右边,头像的右下角还有一个绿色小点。
5. 包邮、全新等信息。

下面一一进行分析。

1. 商品图片的显示。

          
              
           
         复制代码

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

2. 商品名称显示。

         
         复制代码

3. 商品价格等信息。

   价格信息本来是可以使用lable的富文本方式来显示的，但是lable的富文本的内容是靠底部显示的。但是这里需要垂直居中来显示。那么只有使用stack-panel才能满足要求了

         
             
              
              
              
              
          
         复制代码

   stack-panel的align-items属性是关键，决定了垂直方向是居中显示的。

4. 用户和位置等信息。并且信用的信息显示在右边，头像的右下角还有一个绿色小点。

         
             
              
                  
                   
                   
               
              
              
              
              
          
         复制代码

   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中。

         
             
                  
                   
                   
                   
                       
                            
                             
                         
                        
                        
                            
                                 
                              
                         
                        
                        
                            
                                 
                              
                         
                    
               
          
         复制代码

   全新和包邮的图标并不是每个cell都有的，因此使用if指令来显示。

Cell-2(标签)

上面的cell的布局区别于商品信息cell。这个cell的布局难点在于三个头像的布局。这里面使用panel来布局，并且使用postion来实现在水平方向的偏移布局。

        
             
          
     
    复制代码

可以看到，每个image的大小为20，设置了10的圆角，这样就成为一个圆形头像。然后每个图片在x方向进行偏移13*$index。这样就形成一个部分重叠交集的布局效果了。

Cell-3(筛选)

这个cell的布局就简单了。上面是`title`，下面是一个每行4列的`宫格布局`面板。

1. title的布局。

   左右两边分别有一根线，中间是一个lable。

             
              
              
          
         复制代码

2. 宫格布局

             
                  
                       
                    
               
          
         复制代码

整体布局

上面列出了三种cell的布局方式。每个cell对应一个template。并且使用collection-view来实现瀑布流布局。

另外，Cell3(筛选)的Cell需要跨两列显示。只需要设置collection-view的column-span附加属性即可。

        
     
        
                  
                   
                       
                        
                    
               
          
     
    复制代码

以上的布局代码就是整个闲鱼app搜索结果界面的布局代码。总共才100多行xml代码，比起传统的采用UITableViewCell的开发方式，不仅在开发效率还是代码可读性上面都有极大的优势。

另外，你可以在运行demo的时候旋转屏幕，你会发现所有的布局都会自动重新布局。而这个过程你甚至连一行代码都不用写。