performance - Android カスタムビューのレンダリングが遅い

Question

ホームアクティビティのビューページャー内にある 2 カード X 3 カードグリッド (行 x 列) に配置された 6 つの「情報カード」を表示しようとしている Android アプリを作成しています。アクティビティが開始されると、グリッドに配置された 6 枚のカードが表示されます。スワイプモーションを使用すると、元の 6 枚のカードが画面から滑り落ち、別の 6 枚のカードが画面上にスライドします。

//カードの詳細カード自体は、各カードに同じ情報フィールドがあるという意味で一種のフォームに似ていますが、各カードは各フィールドに異なる情報を持っています (たとえば、カードの名前を表示する各カードの textView があります)。ただし、各カードには異なる名前がテキストビューに表示されます)。これを実現するために、カードの XML レイアウトを拡張し、各 textView、imageView などに各カードに固有の情報を設定するカードクラスを作成しました。このビューはフラグメントのビューとして追加されるため、画面に表示される各カードは実際にはフラグメントであり、ビューページャーの内部にあるフラグメントでもある 2 X 3 グリッドに表示されます。したがって、ViewPager のページとして使用される別のグリッドフラグメントに配置されるカードフラグメントがあります。また、カードはフリップ可能なので、表と裏があります。単一のレイアウトファイルを使用して、カードの表面と裏面を作成しています。カードの表と裏のどちらかを表示したい場合、表レイアウトと裏レイアウトを選択的に表示/非表示にします。

//問題私の問題は、アプリの起動時に、カードがレンダリングされるのを待つ間、(Galaxy Tab 10.1 と Nexus 7 を使用して) 6 ～ 10 秒の遅延があることです。すべてのカードデータはローカルにあるため、Web サービスからデータが返されるのを待っているわけではありません。データは確実に手元にあり、すぐに使用できます。ラグタイムはおそらく、多くのレイアウトとウィジェットで構成されるこれらのカードをレンダリングする必要があるという事実によるものだと思います。また、実行時にレンダリングする必要があるカードの数がわからないため、常にカードフラグメントのインスタンスをプログラムで作成しています。

//私が調査したことカードをフラグメントとして作成しているため、私が試みた 1 つのことは、カードフラグメントをより単純なレイアウトを持つ別のフラグメントに置き換えることです。よりシンプルなレイアウトのフラグメントを使用すると、レンダリング速度が許容レベルまで向上することがわかりました。

//私の質問カードで画面をレンダリングするのにかかる時間を短縮するために何をしようとしているのか本当にわからないところです。カードの XML レイアウトをできるだけ単純にしようとしていますが、ある時点で、カードのデザインを損なうことなく単純化することはできません。私が目にしているパフォーマンスの低下を見ずに、多くのウィジェットでレイアウトをレンダリングする方法についての提案を探しています。複雑なレイアウトをレンダリングするためのヒントやコツはありますか? カードを完全にプログラムで (XML レイアウトなしで) 定義することはできますか? 明らかなエラーはありますか?

どんな助けでも大歓迎です。ありがとう！

