Android性能最適化のレイアウト最適化

8126 ワード

1、レイアウトの原則
1.1、RelativeLayoutとLineear Layoutを使用する
できるだけRelativeLayoutとLineear Layoutを多く使います.
レイアウトが同じであれば、RelativeLayoutの代わりにLinear Layoutを使用することをお勧めします.
構造レベルが複雑な時はRelativeLayoutを使用することを提案します.
1.2、includeラベルを使用する
レイアウトの共通部分を抽出し、includeラベルで参照する.
開発中、リターンボタン付きのナビゲーションバーなどの共用UIコンポーネントがあります.Xmlファイルごとにこのレイアウトを設定すると、一つは重複した作業量が多く、二つは変更があれば、それぞれのxmlファイルを修正しなければなりません.したがって、これらの共通のコンポーネントを抽出して単独で一つのxmlファイルに入れて、includeタグを使って共通のレイアウトに導入することができます.
次のレイアウトは、main.xmlにおいて、別のレイアウトtitlebar.xmlをincludeで導入する例である.
//titlebar.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="@drawable/mmtitle_bg_alpha" >
 
    <Button
        android:id="@+id/button"
        android:layout_width="75.0dip"
        android:layout_height="40dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="2dip"
        android:text="  " />
 
    <TextView
        android:id="@+id/text"
        android:textColor="#ffffff"
         android:layout_alignBaseline="@id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:gravity="center_vertical"
        android:text="@string/app_name"
        android:textSize="20dp" />
</RelativeLayout>
以上で共通レイアウトtitlebarを定義し、タイトルバーを導入する必要があるレイアウトmain.xmlにincludeを介してこの共通レイアウトを導入します.
//main.xml
 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
 
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
 
        <include layout="@layout/titlebar" />
    </RelativeLayout>
 
</FrameLayout>
1.3、View Stubタグを使用する
view stubタグはincludeタグと同じように外部レイアウトを導入することができますが、view stubが導入したレイアウトはデフォルトでは拡張されません.つまり、表示を占用することもないし、位置を占用することもないので、layoutを解析する時にcpuとメモリを節約します. 
View stubは、デフォルトでは表示されないようなレイアウトを導入しています.例えば、プログレスレイアウト、ネットワーク失敗表示の更新レイアウト、情報エラー発生のヒントレイアウトなどです.
errorを作成するレイアウトファイルは、ネットワークエラーのメッセージを表示します.
<?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" >
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@android:color/white"
        android:padding="10dip"
        android:text="Message"
        android:textColor="@android:color/black" />
 
</RelativeLayout>
メイン.xmlにViewStubのラベルを入れて上のレイアウトを紹介します.main.xmlファイルを修正すると以下の通りです.
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
 
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/hello_world" />
 
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
 
            <include layout="@layout/titlebar" />
        </RelativeLayout>
 
        <ViewStub
            android:id="@+id/error_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout="@layout/error" />
    </FrameLayout>
 
</merge>
javaコードの中で(View Stub)findView ById(id)を通じてView Stubを見つけて、stub.inflate()を通じてView Stubを展開して、サブViewを取得します.
private View errorView;

	private void showError() {
		// not repeated infalte
		if (errorView != null) {
			errorView.setVisibility(View.VISIBLE);
			return;
		}

		ViewStub stub = (ViewStub) findViewById(R.id.error_layout);
		errorView = stub.inflate();
	}

	private void showContent() {
		if (errorView != null) {
			errorView.setVisibility(View.GONE);
		}
	}
1.4、mergeラベルを使用する 
mergeタグの役割は、UIレイアウトを統合することであり、このラベルを使用するとUIレイアウトのネストレベルを低減することができる.mergeラベルは2つの典型的な状況に使用できます.
1)立地ルートの結点はFrame Layoutであり、backgroundやpaddingなどの属性を設定する必要がないので、代わりにmergeを使うことができます.Activityコンテンツレイアウトのparentのためです. viewはFrame Layoutですので、mergeで消してもいいです.これは上の図から見られます.
//main.xml
 
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
 
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/hello_world" />
 
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
 
            <include layout="@layout/titlebar" />
        </RelativeLayout>
    </FrameLayout>
 
</merge>
2)あるレイアウトは、サブレイアウトとして他のレイアウトincludeによって、mergeをそのレイアウトのトップノードとして使用すると、導入されると自動的にトップノードが無視され、そのサブノードをすべてメインレイアウトに統合する.
例えば、foot.xmlレイアウトファイルでは、本来はRelativeLayoutをmergeに変更します.
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_40"
        android:layout_above="@+id/text"/>
 
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_40"
        android:layout_alignParentBottom="true"
        android:text="@string/app_name" />
 
</merge>
その後、レイアウトmain.xmlでincludeタグを使用して、foot.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="match_parent" >
 
    <ListView
        android:id="@+id/simple_list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="@dimen/dp_80" />
 
    <include layout="@layout/foot.xml" />
 
</RelativeLayout>
このように、main.xmlファイルには、余分なRelativelayoutレイアウトがなく、直接にfootレイアウトのbuttonとtextviewをルートレイアウトに追加します.