[訳]Android UIの最適化

23701 ワード

UI。 and roid 最適化ラyout include merge

黒猫でも白猫でも、ネズミを捕まえるのはいい猫だという古い言葉がある.これはいくつかの面で理にかなっているかもしれないが、私たちが精進を追求する思想には逆行しており、往々にして一つの結果に満足しているため、より最適化された処理方法を探求することを放棄している.
アプリケーションやゲームの結果に注目すると、メモリ最適化、スレッド最適化、Media最適化、UI最適化など、最適化の問題を無視しがちです.異なるモジュールには一般的な問題に対処するためのより巧みな方法があるので、1つの動作を実現するたびに、現在の作業により効率的な解決策があるかどうかを考えるのに少し時間がかかります.
今回はよく使われるUI Layoutの最適化についてお話ししますが、この例はandroid developing blogに転載されています.
AndroidではLinearLayoutがUIのフレームワークを表すのが最もよく使われており、最も直感的で便利な方法でもあります.例えば、Itemの基本コンテンツを表示するUIを作成します.図に示すように、
線のブロック図:
LinearLayoutを通じて、このUIの配列を迅速に実現することができます.

?
View Code XML

<LinearLayout
 xmlns:


    android
="http://schemas.android.com/apk/res/android"



    android:layout_width
="fill_parent"



    android:layout_height
="?android:attr/listPreferredItemHeight"



 

    android:padding
="6dip"
>



 

    <ImageView



        android:id
="@+id/icon"



        android:layout_width
="wrap_content"



        android:layout_height
="fill_parent"



        android:layout_marginRight
="6dip"



 

        android:src
="@drawable/icon"
 />



 

    <LinearLayout



        android:orientation
="vertical"



        android:layout_width
="0dip"



        android:layout_weight
="1"



        android:layout_height
="fill_parent"
>



 

        <TextView



            android:layout_width
="fill_parent"



            android:layout_height
="0dip"



            android:layout_weight
="1"



 

            android:gravity
="center_vertical"



            android:text
="My Application"
 />



 

        <TextView
  


            android:layout_width
="fill_parent"



            android:layout_height
="0dip"



            android:layout_weight
="1"
 


 

            android:singleLine
="true"



            android:ellipsize
="marquee"



            android:text
="Simple application that shows how to use RelativeLayout"
 />



 

    </LinearLayout> 



 

</LinearLayout>

Linearlayoutによって予想される結果を実現することができるが,ここでは特に大量のItemsに対して最適化の問題がある.RelativeLayoutとLinearLayoutを比較すると、リソースの利用において前者はより少ないリソースを占有して同じ効果を達成します.以下はRelativeLayoutで実現されるコードです.

?
View Code XML

<RelativeLayout
 xmlns:android
="http://schemas.android.com/apk/res/android"



    android:layout_width
="fill_parent"



    android:layout_height
="?android:attr/listPreferredItemHeight"



 

    android:padding
="6dip"
>



 

    <ImageView



        android:id
="@+id/icon"



 

        android:layout_width
="wrap_content"



        android:layout_height
="fill_parent"



 

        android:layout_alignParentTop
="true"



        android:layout_alignParentBottom
="true"



        android:layout_marginRight
="6dip"



 

        android:src
="@drawable/icon"
 />



 

    <TextView
  


        android:id
="@+id/secondLine"



 

        android:layout_width
="fill_parent"



        android:layout_height
="26dip"
 


 

        android:layout_toRightOf
="@id/icon"



        android:layout_alignParentBottom
="true"



        android:layout_alignParentRight
="true"



 

        android:singleLine
="true"



        android:ellipsize
="marquee"



        android:text
="Simple application that shows how to use RelativeLayout"
 />



 

    <TextView



        android:layout_width
="fill_parent"



        android:layout_height
="wrap_content"



 

        android:layout_toRightOf
="@id/icon"



        android:layout_alignParentRight
="true"



        android:layout_alignParentTop
="true"



        android:layout_above
="@id/secondLine"



        android:layout_alignWithParentIfMissing
="true"



 

        android:gravity
="center_vertical"



        android:text
="My Application"
 />



 

</RelativeLayout>

RelativeLayoutには、内部が複数のView間の関係によって決定されるフレームワークであるため、いずれかのViewがGONEを呼び出して完全に隠す必要がある場合、それに関連するViewに影響を与えることに注意する必要があります.Androidは、同じような問題を解決するための属性alignWithParentIfMissingを提供し、あるViewが関連するViewを見つけることができない場合、alignWithParentIfMissingの設定に基づいて親Viewに位置するかどうかを判断します.
下には、Hierarchy Viewerにおける2つの異なるlayoutの階層関係図があります.

単純または複雑な問題では、リソースの割り当てを最適化する方法を常に考慮する必要があります.たとえば、機能が簡単なアプリケーションでは、一般的なダイアログボックスや入力パネルが呼び出されます.これは、異なるアプリケーションに対して統一基準を設定するために統一された方法を採用する必要があります.
Android UIの最適化に直面する場合、リソースの多重化を引き続き考慮する必要があります.携帯電話の開発は、PC機の開発のように、役に立たないリソースを開発するのではなく、できるだけリソースを効率的に利用しなければならないという直感的な感覚を与えています.
Android Layout(XML)を定義する際には、4つの比較的特別なラベルが非常に重要であり、そのうち3つはリソース多重化に関連しており、それぞれ<viewStub/>、<requestFocus />、<merge /> and <include />。。である.

:このラベルは、UIが特別な場合に、直感的な効果をViewの非可視性を設定するのと同様にすることができるが、より大きな(R)意味は、このラベルに包まれたViewがデフォルトでメモリ領域を占有しないことである.viewStubはincludeを介して外部からViews要素をインポートします.

