Android性能优化之-UI优化篇

mozeliang 4年前
   <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>