canvas教程

写出高效清晰Layout布局文件的一些技巧

字号+ 作者:H5之家 来源:H5之家 2017-01-07 09:01 我要评论( )

原文:Android – How to write Batman like xml layout 当人们谈论Android性能的时候总是习惯讨论怎么写出清晰高效的Java代码,却忽略了layout布局文件。layout布局缓慢的渲染速度对app性能也有的很大的影响。充满不必要的views和可读性差的layout文件会让你

原文: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是一个更好更清晰的解决方案。你只需要一个属性就可以搞定。

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/batman" android:drawableLeft="@drawable/batman" android:drawableStart="@drawable/batman" android:drawablePadding="5dp"> </TextView>

用到的主要属性:

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是没必要的。下面的代码可以让你做的更好:

<ImageView android:id="@+id/image" android:layout_width="@dimen/batman_logo_width" android:layout_height="@dimen/batman_logo_height" android:background="?attr/selectableItemBackground"//点击效果 android:src="@drawable/batman_logo_transparent"//图片/>

显示图片用"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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 提高Interface Builder高效工作的8个技巧

    提高Interface Builder高效工作的8个技巧

    2016-09-03 18:02

  • 写出卓越的jQuery插件的10个技巧

    写出卓越的jQuery插件的10个技巧

    2015-10-15 10:10

网友点评