技术总结--android篇(二)--布局的优化
2015-06-06 15:23
465 查看
我们一直都在为开发android的布局而烦恼,是因为android的机子分辨率真的是千变万化,而且还有些很是奇葩的分辨率出现,比如960*540。。我们在设计页面的时候该如何下手呢?
其实设计android的页面就像网页设计一样,我们在折腾android机子的分辨率就好比折腾各种浏览器一样,其实我们应该多去看看android官网提供的android design,但是我想说的时候,目前为止,可以说,还没有一条非常完善的布局方法,只有在不断的总结中进步,让自己的内功更加深厚,才能完成android的布局。下面我们就一起来探讨下如何优化android的布局。纯属个人的经验之谈。
第一步,新建一个项目,在模拟器上运行,就是这样,你没看错,照着做就行了,我们将进行view的优化喝兼容!
第二步,打开hierarchyviewer,这是一个帮助我们优化view的非常重要的工具的,接下来的大部分时间,都会借住这个工具进行讲解,这个工具沉睡在android sdk 目录 tools下 hierarchyviewer.bat,或者用Everything这样的搜索硬盘的工具直接找到!
第三步,分析,用hierarchyviewer这样的神奇,可以到处如下图:
![](http://img.blog.csdn.net/20140804122111979?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWlhbnFpYW55aWhhbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这么一张图就是我们一个Hello,World项目的View 布局结构,在HierarchyViewer上你点击每个按钮就会有非常详细的布局信息,所以,这里对于hierarchyViewer的介绍到此为止!网上很多HierarchyViewer这个工具的介绍!自主上网去找找吧!这个可是android ui布局的神器来的!我觉得大家都要学会用吧!
技巧一:熟读官方的API文档!
个人建议,常用的Widget的所有参数都尽量了解一遍!在阅读官方文档的时候我们发现了Button,有一个可以把图绘制在左边的参数:android:drawableLeft
案例一:做一个带箭头的返回按钮
以前常用的代码设计:
用刚刚的那个工具来分析一下:
![](http://img.blog.csdn.net/20140804122535484?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWlhbnFpYW55aWhhbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
从图中我们可以看到,我们用了view的三个节点去设计这个按钮!如果说有三个这样的按钮。。就要有九个这样的节点了!那么如果有N个呢?我们想想如何去优化一下这个设计。
这里我们用了android:drawableLeft,用HierarchyViewer分析一下,
![](http://img.blog.csdn.net/20140804123316023?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWlhbnFpYW55aWhhbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这样就从3N的复杂布局瞬间变成了N级布局啦!所以说熟读官方的api文档非常非常的重要!
技巧二:熟练的使用<include />标签就可以大大的减少我们日后都维护工作!
在实际开发中,我们经常会遇到一些共用的UI组件,比如带返回按钮的导航栏,如果为每一个xml文件都设置这部分布局,一是重复的工作量大,二是如果有变更,那么每一个xml文件都得修改。还好,Android为我们提供了< include />标签,顾名思义,通过它,我们可以将这些共用的组件抽取出来单独放到一个xml文件中,然后使用< include />标签导入共用布局,这样,前面提到的两个问题都解决了。例如上面提到的例子,新建一个xml布局文件作为顶部导航的共用布局。
我们就可以用<include />直接把需要这个顶部导航的布局添加到布局里面去,而且在维护的时候,只需要修改这个顶部导航的布局就OK了!是不是非常的方便呢?
技巧三:合并没必要的节点!<merge ></merge>
还记得刚刚写的那个按钮吗?
现在可以修改为:
![](http://img.blog.csdn.net/20140804124003012?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWlhbnFpYW55aWhhbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这样又少了一个节点了!在显示上又快了那么一点点!
技巧四:尽量多使用RelativeLayout,不要使用绝对布局AbsoluteLayout!
其实设计android的页面就像网页设计一样,我们在折腾android机子的分辨率就好比折腾各种浏览器一样,其实我们应该多去看看android官网提供的android design,但是我想说的时候,目前为止,可以说,还没有一条非常完善的布局方法,只有在不断的总结中进步,让自己的内功更加深厚,才能完成android的布局。下面我们就一起来探讨下如何优化android的布局。纯属个人的经验之谈。
第一步,新建一个项目,在模拟器上运行,就是这样,你没看错,照着做就行了,我们将进行view的优化喝兼容!
第二步,打开hierarchyviewer,这是一个帮助我们优化view的非常重要的工具的,接下来的大部分时间,都会借住这个工具进行讲解,这个工具沉睡在android sdk 目录 tools下 hierarchyviewer.bat,或者用Everything这样的搜索硬盘的工具直接找到!
第三步,分析,用hierarchyviewer这样的神奇,可以到处如下图:
这么一张图就是我们一个Hello,World项目的View 布局结构,在HierarchyViewer上你点击每个按钮就会有非常详细的布局信息,所以,这里对于hierarchyViewer的介绍到此为止!网上很多HierarchyViewer这个工具的介绍!自主上网去找找吧!这个可是android ui布局的神器来的!我觉得大家都要学会用吧!
技巧一:熟读官方的API文档!
个人建议,常用的Widget的所有参数都尽量了解一遍!在阅读官方文档的时候我们发现了Button,有一个可以把图绘制在左边的参数:android:drawableLeft
案例一:做一个带箭头的返回按钮
以前常用的代码设计:
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/btn_headtita" android:textColor="#ffffff" android:text="@string/back" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/header_back" /> </RelativeLayout>
用刚刚的那个工具来分析一下:
从图中我们可以看到,我们用了view的三个节点去设计这个按钮!如果说有三个这样的按钮。。就要有九个这样的节点了!那么如果有N个呢?我们想想如何去优化一下这个设计。
<Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/btn_headtita" android:drawableLeft="@drawable/header_back" android:gravity="center" android:padding="10dp" android:text="@string/back" android:textColor="#ffffff" />
这里我们用了android:drawableLeft,用HierarchyViewer分析一下,
这样就从3N的复杂布局瞬间变成了N级布局啦!所以说熟读官方的api文档非常非常的重要!
技巧二:熟练的使用<include />标签就可以大大的减少我们日后都维护工作!
在实际开发中,我们经常会遇到一些共用的UI组件,比如带返回按钮的导航栏,如果为每一个xml文件都设置这部分布局,一是重复的工作量大,二是如果有变更,那么每一个xml文件都得修改。还好,Android为我们提供了< include />标签,顾名思义,通过它,我们可以将这些共用的组件抽取出来单独放到一个xml文件中,然后使用< include />标签导入共用布局,这样,前面提到的两个问题都解决了。例如上面提到的例子,新建一个xml布局文件作为顶部导航的共用布局。
我们就可以用<include />直接把需要这个顶部导航的布局添加到布局里面去,而且在维护的时候,只需要修改这个顶部导航的布局就OK了!是不是非常的方便呢?
技巧三:合并没必要的节点!<merge ></merge>
还记得刚刚写的那个按钮吗?
现在可以修改为:
<?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/btn_headtita" android:drawableLeft="@drawable/header_back" android:gravity="center" android:layout_gravity="center_vertical|center_horizontal" android:padding="10dp" android:text="@string/back" android:textColor="#ffffff" /> </merge>
这样又少了一个节点了!在显示上又快了那么一点点!
技巧四:尽量多使用RelativeLayout,不要使用绝对布局AbsoluteLayout!
相关文章推荐
- Android平台中获取状态栏的高度代码实现
- (二)Android导航栏和菜单资源的结合使用
- 技术总结--android篇(一)--MVC模式
- Android之Windows下生成动态库so并打包到APK中(转)
- Android串口操作,简化android-serialport-api的demo(转)
- Android实战简易教程-第十一枪(树形组件:ExpandableListView显示和动态添加删除)
- <Android>inflate的方法参数说明
- 安卓表格布局android:collapseColumns,android:shrinkColumns和stretchColumn
- Android--taskAffinity属性
- Android屏幕适配全攻略(最权威的官方适配指导)
- Android Stdio常见问题解决
- Android应用程序绑定服务(bindService)的过程源代码分析
- Java与Android开发环境配置以及遇到的问题
- Android Service 中 onStartCommand()函数返回值含义
- android Button粒子化效果
- Android通过Service调用远程接口—AIDL-进程间通信
- Android 自定义ToggleButton
- android--系统jar包引用
- Android加载图片内存溢出问题解决方法
- Android开发中比较耗时的一些操作小结