用法:android:layoutによって含まれる内容を指定します.デフォルトでは、ViewStubに含まれるラベルはvisibility=GONEです.viewStubはメソッドinflate()によってシステムの内部のViewsを呼び出す.

<ViewStub android:id="@+id/stub"

android:inflatedId="@+id/subTree"

android:layout="@layout/mySubTree"

android:layout_width="120dip"

android:layout_height="40dip" />

:次の記事で詳しく説明します.

:このラベルで外部のxmlを現在の構造に直接ロードでき、UIリソースを多重化する一般的なラベルです.

使用法:xmlファイルパスを多重化してincludeラベルのLayout属性を付与する必要があります.

<include android:id="@+id/cell1" layout="@layout/ar01" />

<include android:layout_width="fill_parent" layout="@layout/ar02" />

:ラベルは、画面内のフォーカスViewを指定するために使用されます.

使用法:ラベルをViewsラベル内部

<EditText id="@+id/text"

             android:layout_width="fill_parent"

             android:layout_height="wrap_content"

             android:layout_weight="0"

             android:paddingBottom="4">

       <requestFocus />

</EditText>

に配置する.
UI構造の最適化に重要な役割を果たすため、ラベルを単独で説明します.余分な階層や余分な階層を削減することで、Android Layout全体の構造を最適化することを目的としています.このラベルが実際に生じる役割を一例で理解することで、の使い方をより直感的に理解することができる.2つのViews要素を含む簡単なLayoutを作成します.ImageViewとTextViewのデフォルトでは、この2つの要素をFrameLayoutに配置します.メインビューに画像をフルスクリーンで表示した後、タイトルを画像に表示し、ビューの下に配置します.以下はxmlコード:

<
FrameLayout
 
xmlns:android
=
"http://schemas.android.com/apk/res/android"


    
android:layout_width
=
"fill_parent"


    
android:layout_height
=
"fill_parent"
>




    
<
ImageView


        
android:layout_width
=
"fill_parent"


        
android:layout_height
=
"fill_parent"
 



        
android:scaleType
=
"center"


        
android:src
=
"@drawable/golden_gate"
 
/>




    
<
TextView


        
android:layout_width
=
"wrap_content"


        
android:layout_height
=
"wrap_content"


        
android:layout_marginBottom
=
"20dip"


        
android:layout_gravity
=
"center_horizontal|bottom"




        
android:padding
=
"12dip"




        
android:background
=
"#AA000000"


        
android:textColor
=
"#ffffffff"




        
android:text
=
"Golden Gate"
 
/>





</
FrameLayout
>

アプリケーション上のLayout実行のビューです:tools>hierarchyviewerを起動します.batツールは現在のUI構造ビューを表示します.赤いワイヤフレームに含まれる構造に2つのframelayoutノードが現れていることが明らかになりました.この2つの完全な意味が同じノードがリソースの浪費をもたらしていることが明らかになりました(開発プロジェクトでhierarchyViewerを通じて現在のUIリソースの割り当てを習慣的に表示できることを注意してください).では、この問題を解決するにはどうすればいいのでしょうか(現在の例では、余分なframeLayoutノードをどのように削除しますか).このとき,ラベルを用いて類似の問題を処理する.上のxmlコードのframLayoutをmergeに置き換えます:

<
merge
 
xmlns:android
=
"http://schemas.android.com/apk/res/android"
>




    
<
ImageView


        
android:layout_width
=
"fill_parent"


        
android:layout_height
=
"fill_parent"
 



        
android:scaleType
=
"center"


        
android:src
=
"@drawable/golden_gate"
 
/>




    
<
TextView


        
android:layout_width
=
"wrap_content"


        
android:layout_height
=
"wrap_content"


        
android:layout_marginBottom
=
"20dip"


        
android:layout_gravity
=
"center_horizontal|bottom"




        
android:padding
=
"12dip"




        
android:background
=
"#AA000000"


        
android:textColor
=
"#ffffffff"




        
android:text
=
"Golden Gate"
 
/>





</
merge
>

プログラムを実行してEmulatorで表示する効果は同じですが、hierarchyviewerで表示するUI構造は変わり、当初は余分なFrameLayoutノードが統合されていましたが、あるいは、mergeラベルのサブセットをActivityのFrameLayoutとノードの下に直接追加すると理解できます(ここでは、すべてのActivityビューのルートノードがframeLayoutであることに注意してください).作成したLayoutがframLayoutをルートノードとして使用していない場合(LinerLayoutなどの定義rootラベルを適用している場合)、上記の例をmergeでUI構造を最適化することはできません.上記の例に加えて、megerは、IncludeまたはViewStubラベルを適用して外部からxml構造をインポートする場合、インポートされたxmlをルートノードとしてmergeで表すことができ、親構造に埋め込まれた後、冗長なノードが現れないように、その含まれるサブセットを親構造にうまく融合させることができる.また、2つの注意点があります.

はxml layoutのルートノードとしてのみ使用できます.

拡張が必要なxml layout自体がmergeをルートノードとする場合、インポートされたxml layoutをviewGroupに配置するとともにattachToRootをTrueに設定する必要がある.(詳細はinflate()ドキュメントを参照)

テキストアドレスhhttp://www.curious-creature.org/2009/03/01/android-layout-tricks-3-optimize-part-1/

Vueステップアップ:iframeはsrcを変更した後に対応するページ呼び出しバックグラウンドメソッドを2回呼び出す

Javaの1.8とJavaの間に導入されたプログラミング機能を簡単に見る