最近工作比较轻松,项目不忙,所以闲着的时间去研究了自己比较感兴趣的UI界面,确实漂亮的UI能给用户带来良好的体验,在android应用中一直尤为重要,这次模仿的是QQ2012Android版的的最新登陆界面以及部分注册的功能,简洁漂亮的UI给人耳目一新的感觉,但看似简单的布局要真的自己做起来还是会遇到很多的困难,尤其是木有什么美工的基础,先上图片看下做完后的效果,有个别的地方还是与原版有出入的:
首先下载官方最新的QQ2012APK文件,然后将后缀名改为.rar打开后可以获得全部锁需要的图片资源,嘿嘿,好多.9的图片都不需要自己再做了~!,之后既要研究该如何去模仿这款应用的布局了
--------------------------------------------------华丽的分割线------------------------------------------------------------------
究竟怎样控制好各个控件之间的排布,如何确定各种布局的嵌套呢?既然是优秀的UI界面,我们来完全模仿,那就可以直接照搬QQ的设计排版,这里我用到了android中自带的
层级观察器hierarchyviewer工具来分析UI的布局,hierarchyviewer是非常之实用的工具,即可以用来优化自己的布局,也可以用来参考别人优秀的布局,在\android-sdk-windows\tools目录下双击即可以使用:
点击Load View Hierarchy 选项进入如下画面,可以分析其中的布局了:
分成四个区域,左边较大的工作区即是当前UI的整体布局,一层级的方式排列展示出来,右侧的分三块区域,上边是左侧的缩略图,中间是当前选中布局的属性介绍,可以点击查看具体的数值,很 方便,下边是点击当前布局的实际效果,通过这些就可以了解当前UI是怎样的布局,具体用到了哪些布局方式和控件,一目了然。
--------------------------------------------------华丽的分割线------------------------------------------------------------------
点击Inspect Scrrenshot,进入如下画面:
左侧区域是当前布局的树状结构,这样看起来布局更容易理解,右侧是当前页面的图像,可以通过鼠标移动十字交叉处选中当前元素,而具体的信息就会在中间显示出来。包括所选地方的颜色值,坐标信息,也可以通过放大来进一步进行细微的操作。通过这个工具,怎么样?是不是可以很轻松的把自己喜欢的UI模仿学习下来呢~!
--------------------------------------------------华丽的分割线------------------------------------------------------------------
以下是部分布局的代码,具体的java代码可以自行下载研究,我也写了比较幼稚的注释嘿嘿:
登陆界面的布局:
注册界面的布局:
--------------------------------------------------华丽的分割线------------------------------------------------------------------
以上只是布局的代码,还有部分功能逻辑的实现在源代码里面,当然只是简单操作,并没有真正实现QQ的注册以及短信的验证等信息,但自己写写逻辑也还不错,总之收获还是蛮多的,不仅仅是布局,也有代码的编写,附上源码,希望和大家一起分享交流
好吧,其实这里源码很早就传到我的资源里面了,只是没有贴地址,地址如下
点击打开链接