// カードの 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"
    >

    <RelativeLayout
        android:layout_width="257dp"
        android:layout_height="343dp"
        android:id="@+id/cardContainerRL"
        android:layout_centerInParent="true">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/cardFrontRL">

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                >

                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:id="@+id/frontUpperRL"
                    android:layout_weight="1"
                    android:focusable="false"
                    android:background="@drawable/card_top_note">

                    <RelativeLayout
                        android:layout_width="fill_parent"
                        android:layout_height="50dp"
                        android:id="@+id/frontHeader">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Waiting to be completed"
                            android:id="@+id/frontStatusTV"
                            android:layout_alignParentTop="false"
                            android:singleLine="false"
                            android:layout_centerInParent="true"
                            android:textSize="12dp"/>

                        <ImageView
                            android:layout_width="20dp"
                            android:layout_height="20dp"
                            android:id="@+id/frontStarIV"
                            android:src="@drawable/cool_star"
                            android:adjustViewBounds="true"
                            android:layout_toLeftOf="@+id/frontStatusTV"
                            android:layout_centerVertical="true"
                            android:longClickable="true"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="1"
                            android:id="@+id/numMessagesTV"
                            android:layout_alignParentTop="true"
                            android:layout_alignParentRight="true"
                            android:layout_marginRight="2dp"/>
                    </RelativeLayout>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Walk the Dogs Yo!"
                        android:id="@+id/frontTaskTV"
                        android:layout_below="@+id/frontHeader"
                        android:layout_marginTop="5dp"
                        android:layout_centerHorizontal="true"
                        android:textSize="22dp"/>

                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:id="@+id/frontLowerRL"
                    android:layout_weight="1"
                    android:focusableInTouchMode="true"
                    >

                    <RelativeLayout
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:id="@+id/imageClip"
                        android:background="@drawable/card_bottom">
                    </RelativeLayout>

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/cardImageIV"
                        android:layout_marginLeft="4dp"
                        android:layout_marginRight="4dp"
                        android:layout_marginBottom="4dp"
                        android:src="@drawable/bulldog"
                        android:adjustViewBounds="true"
                        android:scaleType="fitXY"/>
                </RelativeLayout>

            </LinearLayout>

            <TextView
                android:layout_width="77dp"
                android:layout_height="77dp"
                android:text="666"
                android:id="@+id/cardPointsTV"
                android:layout_centerInParent="true"
                android:singleLine="true"
                android:background="@drawable/points_circle"
                android:gravity="center_vertical|center_horizontal"
                android:textSize="24dp"
                android:textStyle="bold"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Due on Sat. Nov 13"
                android:id="@+id/frontDateTV"
                android:layout_above="@+id/cardPointsTV"
                android:layout_centerHorizontal="true"
                android:textSize="15dp"/>
        </RelativeLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:id="@+id/cardBackLL">

            <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:id="@+id/backUpper"
                android:layout_weight=".65"
                android:background="@drawable/card_top">

                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="@dimen/back_header_height"
                    android:id="@+id/backHeader"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentRight="true">

                    <ImageView
                        android:layout_width="@dimen/back_star_width"
                        android:layout_height="@dimen/back_star_width"
                        android:id="@+id/backStarIV"
                        android:layout_alignParentTop="false"
                        android:layout_alignParentLeft="false"
                        android:src="@drawable/cool_star"
                        android:scaleType="fitXY"
                        android:layout_marginLeft="@dimen/back_star_margin_left"
                        android:layout_centerVertical="true"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="To be completed"
                        android:id="@+id/backStatusTV"
                        android:layout_centerVertical="true"
                        android:singleLine="false"
                        android:textSize="@dimen/back_status_font_size"
                        android:layout_marginLeft="@dimen/card_back_detail_text_margin_left"/>

                    <LinearLayout
                        android:orientation="vertical"
                        android:layout_width="wrap_content"
                        android:layout_height="fill_parent"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentTop="false"
                        android:layout_alignParentBottom="false"
                        android:layout_marginRight="@dimen/card_back_points_container_margin_right">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="fill_parent"
                            android:text="POINTS"
                            android:id="@+id/POINTS"
                            android:layout_alignParentRight="true"
                            android:textSize="@dimen/back_card_points_font_size"
                            android:layout_weight="1"
                            android:gravity="bottom"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="fill_parent"
                            android:text="666"
                            android:id="@+id/backPointsTV"
                            android:layout_alignParentRight="true"
                            android:textColor="@color/dark_gray"
                            android:layout_alignParentBottom="true"
                            android:textStyle="bold"
                            android:textSize="@dimen/back_card_point_value_font_size"
                            android:layout_weight="1"
                            android:gravity="top"/>
                    </LinearLayout>

                </RelativeLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Walk the Dogs Yo!"
                    android:id="@+id/backTaskTV"
                    android:layout_below="@+id/backHeader"
                    android:phoneNumber="true"
                    android:textSize="@dimen/card_back_taskname_font_size"
                    android:textIsSelectable="false"
                    android:layout_marginLeft="@dimen/card_back_detail_text_margin_left"
                    android:maxLines="2"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="DUE ON"
                    android:id="@+id/dueOnTV"
                    android:layout_alignLeft="@+id/backHeader"
                    android:layout_alignParentBottom="true"
                    android:textSize="12dp"
                    android:textIsSelectable="false"
                    android:layout_marginLeft="@dimen/card_back_detail_text_margin_left"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Sun. May 14"
                    android:id="@+id/backDateTV"
                    android:textSize="12dp"
                    android:textStyle="italic"
                    android:layout_toRightOf="@+id/dueOnTV"
                    android:layout_alignTop="@+id/dueOnTV"
                    android:layout_marginLeft="4dp"
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:id="@+id/backLower"
                android:layout_weight=".35"
                android:background="@drawable/card_bottom">

                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="49dp"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentRight="true"

                    <ImageView
                        android:layout_width="@dimen/back_button_width"
                        android:layout_height="@dimen/back_button_height"
                        android:id="@+id/backArrowIV"
                        android:layout_alignParentLeft="true"
                        android:src="@drawable/btn_back"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="@dimen/arrow_button_margin_right"
                        android:scaleType="fitXY"/>

                    <view
                        android:layout_width="@dimen/back_buttons_width"
                        android:layout_height="@dimen/back_buttons_height"
                        class="com.android.ui.widgets.ActionButton"
                        android:id="@+id/editButton"
                        android:layout_centerVertical="true"
                        android:layout_alignParentRight="true"
                        android:layout_marginRight="@dimen/send_button_margin_right"/>

                    <view
                        android:layout_width="@dimen/back_buttons_width"
                        android:layout_height="@dimen/back_buttons_height"
                        class="com.android.ui.widgets.ActionButton"
                        android:id="@+id/sendMessageButton"
                        android:layout_centerVertical="true"
                        android:layout_toLeftOf="@+id/editButton"
                        android:layout_marginRight="@dimen/edit_button_margin_right"/>

                </RelativeLayout>
            </RelativeLayout>
        </LinearLayout>

    </RelativeLayout>

