缩略图的适配问题

一个好的皮肤，其适配性一定要好，而在皮肤的适配性上，最需要我们留意就是缩略图。本篇文章借着谈适配问题再深入的讲解一下缩略图，希望通过本篇文章，我们能更好的了解怎么制作适配性好的缩略图。

我们在基础教程文章 制作缩略图导览 中介绍了基本的制作缩略图的步骤，并且分了两类，一类是自动创建的缩略图，一类是手动创建的缩略图。

我们对缩略图的适配性提出一个最基本需求：当场景不多时，不多的标准是不超出屏幕显示，缩略图居中显示，当场景太多，超出屏幕显示，可以滑动条浏览，且滑动条左对齐。

基于这个需求，本篇文章我们只讨论自动创建的这种缩略图，即带有滚动区域的缩略图。因为手动创建的额那种不包含滑动区域，实现不了适配性需求，因此不作讨论。

我们就从组件库的这个缩略图组件开始分析。

基础文章中介绍了如何制作，这里就不再重述了，直接看它的“结构”。

自动创建缩略图有两个关键点，克隆和节点图象。

说了半天的缩略图其实是节点图象，一个缩略图是由一个节点图象生成出来的，如果没有“节点图象”，比如在版本4里只能自己手动截取制作。

上图是节点图象的参数。漫游节点，选择场景。投影方式，可以选择不同的投影类型。去掉使用默认试图勾选，可以更改下面的参数选择合适的视图，也即选择哪一块视野。这里仅作了解，这些参数在克隆中，不需要任何设置。

自动创建缩略图比较省事，省事的关键就是利用了克隆。克隆元素的作用就是，只要给克隆一个子级内容，它就能按照规则递推显示内容。这里给的是节点图象，所以克隆就会将节点图像依次显示出来。当然并不是什么都可以进行克隆，一般也就是节点图象，标题文本这些和节点有关的内容。

克隆方向，可以选择水平横向的克隆，也可以选择垂直竖向的克隆。

对应的行、列也可以设置成多行。

我们就以组件库添加的缩略图组件，完全默认的设置看一下预览效果。

上面看到是场景比较少（3张）和场景比较多（10多张）的情况，场景比较多的情况就不讨论了，场景多了出现滑动条，符合需求。而场景较少时，是不符合要求的，我们就需要“调整”一下。

以上啰嗦了这么多，现在才说到重点。

对于现在的现成的缩略图组件，我们只需要去掉背景，内容居中即可实现需求。

背景、边框、对齐这三处设置如上，其中最重要的就是“对齐”，背景和边框修不修改都可以，去掉背景和边框，视觉上会好一点。

在去掉背景勾选和边框为0时要注意，可能由于软件自身的问题，在设置的时候有时候可能不生效，重复多设置几次就可以了，一定要看最终效果。

预览一下。

以上长篇大论这么多，其实一句话就可以解决。在版本5中将滚顶区域的滚动区——对齐参数，由默认的左上改为中上即可。

到了版本6，通过组件库添加的缩略图组件，默认就是类似我们上述设置适配好的样子。