15 Android布局优化(大结局)

15-1 推荐使用布局

5大布局:(常用布局使用量从低到高:)

  Absoulotelayout(绝对布局)——不常用

  Tablelayout(表格布局)——使用GridView代替

  Framelayout(帧布局)——布局叠加时使用

  Linearlayout(线性布局)——线性的、垂直的、水平的

  Relativelayout(相对布局)——最灵活的

 

15-2 布局优化之include 

布局原则

  1、尽量多使用LinearLayout(线性布局)和RelativeLayout(相对布局),不要使用AbsoluteLayout(绝对布局)

  2、在布局层次一样的情况下,建议使用LinearLayout代替RelativeLayout,因为LiearLayout性能要稍微高一点

  3、将可复用的组件抽取出来并通过include标签使用

  4、使用ViewStub标签来加载一些不常用的布局

  5、使用merge标签来减少布局的嵌套层次

 

<include/>的标签使用

  将可复用的组件抽取出来并通过include标签使用
  作用:将共用的组件抽取出来单独放到一个xml文件中,然后使用include标签导入共用布局
  效果:提高UI的制作和复用性效率,也能保证制作的UI布局更加规整和易维护

  layout中的公共试图可以提出来,然后使用include进行加载复用。不用去担心在activity中找不到公共试图的控件,像平常一样,只需要使用findviewbyid()这个方法就能得到。

例如:

common_title.xml

<?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="wrap_content" 
    android:background="#000"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    >
    <TextView
        android:id="@+id/ret"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="10dp"
        android:layout_centerVertical="true"
        android:textColor="#fff"
        android:textSize="14sp"
        android:text="返回" />
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="布局优化"
        android:textColor="#fff"
        android:textSize="18sp" />
    <TextView
        android:id="@+id/function"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:text="功能"
        android:textColor="#fff"
        android:textSize="14sp" />
</RelativeLayout>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <include layout="@layout/common_title" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="正文内容"
        android:textSize="18dp" />

</LinearLayout>

MainActivity.java

public class MainActivity extends Activity
{
    TextView title_tv;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        title_tv=(TextView)findViewById(R.id.title);
        title_tv.setText("自定义布局");
    }
}

 

15-3 布局优化之merge

使用merge合并UI布局
  作用:合并UI布局,使用该标签能降低UI布局的嵌套层次
  场景(1):布局根节点是FrameLayout且不需要设置background或padding等属性,可以用merge代替
  场景(2):某布局作为子布局被其他布局include时,使用merge当做该布局的顶节点,这样在被引入时顶节点会自动被忽略。

  比如一个linearLayout布局中包含了一个include引入了其他布局,则可以把linearLayout标签修改为merge,这样引入时会把根节点忽略掉,起到优化的作用

common_progress.xml

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

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="    请稍候" />

</LinearLayout>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <include layout="@layout/common_title" />

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="正文内容"
            android:textSize="18dp" />

        <include layout="@layout/common_progress" />
    </FrameLayout>

</LinearLayout>

优化:

common_progress.xml

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

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="    请稍候" />

</merge>

印证:场景(2):某布局作为子布局被其他布局include时,使用merge当做该布局的顶节点,这样在被引入时顶节点会自动被忽略。

 

15-4 布局优化之ViewStub

ViewStub惰性加载
  作用:和include一样可以用来引入一个外部布局,不同的是,viewStub引入的布局默认不会扩张,既不会占用显示也不会占用位置,从而在解析layout时节省CPU和内存

 

MainActivity.java

package com.example.andriod2_include;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewStub;
import android.widget.Button;

public class MainActivity extends Activity
{
    private Button button;
    private ViewStub stub;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button = (Button) findViewById(R.id.button1);
        stub = (ViewStub) findViewById(R.id.viewStub);
        button.setOnClickListener(new OnClickListener()
        {

            @Override
            public void onClick(View arg0)
            {
                // TODO Auto-generated method stub
                stub.inflate();
            }
        });
    }

}

common_text.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="隐藏内容" />

</LinearLayout>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <include layout="@layout/common_title" />

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="正文内容"
            android:textSize="18dp" />

        <include layout="@layout/common_progress" />
    </FrameLayout>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="显示隐藏文件" />

    <ViewStub
        android:id="@+id/viewStub"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:layout="@layout/common_text"/>

</LinearLayout>

  

 

--------------------------------------

Layout总结

1. include用法
  <include
    android:id="@+id/include1"
    layout="@layout/commn_title" />
  注意:
    (1)android:layout_centerVertical="true"可以调整中间位置
    (2)被include进来的布局组件可以通过findViewById()得到并使用

2. merge(见图)
  作用:合并UI布局,降低嵌套层次
  (1)被include进来的布局文件可以使用merge标签,这样被include进来的布局是叠加的。
    <FrameLayout
      <include layout="@layout/common_progress" />
    这个common_progress就可以使用merge标签
    <merge
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" 
      android:orientation="vertical" >
    <ProgressBar 
    <TextView
    </merge>
    加上merge后这两个组件ProgressBar和TextView会叠加在一起

3. ViewStub惰性加载
  作用:和include一样可以用来引入一个外部布局,不同的是,viewStub引入的布局默认不会扩张,既不会占用显示也不会占用位置,从而在解析layout时节省CPU和内存
  (1)用法:
    <ViewStub 
    android:layout="@layout/common_text" 

    //不能使用layout="",否则会    exception:viewstub must have a valid layoutresource
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/viewStub"
  (2)可以通过ViewStub类的inflate()方法使其显示出来。

 

posted @ 2016-03-27 11:57  沉默的羊癫疯  阅读(138)  评论(0编辑  收藏  举报