火山PC从零开始学炫彩UI 第六课

火山PC从零开始学炫彩UI 第六课

作者：灰羊羊
一、本文学习内容
    上一课，我们简单的学习使用火山加载布局文件。
    本文我们学习使用设计器，设计一个好看的编辑框。这里我们涉及到样式以及背景圆角那内填充外边距方面的知识。
  
二、界面设计UI流程
首先我们打开上节课的设计器项目
上节课我们把布局做好了，并且给按钮取了自己的名字或者是ID。
现在我们要放置一个编辑框，在右边工具栏里面。找到编辑框，鼠标点击，然后在窗口上释放。

现在我们默认的编辑框是一个中规中矩，蓝色边框，背景为白色。下面我们要对他进行美化，让他的边框变成圆角。首
先右键点击这个编辑框，选择背景编辑器。进入他的背景管理界面。

然后我们在编辑器里面啊开始添加状态，这里要注意的是，我们不能使用一键添加，而要使用DIY状态。把无焦点和焦点这两个状态都要添加进来。

添加的结果如下图所示。

我们使用矩形，在无交点状态下放置一个矩形，同时选用铺满，将这个矩形把空白编辑处铺满

铺满后，我们在前景色这里。选用无颜色，也就是透明色。

然后再选择边框颜色。这里它可能有一个默认的颜色。您和我的编辑器可能有点不同，这里我默认的是红色

第三个选项是自定义颜色，我们这里用自定义的。我们点击右边的三个点之后会弹出选择资源颜色，在这里我们添加颜色。

点击添加之后，它会出现一个默认的值，这是一个。纯白色，我们可以双击或者单击这个值。进入设置颜色。

在颜色设置里面，您找一个自己看着还不错的颜色。

选择好颜色之后，可以写一个备注描述。

保存确定。这样子一个颜色就添加好了。

我们在编辑器里面就可以使用这个颜色了，现在我们自定义颜色。就是我们刚才选择的。

下面按照上面相同的方法，我们把焦点状态下的边框也设置好。多余的步骤不再重复，下图演示我们在焦点边框上使用的颜色。

在这里您可以设置圆角或者边框的线宽。我下图所示。边框的线宽为2，同时开启平滑效果，会让这个边框看起来更自然。圆角设置为10。这样子会让您边框上四个角出现一定的弧度。

我们设计编辑框的效果就是这样子

下面我们可以把这个编辑框设置成账号登陆时那个输入账号的样式。首先我们选择形状图片。形状图片就相当于是一个图片框，我们把它放在窗口上。

把这个图框缩小，放在编辑框上合适的位置。我们在这里要放一个图标。

这里推荐一个好用的网站，阿里巴巴矢量图标库，这里有许多的图标。

我们现在搜索一个登录图标。找到一个合适的，然后下载它。在这个过程中，可以修改它的尺寸颜色。

下载完成之后找到图标

把它放到我们自己的设计器素材目录里面。

做好之后，我们在设计器资源里面可以点击同步。让设计器刷新。

选中图片组件。在右边属性最下面一栏里。有个图片，我们点击齿轮，选择我们刚才加入的这个图片。

我们预览发现光标在图片的左边，输入数字时，部分数字会被遮挡

此时我们需要选中编辑坡在右边属性。内填充输入40，0，0，0。这里我换了一张图片，也是在阿里矢量图标网站上下载的，上面的图看着不舒服

这里我们介绍一下内填充是怎么用的。如下图所示，如果我们填充的第一位写个10，那么从编辑框左边开始数，它的10个像素是不会被输入文本的。第二个字如果是5，那么从顶边开始算，5个像素是不会被输入文本的。具体的请您看下图。

这里我们只用到40，0，0，0。所以说我们只让左边40个像素，不被输入文本。预览一下这里，你会发现我们的图片框上。带有一个红色的边框，而且我们的编辑框上也有好多的锯齿。这些是。设计器的小问题，如果你用火山加载，就不会出现这种问题。这些现象都会消失。

下面我们按照上一节课的方法，将我们写好的项目保存，然后打包。放到火山里面加载一下，看看效果。
图片的红色边框消失了，编辑框的锯齿也不见了，这个时候出现了新的问题。我们的编辑框四个角上各有一些白边。这里在设计器里面。是体现不出来的，我们看不到白边。还是放到火山里面加载，就出现了这个问题。

解决的办法是我们在设计器里面选中编辑框。在右面属性中。找到背景透明。将此属性改为真。这样的就不会不会出现那个白边了，出现白边的原因是因为我们设置了圆角。

设置好后，我们再用火山运行一下。记得要重新保存打包。

这是我们这节课做的一个编辑框。

三、本文到此结束