每日模板丨滑动人物介绍样式

每日模板第125天

♥ 模板分类：滑动、组合

♥ 搜索关键词：人物介绍

要设计这样一个滑动式的人物介绍，那么首先要准备一张既能凸显人物特色，又特别有感染力的图片作为底图，另外底图建议最好用颜色相对没有那么丰富的图片会比较好。

在设计这个滑动的体验时，有些时候可以让滑动的内容完全遮盖住背景图，有些时候可以让稍微漏出一下背景，营造出若隐若现的美感，就像谈恋爱一样若即若离，欲擒故纵......

好，下面要讲做法了

制作TIPS

竖滑布局的高度可以固定住，但宽度是无法固定，由于我们将要做一个人物介绍的版块，所以不想人物图片在其它阅读环境时（平板电脑、电脑端）被裁减，所以这一次，我们用固定布局固套着滑动布局，使滑动布局的宽度不会发生改变：

• 添加一个固定布局到编辑区域，删除里面的蓝色框模块；

• 然后将一个竖滑布局直接拖入到编辑去的固定布局中，删掉滑动布局内的蓝色框模块；
  

• 现在里外总共有两层布，分别将固定布局的高度，以及竖滑布局的高度，都设置为420；

• 然后我们将背景图设定到最外面的那层固定布局里面，背景图的重复方式，我们选“不重复”

那做到这一步基本的滑动框架已经搭好，剩下的就是做里面的内容了。那里面到底要放什么内容，怎么放，完全就是你的个人喜好，因为布局里面可以放任何的模板，真的！答应我，不要害怕尝试！具体怎么放内容就不详细说了，接下来我想给你介绍一下如何让内容划起来。

这个滑动模板我希望的到最终的效果是，最开始的时候，屏幕上既要漏出大部分背景，也要有一部分文字内容；然后滑到最后要漏出整片背景，又要连着看到一点点文字注释，具体用图片解释是这样的：

但是我猜你往滑动布局添加完内容后，你会看到这个布局都塞满了文字模块，遮住了整个背景，却没有上下滑动的空间：

其实要增大上下滑动的空间，非常简单，就是在文字模块的前后添加空行又或者是增加某个模块的段前／后距就好了：