iOS混合开发库(GICXMLLayout)布局案例分析(1)今日头条案例

栏目: IOS · 发布时间: 5年前

内容简介：头条的案例算是一个经典的案例，私底下也称为文章中贴出的XML代码你可以直接从git下载并且运行查看效果，现在就拿今日头条来做下案例分析，如下面三张图所示：

头条的案例算是一个经典的案例，私底下也称为 Feeds 类应用，该类应用有一个特点，那就是一个页面会显示很多条 Feed ，不同的 Feed 对应不同的模板,也就是不同的 (UITableViewCell子类) ，并且每个模板的高度是不固定的，有些模板中的文字需要适当 换行显示 ，有些模板中的图片需要按照 比例显示 ，并且还要考虑不同设备的适配，甚至还要考虑在屏幕横竖屏切换的情况，以上种种加一起来，做这样的应用相当的复杂。事实上，还有一种情况更加的棘手，那就是不同的app版本可能支持的模板种类不一样，比如在新的版本中加入了新的模板，那么对于老版本就无法显示了，不过这个问题这里就不做深入介绍了，你可以参考 热更新 一章来获得灵感:laughing:。

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

现在就拿今日头条来做下案例分析，如下面三张图所示：

图1	图2	图3

上面一共7种不同的模板。下面一一进行分析。

整体分析

从上面7中不同的模板可以归类出有两种基础的布局模板。

模板1、2、3、4使用的模板归为一类，分为上下两层，上面一层是新闻内容，下面显示该条新闻出处、评论、时间内容，而只有第一层新闻内容那一层是会改变的。那么就可以定义一个基础模板。
```

<template t-name="base1">
    <stack-panel>
        
        <template-slot slot-name="content" space-before="10" />
        
        <stack-panel is-horizon="1" space="10" space-before="10" space-after="10">
            <lable text="人民网" font-color="999999" />
            <lable text="15评论" font-color="999999" />
            <lable text="1小时前" font-color="999999" />
        </stack-panel>
    </stack-panel>
</template>
复制代码
```
注意到上面使用了 template-slot 用来占位，这样不同模板的新闻内容就可以通过 template-slot 来显示了。另外，将该占位名称设为 content ，对应 slot-name="content" 。

事实上，一个模板中，你可以定义N个 template-slot ，只需要 slot-name 唯一即可。

模板5、6、7使用的模板归为第二类，该类模板分三层，上面一层是用户信息，第二层是新闻内容，第三层是赞、评论、分享数量等信息的显示。同样的只有中间第二层的新闻内容会改变的，第一层和第三层是不会改变的。

<!--基础模板2 (带用户信息)-->
<template t-name="base2">
    <stack-panel>
        <!-- 用户信息 -->
        <stack-panel is-horizon="1" space-before="10" space="10">
            <image size="32" corner-radius="16" url="http://imgtu.5011.net/uploads/content/20170504/5905661493879766.jpg" />
            <!-- 占用中间全部剩余空间 -->
            <stack-panel flex-grow="1" flex-shrink="1">
                <lable text="海伟22" font-size="14" font-color="191919" />
                <lable text="码农" font-color="999999" />
            </stack-panel>
            <!-- 右边的关注按钮 -->
            <dock-panel width="50">
                <lable text="关注" font-color="red" font-size="14" />
            </dock-panel>
        </stack-panel>
        <!-- 占位模板，新闻内容 -->
        <template-slot slot-name="content" space-before="10" />
        <!--底部信息-->
        <grid-panel columns="3" space-before="10" space-after="10">
            <stack-panel is-horizon="1" justify-content="1" space="5" align-items="2">
                <image local-name="zan" size="15" />
                <lable text="21" font-color="191919" />
            </stack-panel>
            <stack-panel is-horizon="1" justify-content="1" space="5" align-items="2">
                <image local-name="zan" size="15" />
                <lable text="49" font-color="191919" />
            </stack-panel>
            <stack-panel is-horizon="1" justify-content="1" space="5" align-items="2">
                <image local-name="zan" size="15" />
                <lable text="60" font-color="191919" />
            </stack-panel>
        </grid-panel>
    </stack-panel>
</template>
复制代码

同样的，上面的模板一样使用了 template-slot 用来占位。