Android性能优化—布局优化技巧

前面几篇文章在前面几篇文章当中，

我们学习了如何通过合理管理内存，app的优化启动的方式来提升应用程序的性能。实际上界面布局也会对应用程序的性能产生比较大的影响，如果布局写得嵌套多，重复布局多次出现，一个小的布局利用很多控件来实现的话，那么程序加载UI的速度就会非常慢，从而造成不好的用户体验。，如何通过优化布局来提供应用程序的性能？？？

本文通过示例，为大家讲解一下。

总体原则：少用，复用，减少嵌套！

减少布局层次，加快渲染速度

View的数量减少伴随着的就是层级的减少。从而达到结构清晰，渲染速度快的效果。
当线性布局LinearLayout和相对布局都能使用时，优先使用线性布局LinearLayout，因为RelativeLayout会让子View调用至少2次onMeasure，LinearLayout有weight时，才会让子多次调用onMeasure。Measure的耗时越长那么绘制效率就低。（下图可以看打印日志，代码是重写控件的onMeasure，在super（）下加句打印）
尽量避免RelativeLayout嵌套RelativeLayout

重用布局文件

是有些时候我们可能需要反复利用某个已经写好的布局，总是使用复制粘贴的方式来进行布局重用，这显然是一种很笨的做法。而Android当然也已经充分考虑到了布局重用的重要性，于是提供了< include >和< merge >这两个非常有用的标签，下面我们来学习一下。

重用< include >

新建一个hotanddown.xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

                android:layout_width="213dp"
                android:layout_height="284dp"
               >
    <TextView
        android:id="@+id/hotplayer_image"
        android:layout_width="match_parent"
        android:layout_height="110dp"
        android:background="@drawable/hotplayer"
        android:clickable="false"
        android:focusable="false"
        android:gravity="bottom|center_horizontal"
        android:paddingBottom="15dp"

        android:textColor="@color/colorWhite"
        android:textSize="24sp"/>

    <TextView
        android:id="@+id/hotplayer_ione"
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:layout_below="@+id/hotplayer_image"
        android:background="#1D4468"
        android:clickable="false"
        android:drawableLeft="@drawable/first"
        android:drawablePadding="10dp"
        android:maxLines="1"
        android:ellipsize="end"
        android:focusable="false"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:text="真正男子汉"
        android:textColor="@color/colorWhite"
        android:textSize="18sp"/>

    <ImageView
        android:id="@+id/conner_one"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/hotplayer_ione"
        android:clickable="false"
        android:focusable="false"
        android:src="@drawable/parting_line"/>

    <TextView
        android:id="@+id/hotplayer_itwo"
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:layout_below="@+id/conner_one"
        android:background="#1D4468"
        android:clickable="false"
        android:drawableLeft="@drawable/second"
        android:drawablePadding="10dp"
        android:focusable="false"
        android:maxLines="1"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:text="爸爸去哪儿"
        android:textColor="@color/colorWhite"
        android:textSize="18sp"/>

    <ImageView
        android:id="@+id/conner_two"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/hotplayer_itwo"
        android:clickable="false"
        android:focusable="false"
        android:src="@drawable/parting_line"/>

    <TextView
        android:id="@+id/hotplayer_ithree"
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:layout_below="@+id/conner_two"
        android:background="#1D4468"
        android:clickable="false"
        android:drawableLeft="@drawable/third"
        android:drawablePadding="10dp"
        android:focusable="false"
        android:maxLines="1"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:text="如果窝啦牛有爱情"
        android:textColor="@color/colorWhite"
        android:textSize="18sp"/>
</RelativeLayout>

Activity布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.shanlovana.rcimageview.Main2Activity">

   <include
       android:id="@+id/layoutone"
       layout="@layout/hotanddown"/>
    <!--如果我设置了id，那么就会代替了里面layout的父布局的id，必须先获得这个xml布局文件，
    再通过布局文件findViewById来获得其子控件
    那么如何给里面的控件设置图片文字呢？
    View layout = getLayoutInflater().inflate(R.layout.head, null);
    RelativeLayout head= (RelativeLayout)layout.findViewById(R.id.index_linear_foot);
    //设置背景图片
    head.setBackgroundResource(R.drawable.head);

    -->

</RelativeLayout>

< merge/>

< merge/>主要用来去除不必要的FrameLayout。它的使用最理想的情况就是你的根布局是FrameLayout，同时没有使用background等属性。这时可以直接替换。因为我们布局外层就是FrameLayout，直接“合并”。

下面的图片是对比include和merge的布局层数比对，可以看到merge去除不必要的最外层父布局。

TextView同时显示文字和图片

