Android性能优化之-UI优化篇
mozeliang
8年前
<p>日常开发中，我们经常会碰到比较复杂的布局，在这种情况下，最简单的方案就是采用多层嵌套实现效果，但是最简单的方法就是最优的方案吗？我认为在不影响效果的情况下应尽可能减少布局的层级、减少嵌套，这样做的好处就是可以让整个布局达到结构清晰，渲染速度快的效果。</p> <p>一些需要我们掌握的小技巧</p> <p>< include/> 重用:</p> <p>< include>标签的作用是在当前布局中引入另外一个布局，作为当前布局的子布局。可以节省大量代码，同时便于统一使用及维护。</p> <p>以app中常见的标题栏为例:</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="48dp" android:background="@color/background"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:src="@mipmap/ic_launcher"/> <TextView tools:text="标题" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textSize="16sp" android:textColor="@color/black" /> <TextView tools:text="确定" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center" android:layout_alignParentRight="true" android:paddingRight="15dp" android:textSize="16sp" android:textColor="@color/black" /> </RelativeLayout></code></pre> <p>运行效果如下:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8fbcae65329bc8149eae1168b1005bf0.jpg"></p> <p>你可以在其他xml中调用它，比如:</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <include layout="@layout/title_bar"/> </RelativeLayout></code></pre> <p>效果和上面是一样的，你也可以在< include>标签当中重新设置宽高等layout属性。</p> <p>用TextView同时显示图片和文字:</p> <p>这个不用多说吧，使用TextView的drawableLeft(Right,Top,Bottom)，举个栗子:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7e060dea455c381e17518d6af40a9a6e.jpg"></p> <p>这种效果如果使用两个ImageView加上一TextView是非常不明智的，我们可以这样写:</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/background"> <TextView android:drawableLeft="@mipmap/ic_launcher" android:drawableRight="@mipmap/enter" android:drawablePadding="15dp" android:paddingLeft="15dp" android:paddingRight="15dp" android:textSize="16sp" android:text="朋友圈" android:background="@color/white" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="50dp" /> </LinearLayout></code></pre> <p>这样写是不是简洁多了呢</p> <p>使用TextView的行间距:</p> <p>效果图:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/22c0d4d9905b76749920fd9fcf43536c.jpg"></p> <p>看到这个效果，我们第一反应是不是四个Textview呢? 看下代码吧：</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="100dp" android:layout_width="match_parent"> <ImageView android:padding="25dp" android:src="@mipmap/aa" android:layout_width="100dp" android:layout_height="match_parent"/> <TextView android:textSize="14dp" android:lineSpacingExtra="10dp" android:gravity="center_vertical" android:text="交易状态：已支付\n快递状态：北京通州1号仓库已出库\n配送时间：1月4日 \n快递费用：包邮" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout></code></pre> <p>可以看到我们仅仅利用Android:lineSpacingExtra="10dp"，这一行代码就省去了3个TextView，在行数更多的情况下是不是方便多了呢？</p> <p>ViewStub:</p> <p>ViewStub是一个非常轻量级的View，与其他的控件一样，有着自己的属性及特定的方法。它是一个看不见的，不占布局位置，占用资源非常小的控件。可以为ViewStub指定一个布局，ViewStub与其他控件相比，主要区别在以下：</p> <ul> <li>当布局文件inflate时，ViewStub控件虽然也占据内存，但是相相比于其他控件，ViewStub所占内存很小。</li> <li>ViewStub只能用来Inflate一个布局文件，而不是某个具体的View，当然也可以把View写在某个布局文件中。</li> </ul> <p>基于以上，我们可以看出 ViewStub的优点在于实现View的延迟加载，避免资源的浪费，减少渲染时间，在需要的时候才加载View。</p> <p>实例：</p> <pre> <code class="language-java"><ViewStub android:id="@+id/stub_import" android:inflatedId="@+id/panel_import" android:layout="@layout/progress_overlay" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" /></code></pre> <p>用ViewStub加载layout文件时，可以调用 setVisibility(View.VISIBLE) 或者 inflate()</p> <pre> <code class="language-java">((ViewStub) findViewById(R.id.stub_import)).setVisibility(View.VISIBLE); View importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate();</code></pre> <p>注意：如果ViewStub可见或是被inflate了，ViewStub就不存在了，取而代之的是被inflate的Layout。所以它也被称做惰性控件。</p> <p>用LinearLayout自带的分割线:</p> <p>效果图：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/87bd9993af1eacb50c6dee1790e43ee2.jpg"></p> <p>上图中分割线大家是怎么实现的呢，是不是用一个view设置高度和背景？其实我们可以使用LinearLayout自带的分割线实现，看代码</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:divider="@drawable/divider" android:showDividers="middle"> <TextView android:drawableLeft="@mipmap/ic_launcher" android:drawableRight="@mipmap/enter" android:drawablePadding="10dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:textSize="16sp" android:text="设置" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="50dp" /> <TextView android:drawableLeft="@mipmap/ic_launcher" android:drawableRight="@mipmap/enter" android:drawablePadding="10dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:textSize="16sp" android:text="档案" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="50dp" /> <TextView android:drawableLeft="@mipmap/ic_launcher" android:drawableRight="@mipmap/enter" android:drawablePadding="10dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:textSize="16sp" android:text="下载" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="50dp" /> </LinearLayout></code></pre> <p>其实实现分割线的就是这两行：</p> <pre> <code class="language-java">android:divider="@drawable/divider" android:showDividers="middle"</code></pre> <p>其中divider.xml是分隔线样式。就是一个shape，showDividers 是分隔线的显示位置，beginning、middle、end分别代表显示在开始位置，中间，以及末尾位置。</p> <p>还有一个dividerPadding的属性没有用到，意思是给divider添加padding。</p> <p>Space控件:</p> <p>Space控件是Android4.0中新提供的两个控件之一，另一个是GridLayout，Space控件源码非常简单，先来看看</p> <pre> <code class="language-java">public class Space extends View { public Space(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); if (getVisibility() == VISIBLE) { setVisibility(INVISIBLE); } } public Space(Context context, AttributeSet attrs) { this(context, attrs, 0); } public Space(Context context) { this(context, null); } /** * Draw nothing. * * @param canvas an unused parameter. */ @Override public void draw(Canvas canvas) { } /** * Compare to: {@link View#getDefaultSize(int, int)} * If mode is AT_MOST, return the child size instead of the parent size * (unless it is too big). */ private static int getDefaultSize2(int size, int measureSpec) { int result = size; int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); switch (specMode) { case MeasureSpec.UNSPECIFIED: result = size; break; case MeasureSpec.AT_MOST: result = Math.min(size, specSize); break; case MeasureSpec.EXACTLY: result = specSize; break; } return result; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension( getDefaultSize2(getSuggestedMinimumWidth(), widthMeasureSpec), getDefaultSize2(getSuggestedMinimumHeight(), heightMeasureSpec)); } }</code></pre> <p>该组件直接继承View，相比其他的View组件都有onDraw方法用来绘制自身，而Space控件onDraw方法进行了一个空的实现。Space控件在布局中只占位置，而不去绘制渲染。比如组件中的间隙用Space控件填充比用其它控件填充可以提高效率。</p> <p>实例：</p> <pre> <code class="language-java"><Space android:layout_width="match_parent" android:layout_height="15dp" /></code></pre> <p>减少嵌套:</p> <p>首先在我们日常开发中，我们心中要有一个大原则：尽量保持布局层级的扁平化。在这个大原则下我们要知道：</p> <ul> <li>在不影响层级深度的情况下，使用LinearLayout而不是RelativeLayout。因为RelativeLayout会让子View调用2次onMeasure，LinearLayout 在有weight时，才会让子View调用2次onMeasure。Measure的耗时越长那么绘制效率就低。</li> <li>如果非要是嵌套，那么尽量避免RelativeLayout嵌套RelativeLayout，恶性循环。</li> </ul> <p>布局优化之-防止过度绘制</p> <p>以下部分图片内容引用来自 <a href="/misc/goto?guid=4959734060590535404" rel="nofollow,noindex">开源中国</a></p> <p>Android渲染机制</p> <p>用户在使用我们app过程中感知到的卡顿等性能问题的最主要根源都是因为渲染性能。从设计师的角度，他们希望App能够有更多的动画，图片等时尚元素来实现流畅的用 户体验。但是Android系统很有可能无法及时完成那些复杂的界面渲染操作。Android系统每隔16ms发出VSYNC信号，触发对UI进行渲染， 如果每次渲染都成功，这样就能够达到流畅的画面，这意味着程序的大多数操作都必须在16ms内完成。通俗的说：你只有16ms的时间来处理所有的任务。</p> <p>为什么是16ms？</p> <p>16ms是怎么计算出来的呢？就是1000/60hz，LCD手机屏一般都是60HZ，电脑屏幕亦是如此，即1秒钟时间内整个画面刷新60次，对于人眼而言60HZ已经达到很流畅的程度，1秒=1000ms，这样算下来每一帧都要在16ms内完成就很好解释了。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d33b6471cf46608bc3cd14f643f33f8a.png"></p> <p>图片来源：开源中国</p> <p>如果你的某个操作花费时间是24ms，系统在得到VSYNC信号的时候就无法进行正常渲染，这样就发生了丢帧现象。那么用户在32ms内看到的就会是同一帧画面。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/fbc3057eff745aadc3f40618ef385d98.png"></p> <p>图片来源：开源中国</p> <p>理解VSYNC(垂直同步)</p> <p>从Android 4.1开始，谷歌致力于解决Android系统中最饱受诟病的一个问题，滑动不如iOS流畅。因此谷歌在4.1版本引入了一个重大的改进—Project Butter，也就是黄油计划。</p> <p>Project Butter对Android Display系统进行了重构，引入了三个核心元素，即VSYNC、Triple Buffer和Choreographer。</p> <p>为了理解App是如何进行渲染的，我们必须了解手机硬件是如何工作，首先我们需要了解两个相关的概念：</p> <ul> <li>Refresh Rate：代表了屏幕在一秒内刷新屏幕的次数，这取决于硬件的固定参数，例如60Hz。</li> <li>Frame Rate：代表了GPU在一秒内绘制操作的帧数，例如30fps，60fps。<br> GPU会获取图形数据进行渲染，然后硬件负责把渲染后的内容呈现到屏幕上，他们两者不停的进行协作。<br> 不幸的是，刷新频率和帧率并不是总能够保持相同的节奏。如果发生帧率与刷新频率不一致的情况，就会容易出现Tearing的现象(画面上下两部分显示内容发生断裂，来自不同的两帧数据发生重叠)。<br> 通常来说，帧率超过刷新频率只是一种理想的状况，在超过60fps的情况下，GPU所产生的帧数据会因为等待VSYNC的刷新信息而被Hold住，这样能够保持每次刷新都有实际的新的数据可以显示。但是我们遇到更多的情况是帧率小于刷新频率。<br> 在这种情况下，某些帧显示的画面内容就会与上一帧的画面相同。糟糕的事情是，帧率从超过60fps突然掉到60fps以下，这样就会发生LAG，JANK，HITCHING等卡顿掉帧的不顺滑的情况。这也是用户感受不好的原因所在。</li> </ul> <p>用户容易在UI执行动画或者滑动ListView的时候感知到不流畅，是因为这里的操作相对复杂，容易发生丢帧的现象，从而感觉卡顿。有很多原 因可以导致丢帧，也许是因为你的layout太过复杂，无法在16ms内完成渲染，有可能是因为你的UI上有层叠太多的绘制单元，还有可能是因为动画执行 的次数过多。这些都会导致CPU或者GPU负载过重。</p> <p>怎样检测Overdraw(过度绘制)？</p> <p>我们可以使用手机设置里 面的开发者选项，打开Show GPU Overdraw等选项进行观察。</p> <p>设置 > 开发者选项 > 调试GPU过度绘制 > 显示GPU过度绘制区域</p> <p>打开以后可以切换到需要检测的程序，你可以发现屏幕上有很多色块，对于各个色块的解释，我们来看一张Overdraw的参考图：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/5f33e61b45cbb9f0410d56992ef6dc7a.png"></p> <p>图片来源：开源中国</p> <p>淡紫，淡绿，淡红，深红代表了4种不同程度的Overdraw情况，我们的目标就是尽量减少红色Overdraw，看到更多的淡紫色区域。</p> <p>嗯，那我们来看个实例：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/31fbe747e7bc9bf75f57fbf2a3a8ca9c.jpg"></p> <p>看到这个页面，基本上在深红色区块中，首先看下这个ListView的代码：</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ll_root" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/app_background" android:orientation="vertical"> <com.view.swipelistview.MySwipeMenuListView android:id="@+id/lv_courses" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="40dp" android:background="@color/app_background" android:divider="@drawable/course_list_divider" android:dividerHeight="@dimen/divider" android:footerDividersEnabled="false" android:headerDividersEnabled="false" android:listSelector="@android:color/transparent" /> </LinearLayout></code></pre> <p>去除了一些不相关代码，方便观看首先我们可以看到，顶层布局的已经设置了背景，ListView也设置了相同的背景，所以这里的背景就可以去掉了。</p> <p>再来看item的布局：</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8" ?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ll_layout" android:layout_width="match_parent" android:layout_height="wrap_content" xmlns:app="http://schemas.android.com/apk/res-auto" android:background="@drawable/list_item_bg" android:paddingLeft="@dimen/cf_official_layout_paddingleft" android:paddingRight="@dimen/cf_official_layout_paddingright"> </LinearLayout></code></pre> <p>这里的顶层布局的background是一个selector，代码如下:</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android> <item android:drawable="@color/white2" android:state_pressed="true" /> <item android:drawable="@color/white2" android:state_pressed="false"/> </selector></code></pre> <p>上面ListView的 android:listSelector="@android:color/transparent" ，所以这里的selector肯定也是多余的，顺便优化了其他的一些小地方，这里就不说了，修改了这几处，我们运行后再来看一下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/17072645dc6de4c4912f06ad6f7dfc06.jpg"></p> <p>是不是好一点了呢？还有可优化的余地，这里只是举例说明一下。</p> <p>总结：</p> <p>巧用这些技巧可以让我们写出更高效，更优雅的代码，具体的情景使用还是要看项目的具体情况，不能为了优化而优化。优化也是不断积累的过程，不要指望立竿见影。</p> <p> </p> <p>来自：http://www.jianshu.com/p/61604eeebee0</p> <p> </p>