好久没更新博客了,趁着清明来写点什么。

  今天来讲下如何使用android中提供的工具优化我们的布局。首先我们写一个最简单的框架布局。

  


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView 
android:layout_width="300dip" 
android:layout_height="300dip" 
android:background="#00008B"
android:layout_gravity="center"
/>
<TextView 
android:layout_width="250dip" 
android:layout_height="250dip" 
android:background="#0000CD"
android:layout_gravity="center"
/>
<TextView 
android:layout_width="200dip" 
android:layout_height="200dip" 
android:background="#0000FF"
android:layout_gravity="center"
/>
<TextView 
android:layout_width="150dip" 
android:layout_height="150dip" 
android:background="#00BFFF"
android:layout_gravity="center"
/>
<TextView 
android:layout_width="100dip" 
android:layout_height="100dip" 
android:background="#00CED1"
android:layout_gravity="center"
/>
</FrameLayout>

 非常简单的一个布局,实现一个层叠的效果,运行效果如下图:

下面我们就用android中提供的一个观察布局的工具,层级观察器,Hierarchy Viewer来观察我们的布局。Hierarchy Viewer工具是一个非常好的布局优化工具,同时,你也可以通过它学习他人的布局。应该说是一个非常实用的工具。

   Hierarchy Viewer在sdk的tools目录下,打开后最新界面如图所示:

  界面很简洁,列出了当前设备上的进程,在前台的进程加粗显示。上面有三个选项,分别是刷新进程列表,将层次结构载入到树形图,截取屏幕到一个拥有像素栅格的放大镜中。对应的在左下角可以进行三个视图的切换。在模拟器上打开写好的框架布局,在页面上选择,点击Load View,进入如图所示界面。

  左边的大图为应用布局的树形结构,上面写有控件名称和id等信息,下方的圆形表示这个节点的渲染速度,从左至右分别为测量大小,布局和绘制。绿色最快,红色最慢。右下角的数字为子节点在父节点中的索引,如果没有子节点则为0。点击可以查看对应控件预览图、该节点的子节点数(为6则有5个子节点)以及具体渲染时间。双击可以打开控件图。右侧是树形结构的预览、控件属性和应用界面的结构预览。点击相应的树形图中的控件可以在右侧看到他在布局中的位置和属性。工具栏有一系列的工具,保存为png或者psd,刷新等工具。其中有个load overlay选项可以加入新的图层。当你需要在你的布局中放上一个bitmap,你会用到它来帮你布局。点击左下角的第三个图标切换到像素视图,如下图所示。

  视图左侧为View和ViewGroup关系图,点击其中的View会在右边的图像中用红色线条为我们选中相应的View。最右侧为设备上的原图。中间为放大后带像素栅格的图像,可以在Zoom栏调整放大倍数。在这里能定位控件的坐标,颜色。观察布局就更加的方便了。

接下来再介绍下另一个布局优化工具-layoutopt。这是android为我们提供的布局分析工具。它能分析指定的布局,然后提出优化建议。  

  要运行它,打开命令行进入sdk的tools目录,输入layoutopt加上你的布局目录命令行。运行后如图所示,框出的部分即为该工具分析布局后提出的建议,这里为建议替换标签。

下面列出一些常会碰到的输出:

$ layoutopt samples/
samples/compound.xml
   7:23 The root-level <FrameLayout/> can be replaced with <merge/>
   11:21 This LinearLayout layout or its FrameLayout parent is useless
samples/simple.xml 提示未使用到该布局
   7:7 The root-level <FrameLayout/> can be replaced with <merge/>
samples/too_deep.xml
   -1:-1 This layout has too many nested layouts: 13 levels, it should have <= 10!
   20:81 This LinearLayout layout or its LinearLayout parent is useless
   24:79 This LinearLayout layout or its LinearLayout parent is useless
   28:77 This LinearLayout layout or its LinearLayout parent is useless
   32:75 This LinearLayout layout or its LinearLayout parent is useless
   36:73 This LinearLayout layout or its LinearLayout parent is useless
   40:71 This LinearLayout layout or its LinearLayout parent is useless
   44:69 This LinearLayout layout or its LinearLayout parent is useless
   48:67 This LinearLayout layout or its LinearLayout parent is useless
   52:65 This LinearLayout layout or its LinearLayout parent is useless
   56:63 This LinearLayout layout or its LinearLayout parent is useless
samples/too_many.xml
   7:413 The root-level <FrameLayout/> can be replaced with <merge/>
   -1:-1 This layout has too many views: 81 views, it should have <= 80!
samples/useless.xml 提示该布局中有太多的控件
   7:19 The root-level <FrameLayout/> can be replaced with <merge/>
   11:17 This LinearLayout layout or its FrameLayout parent is useless

通过这个工具,能很好的优化我们的UI设计,布局方法。好了,今天就写到这里了。希望对大家有帮助,有问题可以留言交流~这里说下有的网站转载了我的文章,我很开心。但是都不留个出处,那就不太好了。所以欢迎转载,但是请保留出处。http://www.cnblogs.com/noTice520/