用TextView同时显示图片和文字
上面的例子基本全是，自己看喽。
当然EditView等也一样的，还有属性drawableBottom和drawableTop供你使用。同时利用代码setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)可以让我们动态去设置图片。

使用TextView的行间距和 \n

直接给布局文件和效果

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <TextView
        android:id="@+id/hotplayer_ione"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/hotplayer_image"
        android:background="#1D4468"
        android:clickable="false"
        android:drawableLeft="@drawable/first"
        android:drawablePadding="10dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:focusable="false"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:lineSpacingExtra="8dp"
        android:text="真正男子汉:wo \n汉字南郑振:ni \n得道者多助：还是我"
        android:textColor="@color/colorWhite"
        android:textSize="18sp"/>

</LinearLayout>

是不是能少用两个TextView和一个imageview？？？

其中：lineSpacingExtra属性代表的是行间距，他默认是0，是一个绝对高度值。同时还有lineSpacingMultiplier属性，它代表行间距倍数，默认为1.0f，是一个相对高度值。

使用Spannable或Html.fromHtml

如果实现上图红框中的效果，笨办法就是写三个TextView，“￥”，“价格”，“门市价”分别实现，其实用一个TextVIew就可以实现.

大概的写法就是这样

Spannable示例

    String text = String.format("￥%1$s  门市价:￥%2$s", 18.6, 22); 
    int z = text.lastIndexOf("门"); SpannableStringBuilder 
    style = new SpannableStringBuilder(text); 
    style.setSpan(new AbsoluteSizeSpan(DisplayUtil.dip2px(mContext,14)), 0, 1, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); 
    //字号
    style.setSpan(new ForegroundColorSpan(Color.parseColor("#afafaf")), z, text.length(), Spannable.SPAN_EXCLUSIVE_INCLUSIVE); 
    //颜色 
    style.setSpan(new AbsoluteSizeSpan(DisplayUtil.dip2px(mContext,14)), z, text.length(), Spannable.SPAN_EXCLUSIVE_INCLUSIVE); 
    //字号 
    tv.setText(style);

Html.fromHtml示例

实现代码：

public class Main2Activity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        TextView textView1 = (TextView) findViewById(R.id.werq);
        TextView textView2 = (TextView) findViewById(R.id.hjklfjh);
        LinearLayout activityMain2LinearLayout = (LinearLayout) findViewById(R.id.activity_main2);

        textView1.setText(Html.fromHtml("北京市发布霾黄色预警，<font color='#ff0000'><big><big>外出携带好</big></big></font>口罩"));

//设置字体大小为3级标题，设置字体为红色
        textView2.setText(Html.fromHtml("北京市发布霾黄色预警，<h3><font color='#ff0000'>外出携带好</font></h3>口罩"));


    }

}

总结：

//第一种方法：Spannable

//使用步骤：

SpannableString spannable = new SpannableString(str);
// SpannableStringBuilder spannable = new SpannableStringBuilder(str);
//创建各类Span
CharacterStyle span=new UnderlineSpan(); 
spannable.setSpan(span,start,end, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
//可以连续设置span
view.setText(spannable);

void android.text.SpannableString.setSpan(Object what, int start, int end, int flags)
//setSpan会将start到end这间的文本设置成创建的span格式。span可以是图片格式。

各类Span示例
new URLSpan("http://www.baidu.com")
new BackgroundColorSpan(Color.RED)
new ForegroundColorSpan(Color.YELLOW)
new StyleSpan(android.graphics.Typeface.BOLD_ITALIC)
new UnderlineSpan(); 
new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);

/*第二种方法：Html.fromHtml()
只显示带文本的html可以用下面的方法处理html文件。*/

public static Spanned fromHtml (String source)  
//显示带图片的html要用下面的方法处理html文件。

public static Spanned fromHtml (String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler)  

ImageGetter 为处理html中<img>的处理器，生成Drawable对象并返回。 

//创建ImageGetter 主要实现下面的方法，source为<img>标签中src属性的值。

public Drawable getDrawable(String source)

ViewStub仅在需要时才加载布局

ViewStub是一个轻量级的View，不占布局位置，占用资源非常小。

mainlayout.xml布局：

Mainactivity中的写法：

     ViewStub stub = (ViewStub) findViewById(R.id.main_contain);  
        stub.inflate();  
        ImageView image = (ImageView) findViewById(R.id.viewstub_img);  
        image.setImageResource(R.drawable.happy_running_dog);

线性布局自带的分割线