</RelativeLayout>

score 1 · Accepted Answer

気分を害することなく、レイアウトを確認する必要があります。これよりも 5 ～ 10 倍軽いレイアウトを使用して、はるかに複雑なビューを作成できます。あなたが持っている：

<RelativeLayout> <!-- DISPATCH MEASURE LAYOUT DRAW -->
    <RelativeLayout> <!-- DISPATCH MEASURE LAYOUT DRAW -->
       <RelativeLayout> <!-- DISPATCH MEASURE LAYOUT DRAW -->
            <LinearLayout> <!-- DISPATCH MEASURE LAYOUT DRAW -->
                <RelativeLayout> <!-- DISPATCH MEASURE LAYOUT DRAW -->
                    <RelativeLayout"> <!--DISPATCH MEASURE LAYOUT DRAW -->
                        <TextView/> <!-- MEASURE LAYOUT DRAW -->
                        <ImageView/> <!-- MEASURE LAYOUT DRAW -->
                        <TextView/> <!-- MEASURE LAYOUT DRAW -->
                    </RelativeLayout> 
                    <TextView/> <!-- MEASURE LAYOUT DRAW -->
                </RelativeLayout>
                <RelativeLayout> <!-- DISPATCH MEASURE LAYOUT DRAW -->
                    <RelativeLayout> <!--DISPATCH MEASURE LAYOUT DRAW -->
                    </RelativeLayout>
                    <ImageView/> <!-- MEASURE LAYOUT DRAW -->
                </RelativeLayout>
            </LinearLayout>
            <TextView/> <!-- MEASURE LAYOUT DRAW -->
            <TextView/> <!-- MEASURE LAYOUT DRAW -->
        </RelativeLayout>
        <LinearLayout> <!-- DISPATCH MEASURE LAYOUT DRAW -->
           <RelativeLayout> <!-- DISPATCH MEASURE LAYOUT DRAW -->
                <RelativeLayout> <!-- DISPATCH MEASURE LAYOUT DRAW-->
                    <ImageView/> <!-- MEASURE LAYOUT DRAW -->
                    <TextView/> <!-- MEASURE LAYOUT DRAW -->
                    <LinearLayout> <!-- DISPATCH MEASURE LAYOUT DRAW -->
                        <TextView/> <!-- MEASURE LAYOUT DRAW -->
                        <TextView/> <!-- MEASURE LAYOUT DRAW -->
                    </LinearLayout>
                </RelativeLayout>
                <TextView /> <!-- MEASURE LAYOUT DRAW -->
                <TextView /> <!-- MEASURE LAYOUT DRAW -->
                <TextView /> <!-- MEASURE LAYOUT DRAW -->
            </RelativeLayout>
            <RelativeLayout> <!-- DISPATCH MEASURE LAYOUT DRAW -->
               <RelativeLayout> <!-- DISPATCH MEASURE LAYOUT DRAW -->
                    <ImageView /> <!-- MEASURE LAYOUT DRAW -->
                    <view /> <!-- MEASURE LAYOUT DRAW -->
                    <view /> <!-- MEASURE LAYOUT DRAW -->
               </RelativeLayout>
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

小さなデバイスでは、このレイアウトの解析にも時間がかかります。これは作成のみを目的としています。このようなビュー階層でタッチイベントをディスパッチすることは考えたくありません。

あなたが本当に軽いレイアウトを出すことができない場合。あなたはできる：

UI の最適化
Traceview と dmtracedump を使用したプロファイリング- 問題が階層ではないと本当に思っている場合は、これを信頼してください。
MyCardsView と MyCardView を作成して高品質のコードを記述し、アプリの動作を確認します:カスタムビューの作成

乾杯、サム。

出典: Google と Android 開発における長年の経験。

performance - Android カスタム ビューのレンダリングが遅い

1 に答える 1

Related

Reference

performance - Android カスタムビューのレンダリングが遅い