天天看點
傳回

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

前面幾篇文章在前面幾篇文章當中，

Android 記憶體洩漏和OOM分析(一)

Android 記憶體洩漏和OOM分析(二)

Android app 啟動優化

我們學習了如何通過合理管理記憶體，app的優化啟動的方式來提升應用程式的性能。實際上界面布局也會對應用程式的性能産生比較大的影響，如果布局寫得嵌套多，重複布局多次出現，一個小的布局利用很多控件來實作的話，那麼程式加載UI的速度就會非常慢，進而造成不好的使用者體驗。，如何通過優化布局來提供應用程式的性能？？？

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

總體原則：少用，複用，減少嵌套！

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

  • View的數量減少伴随着的就是層級的減少。進而達到結構清晰，渲染速度快的效果。
  • 當線性布局LinearLayout和相對布局都能使用時，優先使用線性布局LinearLayout，因為RelativeLayout會讓子View調用至少2次onMeasure，LinearLayout有weight時，才會讓子多次調用onMeasure。Measure的耗時越長那麼繪制效率就低。（下圖可以看列印日志，代碼是重寫控件的onMeasure，在super（）下加句列印）
  • 盡量避免RelativeLayout嵌套RelativeLayout
Android性能優化—布局優化技巧
Android性能優化—布局優化技巧

重用布局檔案

是有些時候我們可能需要反複利用某個已經寫好的布局，總是使用複制粘貼的方式來進行布局重用，這顯然是一種很笨的做法。而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，直接“合并”。

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

下面的圖檔是對比include和merge的布局層數比對，可以看到merge去除不必要的最外層父布局。

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

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>
Android性能優化—布局優化技巧

是不是能少用兩個TextView和一個imageview？？？

其中：lineSpacingExtra屬性代表的是行間距，他預設是0，是一個絕對高度值。同時還有lineSpacingMultiplier屬性，它代表行間距倍數，預設為1.0f，是一個相對高度值。

使用Spannable或Html.fromHtml

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

如果實作上圖紅框中的效果，笨辦法就是寫三個TextView，“￥”，“價格”，“門市價”分别實作，其實用一個TextVIew就可以實作.

大概的寫法就是這樣

  • Spannable示例 
String text = String.format("￥%1$s  門市價:￥%2$s", , ); 
    int z = text.lastIndexOf("門"); SpannableStringBuilder 
    style = new SpannableStringBuilder(text); 
    style.setSpan(new AbsoluteSizeSpan(DisplayUtil.dip2px(mContext,)), , , 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,)), z, text.length(), Spannable.SPAN_EXCLUSIVE_INCLUSIVE); 
    //字号 
    tv.setText(style);
  • Html.fromHtml示例
Android性能優化—布局優化技巧

實作代碼：

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，不占布局位置，占用資源非常小。

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

mainlayout.xml布局：

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

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>

效果圖奉上：

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

總結：以上就是有關布局優化的一些技巧，具體的使用場景還要根據項目具體需求而定！不貼代碼了，都是很簡單的實作

app優化 android 性能優化 布局 優化
上一篇: Android優化程式性能的小技巧
下一篇: Android性能優化之提高ListView性能的技巧

繼續閱讀