修改过后的hotanddown.xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

                android:layout_width="213dp"
                android:layout_height="284dp"
              android:divider="@drawable/parting_line"
              android:showDividers="middle"
              android:orientation="vertical"

               >
    <TextView
        android:id="@+id/hotplayer_image"
        android:layout_width="match_parent"
        android:layout_height="110dp"
        android:background="@drawable/hotplayer"
        android:clickable="false"
        android:focusable="false"
        android:gravity="bottom|center_horizontal"
        android:paddingBottom="15dp"

        android:textColor="@color/colorWhite"
        android:textSize="24sp"/>

    <TextView
        android:id="@+id/hotplayer_ione"
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:layout_below="@+id/hotplayer_image"
        android:background="#1D4468"
        android:clickable="false"
        android:drawableLeft="@drawable/first"
        android:drawablePadding="10dp"
        android:maxLines="1"
        android:ellipsize="end"
        android:focusable="false"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:text="真正男子汉"
        android:textColor="@color/colorWhite"
        android:textSize="18sp"/>

    <TextView
        android:id="@+id/hotplayer_itwo"
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:layout_below="@+id/conner_one"
        android:background="#1D4468"
        android:clickable="false"
        android:drawableLeft="@drawable/second"
        android:drawablePadding="10dp"
        android:focusable="false"
        android:maxLines="1"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:text="爸爸去哪儿"
        android:textColor="@color/colorWhite"
        android:textSize="18sp"/>


    <TextView
        android:id="@+id/hotplayer_ithree"
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:layout_below="@+id/conner_two"
        android:background="#1D4468"
        android:clickable="false"
        android:drawableLeft="@drawable/third"
        android:drawablePadding="10dp"
        android:focusable="false"
        android:maxLines="1"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:text="如果窝啦牛有爱情"
        android:textColor="@color/colorWhite"
        android:textSize="18sp"/>
</LinearLayout>

相比文章开篇的那个布局文件实现的效果相同，但是减少了三个ImageView，少用即加速。

Space控件

Space：空间的意思，表示该控件占据一定的空间，但是却不显示任何东西。

还是去优化原来的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="213dp"
                android:layout_height="284dp"
              android:orientation="vertical"
    >
    <TextView
        android:id="@+id/hotplayer_image"
        android:layout_width="match_parent"
        android:layout_height="110dp"
        android:background="@drawable/hotplayer"
        android:clickable="false"
        android:focusable="false"
        android:gravity="bottom|center_horizontal"
        android:paddingBottom="15dp"

        android:textColor="@color/colorWhite"
        android:textSize="24sp"/>
    <android.support.v4.widget.Space
        android:layout_width="match_parent"
        android:layout_height="1dp"/>

    <TextView
        android:id="@+id/hotplayer_ione"
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:layout_below="@+id/hotplayer_image"
        android:background="#1D4468"
        android:clickable="false"
        android:drawableLeft="@drawable/first"
        android:drawablePadding="10dp"
        android:maxLines="1"
        android:ellipsize="end"
        android:focusable="false"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:text="真正男子汉"
        android:textColor="@color/colorWhite"
        android:textSize="18sp"/>
    <android.support.v4.widget.Space
        android:layout_width="match_parent"
        android:layout_height="1dp"/>

    <TextView
        android:id="@+id/hotplayer_itwo"
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:layout_below="@+id/conner_one"
        android:background="#1D4468"
        android:clickable="false"
        android:drawableLeft="@drawable/second"
        android:drawablePadding="10dp"
        android:focusable="false"
        android:maxLines="1"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:text="爸爸去哪儿"
        android:textColor="@color/colorWhite"
        android:textSize="18sp"/>

    <android.support.v4.widget.Space
        android:layout_width="match_parent"
        android:layout_height="1dp"/>

    <TextView
        android:id="@+id/hotplayer_ithree"
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:layout_below="@+id/conner_two"
        android:background="#1D4468"
        android:clickable="false"
        android:drawableLeft="@drawable/third"
        android:drawablePadding="10dp"
        android:focusable="false"
        android:maxLines="1"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:text="如果窝啦牛有爱情"
        android:textColor="@color/colorWhite"
        android:textSize="18sp"/>

</LinearLayout>

效果图奉上：

总结：以上就是有关布局优化的一些技巧，具体的使用场景还要根据项目具体需求而定！不贴代码了，都是很简单的实现

最后编辑于：2017.12.07 06:31:16

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,902评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,037评论 2赞 377
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,978评论 0赞 332
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,867评论 1赞 272
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,763评论 5赞 360
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,104评论 1赞 277
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,565评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,236评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,379评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,313评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,363评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,034评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,637评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,719评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,952评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,371评论 2赞 346
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,948评论 2赞 341