浅析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的皮肤：

                 

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