Android性能優(yōu)化—布局優(yōu)化技巧

前面幾篇文章在前面幾篇文章當(dāng)中霹菊，

我們學(xué)習(xí)了如何通過合理管理內(nèi)存矮燎，app的優(yōu)化啟動的方式來提升應(yīng)用程序的性能。實際上界面布局也會對應(yīng)用程序的性能產(chǎn)生比較大的影響蚣常，如果布局寫得嵌套多，重復(fù)布局多次出現(xiàn)，一個小的布局利用很多控件來實現(xiàn)的話，那么程序加載UI的速度就會非常慢奋渔，從而造成不好的用戶體驗。壮啊，如何通過優(yōu)化布局來提供應(yīng)用程序的性能嫉鲸？？他巨？

本文通過示例，為大家講解一下减江。

總體原則：少用染突，復(fù)用，減少嵌套辈灼！

減少布局層次份企，加快渲染速度

View的數(shù)量減少伴隨著的就是層級的減少。從而達(dá)到結(jié)構(gòu)清晰巡莹，渲染速度快的效果司志。
當(dāng)線性布局LinearLayout和相對布局都能使用時，優(yōu)先使用線性布局LinearLayout降宅，因為RelativeLayout會讓子View調(diào)用至少2次onMeasure骂远，LinearLayout有weight時，才會讓子多次調(diào)用onMeasure腰根。Measure的耗時越長那么繪制效率就低激才。（下圖可以看打印日志，代碼是重寫控件的onMeasure，在super（）下加句打尤衬铡）
盡量避免RelativeLayout嵌套RelativeLayout

重用布局文件

是有些時候我們可能需要反復(fù)利用某個已經(jīng)寫好的布局劣挫，總是使用復(fù)制粘貼的方式來進行布局重用，這顯然是一種很笨的做法东帅。而Android當(dāng)然也已經(jīng)充分考慮到了布局重用的重要性压固，于是提供了< include >和< merge >這兩個非常有用的標(biāo)簽，下面我們來學(xué)習(xí)一下靠闭。

重用< 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"/>
    <!--如果我設(shè)置了id帐我，那么就會代替了里面layout的父布局的id，必須先獲得這個xml布局文件阎毅，
    再通過布局文件findViewById來獲得其子控件
    那么如何給里面的控件設(shè)置圖片文字呢焚刚？
    View layout = getLayoutInflater().inflate(R.layout.head, null);
    RelativeLayout head= (RelativeLayout)layout.findViewById(R.id.index_linear_foot);
    //設(shè)置背景圖片
    head.setBackgroundResource(R.drawable.head);

    -->

</RelativeLayout>

< merge/>

< merge/>主要用來去除不必要的FrameLayout。它的使用最理想的情況就是你的根布局是FrameLayout扇调，同時沒有使用background等屬性矿咕。這時可以直接替換。因為我們布局外層就是FrameLayout狼钮，直接“合并”碳柱。

下面的圖片是對比include和merge的布局層數(shù)比對，可以看到merge去除不必要的最外層父布局熬芜。

TextView同時顯示文字和圖片

用TextView同時顯示圖片和文字
上面的例子基本全是莲镣，自己看嘍。
當(dāng)然EditView等也一樣的涎拉，還有屬性drawableBottom和drawableTop供你使用瑞侮。同時利用代碼setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)可以讓我們動態(tài)去設(shè)置圖片。

使用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屬性代表的是行間距季俩，他默認(rèn)是0钮糖，是一個絕對高度值。同時還有l(wèi)ineSpacingMultiplier屬性酌住，它代表行間距倍數(shù)店归，默認(rèn)為1.0f，是一個相對高度值酪我。

使用Spannable或Html.fromHtml

如果實現(xiàn)上圖紅框中的效果消痛，笨辦法就是寫三個TextView，“￥”都哭，“價格”肄满，“門市價”分別實現(xiàn)谴古，其實用一個TextVIew就可以實現(xiàn).

大概的寫法就是這樣

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示例

實現(xiàn)代碼：

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("北京市發(fā)布霾黃色預(yù)警，<font color='#ff0000'><big><big>外出攜帶好</big></big></font>口罩"));

