写出高效清晰Layout布局文件的一些技巧_H5之家 - 中国HTML5教程资源分享第一站

原文：Android – How to write Batman like xml layout

当人们谈论Android性能的时候总是习惯讨论怎么写出清晰高效的Java代码,却忽略了layout布局文件。layout布局缓慢的渲染速度对app性能也有的很大的影响。充满不必要的views和可读性差的layout文件会让你的app运行缓慢。在本文中我会分享5个技巧来帮你写出高效清晰的layout布局文件。(ps:下面的技巧都非常实用，开发过程中很常见，感动哭！)

1. Use compound drawable on a TextView

用TextView本身的属性同时显示图片和文字

(ps:难以理解现在还有很多人不懂得用这个，实实在在的减少很多view啊，哎！)

通常你需要在文本旁边添加一张图片，假设你需要添加图片在文字的左边，像下面这样：

TextView

不少人首先想到的就是用一个LinearLayout或RelativeLayou来包含一个TextView和ImageView,最后你用了三个UI元素和一大坨代码。用TextView的compound drawable是一个更好更清晰的解决方案。你只需要一个属性就可以搞定。

用到的主要属性：

drawableLeft- 指定drawable放在文本的左边

drawableStart- 作用和drawableLeft相同但是它基于新的API(android 4.2)支持RTL

drawablePadding- 指定文本和drawable之间padding

2. ImageView has src and background attribute

同时使用ImageView的src和background属性实现点击效果

你应该同时使用它们，在很多情况下你会想要给ImageView添加点击效果，然后我看到很多人用LinearLayout来包裹一个ImageView来实现。添加另一个view是没必要的。下面的代码可以让你做的更好：

显示图片用"src"属性，drawable selector 图片点击效果用"background"属性实现，上面用的是android默认提供的selector,当然你也可以换成你自己实现的。下面是最后的效果：(ps:哈哈，效果自己copy上面几行代码就可以看到了，实在需要看请翻墙查看原文)。

3. Use LinearLayout divider

用LinearLayout自带的分割线

分割线在app经常会用到的，使用频率高到让你惊讶。但是LinearLayout有一个属性可以帮你添加分割线。下面的例子中，LinearLayout包含2个TextView和基于他们中间的分割线。

divider

1.Create divider shape(创建shape)

下面是一个简单的shape divider_horizontal.xml用来当做分割线。

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <size android:width="@dimen/divider_width"/> <solid android:color="@color/colorPrimaryDark"/> </shape> 2.Add shape to LinearLayout <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="@android:color/white" android:divider="@drawable/divider_horizontal" //添加分割线 android:dividerPadding="5dp" //设置padding android:showDividers="middle">//居中显示 <TextView android:layout_width="0dp" android:layout_weight="0.5" android:layout_height="wrap_content" android:gravity="center" android:text="@string/batman_name"/> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.5" android:gravity="center" android:text="@string/superman_name"/> </LinearLayout>

上面用到了三个xml属性：

divider -用来定义一个drawable或者color作为分割线

showDividers -指定分割线在哪里显示，它们可以显示在开始位置，中间，末尾或者选择不显示

dividerPadding -给divider添加padding

4.Use the Space view

使用Space控件

当你需要在2个UI控件添加间距的时候,你可能会添加padding或margin。有时最终的layout文件是非常混乱，可读性非常差。当你需要解决问题时，你突然意识到这里有一个5dp的paddingTop,那里有一个2dp的marginBottom,还有一个4dp的paddingBottom在第三个控件上然后你很难弄明白到底是哪个控件导致的问题。还有我发现有些人在2个控件之间添加LinearLayout或View来解决这个问题，看起来是一个很简单解决方案但是对App的性能有很大的影响。

这里有一个更简单更容易的方法那就是Space,看下官方的文档：“Space is a lightweight View subclass that may be used to create gaps between components in general purpose layouts.” 他们没有说谎，确实很轻量。如果你看过Space的实现会发现Space继承View但是没有绘制任何东西在canvas。

/** * Draw nothing. * * @param canvas an unused parameter. */ @Override public void draw(Canvas canvas) { }

使用方法很简单，看下面的图片，我们想要在在标题和描述之间添加间距。

space