浅析flex UI层实现

作为初涉flex的程序员，我认为一个好的UI层，可以给人一种比较赏心悦目的感觉，好的UI层可以极大的勾起你继续开发的欲望，但是无核实现一个好的UI层，如何设计一个比较赏心悦目的界面呢？我想，这可能是所有初学flex所面临的问题了。
首先，一个好的UI层无非是一些控件和背景的堆砌，背景这块比较简单，但有时候会设计到平铺、背景框的圆角等等诸多问题，在这里，我先谈谈背景这块。在设计UI层的时候，背景的选择尤其重要，因为他是整个界面色调的基础，后面的所有界面设计的色调都是基于背景图片或者背景颜色所展开的，例如：

这是我现在正在进行的一个ESPClient客户端项目，这个是该项目的登录界面，整体的项目风格都是采用这种天蓝色的色调，所以说背景图片和背景色的选择会决定一个项目基本色调的定位。
或许会有人问，这个界面是怎么做出来的，其实，细细的分析一下，整体可分为两部分，每个部分里面采用的绝对定位，上半部分设计背景的时候如下：

上面的logo和title，当初设计的时候为了省事直接用photoshop设计上去的，当然也可以采用绝对定位的办法把logo和文字定位上去。当你在用容器内嵌入背景图片的时候，如果你给容器设置边框的时候，一般有两种选择，第一种是背景图片照旧设置，在背景图片所在的容器设置cornerRadius，这时候你会发现在圆角的后面会出现些许白色的背景，怎么解决这种情况呢？很简单，在容器上设置backgroundAlpha="0"就可以解决问题了。最大化最小化的两个按钮就牵扯到了按钮皮肤的制作了，之后我会做详解，现在只讲界面的设计和布局。
再往下来就是用户名的输入框了，这个地方，输入框我没有设置它的皮肤，只是简单的设置了TextInput的borderColor="#7CA6FE"和focusIn="#7CA6FE",至于这里颜色的选择就要看你自己来把握了。这个输入框还有一个下拉的效果，当然这里也可以选择用DropDownList来处理，我这里采用的是TextInput、Button和弹出层的结合，也就是做出一个假的DropDownList效果：

下面的状态选择框和这个类似，采用的是Button和弹出层的结合，当用户选择的时候或许选择的内容来动态替换Button的皮肤：

 

整体的布局和设计风格我是这样处理的，希望大家能给点意见，下一章我来分解这个界面，欢迎大家关注和拍砖！

 

 

 

 

 

 

 

 

二
上一章我对我们项目的登录界面做了一次浅析，接下来，我就把上次所讲的分解一下，首先，要讲到的就是按钮皮肤的制作。
众所周知，设计一套比较好的皮肤，可以增加项目的可观赏性，但是设计皮肤从何入手呢？
作为一个新手，我在学习设计皮肤的时候，是新建一个皮肤文件，然后在此基础之上改善，熟练的同志可以直接设计皮肤，这里我拿Button的皮肤做示例：
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
这些是生成按钮的四个状态，根据它可以设置按钮的不同显示状态；

这个地方是按钮的阴影设置，这个地方可以根据自己对色调的把握来设置；

这个地方是填充设置，当然，这里除了可以设置背景颜色之外，还可以根据对应状态来设置按钮的样子，下面是我自己定义的按钮的填充：

第三步就是设置它的低亮度了，下面是系统自动生成的：

对于这块，如果把握的不够好的话可以切换到设计界面来调节，第四步是设置高亮度，和第三步类似。
其实在设计皮肤的时候，没有完全必要按照这个步骤，只要你美工足够专业，在设计背景图片的时候就可以把这些效果直接做进图片里面，我们只需要进行第二步的fill操作就够了，其余的地方就是第八步的label如果你不确定要放什么，可以直接删掉，通过前端调的时候再给它赋值，皮肤的引用办法如下：
<s:Button skinClass="你皮肤所在的包" label="自己发挥"/>
其余的皮肤设计和这个类似，建议利用系统可以生成的优点，首先读懂该段代码是做什么用的，然后根据自己的需要有选择的去修改，一个好的皮肤需要的是你自己对色调的把握，把握的好，皮肤做的就比较好看，当然这也不是一时间可以做到的，需要的是自己勤加练习。