//設(shè)置字體大小為3級標(biāo)題稠歉，設(shè)置字體為紅色
        textView2.setText(Html.fromHtml("北京市發(fā)布霾黃色預(yù)警掰担，<h3><font color='#ff0000'>外出攜帶好</font></h3>口罩"));


    }

}

總結(jié)：

//第一種方法：Spannable

//使用步驟：

SpannableString spannable = new SpannableString(str);
// SpannableStringBuilder spannable = new SpannableStringBuilder(str);
//創(chuàng)建各類Span
CharacterStyle span=new UnderlineSpan(); 
spannable.setSpan(span,start,end, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
//可以連續(xù)設(shè)置span
view.setText(spannable);

void android.text.SpannableString.setSpan(Object what, int start, int end, int flags)
//setSpan會將start到end這間的文本設(shè)置成創(chuàng)建的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對象并返回勺疼。 

//創(chuàng)建ImageGetter 主要實現(xiàn)下面的方法，source為<img>標(biāo)簽中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>

相比文章開篇的那個布局文件實現(xiàn)的效果相同轨淌，但是減少了三個ImageView，少用即加速看尼。

Space控件

Space：空間的意思递鹉，表示該控件占據(jù)一定的空間，但是卻不顯示任何東西藏斩。

還是去優(yōu)化原來的代碼：

<?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>

效果圖奉上：

總結(jié)：以上就是有關(guān)布局優(yōu)化的一些技巧躏结，具體的使用場景還要根據(jù)項目具體需求而定！不貼代碼了狰域，都是很簡單的實現(xiàn)

最后編輯于：2017.12.07 06:31:16

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末媳拴，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子兆览，更是在濱河造成了極大的恐慌屈溉，老刑警劉巖，帶你破解...
沈念sama閱讀 211,817評論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件拓颓，死亡現(xiàn)場離奇詭異语婴，居然都是意外死亡描孟，警方通過查閱死者的電腦和手機驶睦，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,329評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來匿醒，“玉大人场航，你說我怎么就攤上這事×幔” “怎么了溉痢？”我有些...
開封第一講書人閱讀 157,354評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經(jīng)常有香客問我孩饼，道長髓削，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 56,498評論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任镀娶，我火速辦了婚禮立膛，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘梯码。我一直安慰自己宝泵，他們只是感情好，可當(dāng)我...
茶點故事閱讀 65,600評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布轩娶。她就那樣靜靜地躺著儿奶，像睡著了一般。火紅的嫁衣襯著肌膚如雪鳄抒。梳的紋絲不亂的頭發(fā)上闯捎，一...
開封第一講書人閱讀 49,829評論 1贊 290
城市分裂傳說
那天，我揣著相機與錄音嘁酿，去河邊找鬼隙券。笑死，一個胖子當(dāng)著我的面吹牛闹司，可吹牛的內(nèi)容都是我干的娱仔。我是一名探鬼主播，決...
沈念sama閱讀 38,979評論 3贊 408
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼游桩，長吁一口氣：“原來是場噩夢啊……” “哼牲迫！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起借卧，我...
開封第一講書人閱讀 37,722評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤盹憎，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后铐刘，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體陪每，經(jīng)...
沈念sama閱讀 44,189評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,519評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年镰吵，在試婚紗的時候發(fā)現(xiàn)自己被綠了檩禾。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,654評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡疤祭，死狀恐怖盼产，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情勺馆，我是刑警寧澤戏售，帶...
沈念sama閱讀 34,329評論 4贊 330
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布侨核，位于F島的核電站，受9級特大地震影響灌灾，放射性物質(zhì)發(fā)生泄漏搓译。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,940評論 3贊 313
男人毒藥：我在死后第九天來索命
文/蒙蒙一锋喜、第九天我趴在偏房一處隱蔽的房頂上張望侥衬。院中可真熱鬧，春花似錦跑芳、人聲如沸轴总。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,762評論 0贊 21
一樁弒父案博个，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽怀樟。三九已至，卻和暖如春盆佣，著一層夾襖步出監(jiān)牢的瞬間往堡，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,993評論 1贊 266
情欲美人皮
我被黑心中介騙來泰國打工共耍，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留虑灰，地道東北人。一個月前我還...
沈念sama閱讀 46,382評論 2贊 360
代替公主和親
正文我出身青樓痹兜，卻偏偏與公主長得像穆咐，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子字旭，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,543評論 2贊 349