利用Hierarchy Viewer优化布局的更多相关文章

  1. 看了一本书,说可以利用Hierarchy Viewer优化布局

    看了一本书,说可以利用Hierarchy Viewer优化布局,今以志之. 参考:http://www.cnblogs.com/Rocky_/archive/2011/11/04/2236243.ht ...

  2. Android 卡顿优化 3 布局优化 工具 Hierarchy Viewer

    欲善其事, 先利其器. 分析布局, 就不得不用到Hierarchy Viewer了. 本文工具使用皆以GithubApp的详情界面RepoDetailActivity为例说明. 为了不影响阅读体验, ...

  3. Android 性能优化(4)Optimizing Layout Hierarchies:用Hierarchy Viewer和Layoutopt优化布局

    Optimizing Layout Hierarchies This lesson teaches you to Inspect Your Layout Revise Your Layout Use ...

  4. Android优化——UI检视利器:Hierarchy Viewer

    在Android的SDK工具包中,有很多十分有用的工具,可以帮助程序员开发和测试Android应用程序,大大提高其工作效率.其中的一款叫 Hierachy Viewer的可视化调试工具,可以很方便地在 ...

  5. Android 性能优化(22)*性能工具之「Hierarchy Viewer」 Hierarchy Viewer Walkthrough

    Hierarchy Viewer Walkthrough 1.In this document Prerequisites Setting the ANDROID_HVPROTO variable W ...

  6. Android 性能优化(2)性能工具之「Hierarchy Viewer 」Optimizing Your UI:分析哪个view有性能问题,查看屏幕上某像素点的坐标,颜色等

    Optimizing Your UI In this document Using Hierarchy Viewer Running Hierarchy Viewer and choosing a w ...

  7. Android中View绘制优化之一---- 优化布局层次

    本文原创, 转载请注明出处:http://blog.csdn.net/qinjuning 前言,竟然是翻译,当然得弄的有板有眼. 照着大作家格式来咯 , - - . 译序 最近一直在做锁屏界面,之前也 ...

  8. Hierarchy Viewer

    http://blog.csdn.net/ddna/article/details/5527072 Hierarchy Viewer是随AndroidSDK发布的工具,位置在tools文件夹下,名为h ...

  9. 【转】【Android工具】被忽略的UI检视利器:Hierarchy Viewer

    原文:http://blog.csdn.net/ddna/article/details/5527072 Hierarchy Viewer是随AndroidSDK发布的工具,位置在tools文件夹下, ...

随机推荐

  1. ios书籍推荐

    1.Objective-C Programming  内容不多, 却都是精华, 有了一点 C 语言基础可以快速阅读此书, 大概一天时间就可以看完, 看完后对 iOS 开发能够有个基本的印象. 2.iO ...

  2. matlab mse函数

    mse是检验神经网络算法的误差分析; mse是平均平方误差性能函数,是网络性能函数.平方误差就是指误差的平方.

  3. 2.按要求编写Java应用程序: (1)编写西游记人物类(XiYouJiRenWu) 其中属性有:身高(height),名字(name),武器(weapon) 方法有:显示名字(printName),显示武器(printWeapon) (2)在主类的main方法中创建二个对象:zhuBaJie,sunWuKong。并分别为他 们的两个属性(name,weapon)赋值,最后分别调用printNam

    XiYouJiRenWu package com.hanqi.test; public class XiYouJiRenWu { String height,name,weapon; XiYouJiR ...

  4. c语言_头文件_stdlib

    简介 stdlib 头文件即standard library标准库头文件 stdlib 头文件里包含了C.C++语言的最常用的系统函数 该文件包含了C语言标准库函数的定义 stdlib.h里面定义了五 ...

  5. c语言-error C2440: “static_cast”: 无法从“UINT (__thiscall CHyperLink::* )(CPoint)”转换为“LRESULT (__thiscall CWnd::* )(CPoint)”

    出现这个错误的原因可是“人力不可抗拒”之原因造成的,因为旧版本的 ON_WM_NCHITTEST 宏使用了 UINT (__thiscall CWzButton::* )(CPoint); 类型的类成 ...

  6. H5的新应用-获取用户当前的地理坐标

    ------------------------------ <script type="text/javascript">                       ...

  7. hdu_2871_Memory Control(巨恶心线段树)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=2871 题意:给你一段内存,让你操作1:Reset:重置所有内存 2:New x:申请一块X大小的内存, ...

  8. (转) 三个nginx配置问题的解决方案

    今天开启了nginx的error_log,发现了三个配置问题: 问题一: 2011/07/18 17:04:37 [warn] 2422#0: *171505004 an upstream respo ...

  9. 【Machine Learning in Action --2】K-最近邻分类

    1.K-近邻算法(KNN)概述 K-近邻算法采用测量不同特征值之间的距离方法进行分类. 工作原理:存在一个样本数据集合(也称作训练样本集),并且样本集中每个数据都存在标签(即我们知道样本集中每一数据与 ...

  10. callback in C

    callback is nothing but passing the function pointer to the code from where you want your handler/ c ...