5つの主要なAndroidレイアウト：FrameLayout、LinearLayout、AbsoluteLayout、RelativeLayout、TableLayout

Five Major Android Layouts

Android SDKは、ユーザーデザインUIを容易にするためにさまざまなレイアウト方法を定義しています。各レイアウトメソッドはViewGroupクラスのサブクラスであり、構造を図1に示します。

AndroidSDKレイアウト構造図

図1AndroidSDKのレイアウト構造図

このセクションでは、FrameLayout（単一フレームレイアウト）、LinearLayout（線形レイアウト）、AbsoluteLayout（絶対レイアウト）、RelativeLayout（相対レイアウト）、およびTableLayout（テーブルレイアウト）について簡単に紹介します。

FrameLayout
フレームレイアウトは、シングルフレームレイアウトとも呼ばれ、Androidが提供するレイアウト方法の中で最も単純なレイアウト方法です。画面上の空白の領域を指定し、その領域の1つのオブジェクトを塗りつぶします。たとえば、写真、テキスト、ボタンなど。

アプリケーション開発者は、FrameLayoutに入力されたコンポーネントに特定の入力位置を指定することはできません。デフォルトでは、これらのコンポーネントは画面の左上隅に固定され、後で配置されるコンポーネントは前のコンポーネントに配置されてカバーおよび塗りつぶされ、パーツブロックまたはすべてをブロックします。

開発者は、コンポーネントのandroid：layout_gravity属性を使用して、コンポーネントの場所に適切な変更を加えることができます。

FrameLayoutDemoの例は、FrameLayoutのレイアウト効果を示しています。このレイアウトには4つのTextViewコンポーネントがあります。デフォルトでは、最初の3つのコンポーネントがレイアウトに配置されます。 4番目のコンポーネントは、重力プロパティを変更した後、レイアウトに配置されます。ランニング効果を図2に示します。

FrameLayoutDemoの例のレイアウトファイルmain.xmlのコードは次のとおりです。

FrameLayoutDemo First layer Second layer Third layer Fourth layer

その中で：
android：layout_width =“ wrap_content”
android：layout_height =“ wrap_content”

FrameLayoutレイアウトが画面スペース全体をカバーすることを示します。

例のFrameLayoutDemoのstrings.xmlファイルの内容は次のとおりです。

<?xml version='1.0' encoding='UTF-8'?> <resources> <string name='app_name'>LinearLayoutDemo</string> <string name='red'>red</string> <string name='yellow'>yellow</string> <string name='green'>green</string> <string name='blue'>blue</string> <string name='row1'>row one</string> <string name='row2'>row two</string> <string name='row3'>row three</string> <string name='row4'>row four</string> </resources>

実行後の結果から、FrameLayoutに配置された最初の3つのTextViewコンポーネントが、画面の左上隅を基点として重ね合わされていることがわかります。 android：layout_gravity =“ bottom”プロパティがあるため、4番目のTextViewがレイアウトの下に表示されます。 android：layout_gravity属性の値を他の属性に変更して、実行中の効果を確認できます。

LinearLayout
線形レイアウトとも呼ばれるLinearLayoutは、Androidビューデザインで最も頻繁に使用されるレイアウトである必要があります。このレイアウトでは、その中に配置されたコンポーネントを水平または垂直にきれいに配置できます。特定の配置はandroid：orientation属性によって指定され、レイアウト内の各コンポーネントの重みはweight属性によって設定されます。

LinearLayoutDemoの例は、LinearLayoutレイアウトの使用法を示しています。その効果を図3に示します。

例のLinearLayoutDemoのstrings.xmlファイルのコードは次のとおりです。

<?xml version='1.0' encoding='utf-8'?> <LinearLayout xmlns:android='http://schemas.android.com/apk/res/android' android:layout_width='fill_parent' android:layout_height='fill_parent' android:orientation='vertical'> <LinearLayout android:layout_width='fill_parent' android:layout_height='fill_parent' android:layout_weight='1' android:orientation='horizontal'> <TextView android:layout_width='wrap_content' android:layout_height='fill_parent' android:layout_gravity='center_horizontal' android:layout_weight='1' android:background='#aa0000' android:text='@string/red' /> <TextView android:layout_width='wrap_content' android:layout_height='fill_parent' android:layout_gravity='center_horizontal' android:layout_weight='1' android:background='#00aa00' android:text='@string/green' /> <TextView android:layout_width='wrap_content' android:layout_height='fill_parent' android:layout_gravity='center_horizontal' android:layout_weight='1' android:background='#0000aa' android:text='@string/blue' /> <TextView android:layout_width='wrap_content' android:layout_height='fill_parent' android:layout_gravity='center_horizontal' android:layout_weight='1' android:background='#aaaa00' android:text='@string/yellow' /> </LinearLayout> <LinearLayout android:layout_width='fill_parent' android:layout_height='fill_parent' android:layout_weight='1' android:orientation='vertical'> <TextView android:layout_width='fill_parent' android:layout_height='wrap_content' android:layout_weight='1' android:text='@string/row1' android:textSize='15pt' /> <TextView android:layout_width='fill_parent' android:layout_height='wrap_content' android:layout_weight='1' android:text='@string/row2' android:textSize='15pt' /> <TextView android:layout_width='fill_parent' android:layout_height='wrap_content' android:layout_weight='1' android:text='@string/row3' android:textSize='15pt' /> <TextView android:layout_width='fill_parent' android:layout_height='wrap_content' android:layout_weight='1' android:text='@string/row4' android:textSize='15pt' /> </LinearLayout> </LinearLayout>

例LinearLayoutDemoのレイアウトファイルmain.xmlは次のとおりです。

<?xml version='1.0' encoding='utf-8'?> <RelativeLayout xmlns:android='http://schemas.android.com/apk/res/android' android:layout_width='fill_parent' android:layout_height='fill_parent'> <TextView android:id='@+id/label' android:layout_width='fill_parent' android:layout_height='wrap_content' android:text='@string/hello' /> <EditText android:id='@+id/enter' android:layout_width='fill_parent' android:layout_height='wrap_content' android:layout_alignParentLeft='true' android:layout_below='@+id/label' /> <Button android:id='@+id/button1' android:layout_width='wrap_content' android:layout_height='wrap_content' android:layout_alignParentRight='true' android:layout_below='@+id/enter' android:text='@string/butltext' /> <Button android:id='@+id/ok' android:layout_width='wrap_content' android:layout_height='wrap_content' android:layout_alignBottom='@+id/button1' android:layout_alignParentLeft='true' android:text='@string/but2text' /> </RelativeLayout>

2つのLinearLayoutレイアウトオブジェクトがこのレイアウトに配置されます。

最初のLinearLayoutレイアウトは、android：orientation = 'horizo​​ntal'属性を使用して、レイアウトを水平線形配置に設定します。

2番目のLinearLayoutレイアウトは、android：orientation =“ vertical”属性を使用して、レイアウトを垂直線形配置に設定します。

各LinearLayoutレイアウトには4つのTextViewが配置されており、android：layout_weight属性を使用して、レイアウト内の各コンポーネントの比率を同じに設定します。つまり、各コンポーネントのサイズを同じにします。

layout_weightは、線形レイアウトのコンポーネントの重要性を定義するために使用されます。すべてのコンポーネントにはlayout_weight値があり、デフォルトは0です。これは、表示するのに必要なだけの画面スペースがあることを意味します。割り当て値が0より大きい場合、使用可能なスペースが分割され、分割のサイズは、現在のlayout_weight値と他のスペースのlayout_weight値の比率によって異なります。

たとえば、水平方向に2つのボタンがあり、各ボタンのlayout_weight値が1に設定されている場合、最初のボタンが1、2番目のボタンが2の場合、2つのボタンは幅を共有し、スペースを3分の1で割ることができます。最初のものにそれを与え、2番目のものに3分の2を与えます。

LinearLayoutDemoのLinearLayoutDemoの4番目のTextViewのandroid：layout_weightプロパティを2に割り当てると、実行中の効果が図4に示されます。

LinearLayoutはネストを使用できます。 LinearLayouレイアウトを使用すると、さまざまな美しいレイアウト方法を設計できます。
相対レイアウト
相対レイアウトは、相対レイアウトとも呼ばれます。名前からわかるように、このレイアウトは、コンポーネントをコンテナに対して、またはコンテナ内の別のコンポーネントに対して配置できるようにするレイアウトです。

RelativeLayoutレイアウトは、ビュー内のコンポーネントの相対位置を決定するために一般的に使用されるレイアウト設定プロパティをいくつか提供します。以下に、RelativeLayout関連のプロパティとそれらが表す意味を示します。

RelativeLayoutの共通属性

属性	説明
android：layout_above = '@ id / xxx'	指定されたIDコントロールの上にコントロールを配置します
android：layout_below = '@ id / xxx'	指定されたIDコントロールの下にコントロールを配置します
android：layout_toLeftOf = '@ id / xxx'	コントロールの右端を指定されたIDコントロールの左端に揃えます
android：layout_toRightOf = '@ id / xxx'	コントロールの左端を特定のIDコントロールの右端に揃えます
android：layout_alignBaseline = '@ id / xxx'	コントロールのベースラインを指定されたIDのベースラインに合わせます
android：layout_alignTop = '@ id / xxx'	コントロールの上端を特定のIDコントロールの上端に揃えます
android：layout_alignBottom = '@ id / xxx'	コントロールの下端を特定のIDコントロールの下端に揃えます
android：layout_alignLeft = '@ id / xxx'	コントロールの左端を指定されたIDコントロールの左端に揃えます
android：layout_alignRight = '@ id / xxx'	コントロールの右端を特定のIDコントロールの右端に揃えます
android：layout_alignParentLeft =“ true”	コントロールの左端を親コントロールの左端に揃えます
android：layout_alignParentTop =“ true”	コントロールの上端を親コントロールの上端に揃えます
android：layout_alignParentRight =“ true”	コントロールの右端を親コントロールの右端に揃えます
android：layout_alignParentBottom =“ true”	コントロールの下端を親コントロールの下端に揃えます
android：layout_centerInParent =“ true”	コントロールを親コントロールの中央に配置します
android：layout_centerHorizo​​ntal =“ true”	コントロールを水平方向に中央揃え
android：layout_centerVertical =“ true”	コントロールを垂直方向に中央揃え

例RelativeLayoutDemoは、相対レイアウトの使用法を示しており、その実行効果を図5に示します。

例RelativeLayoutDemoのレイアウトファイルmain.xmlは次のとおりです。

<?xml version='1.0' encoding='UTF-8'?> <resources> <string name='hello'>Hello World,TableLayout!</string> <string name='app_name'>TableLayoutDemo</string> <string name='column1'>First row first column</string> <string name='column2'>First row second column</string> <string name='column3'>First row third column</string> <string name='empty'>The leftmost scalable TextView</string> <string name='row2column2'>Second row third column</string> <string name='row2column3'>End</string> <string name='merger'>Merge three cells</string> </resources>

RelativeLayoutのレイアウトプロセスは次のとおりです。

1）IDラベル付きのTextViewコンポーネントを配置します。

2）android：layout_below = '@ + id / label'属性を介してTextViewの下に入力されたIDを持つコンポーネントEditTextを配置します。

3）ID button1のボタンをレイアウトに追加し、android：layout_below = '@ + id / enter'属性を介してEnterの下にボタンを配置し、android：layout_alignParentRight = 'true'を介して相対レイアウトにボタンを配置します。属性右側。

4）okという名前のボタンを相対レイアウトに追加し、android：layout_alignBottom = '@ + id / button1'属性を使用してボタンの下端をbutton1に揃え、android：layout_alignParentLeft = 'を使用してボタンを下に配置します。 true '属性レイアウトの左側。

TableLayout
TableLayoutは、テーブルレイアウトとも呼ばれ、行と列のコンポーネントを管理します。

TableLayoutレイアウトには境界線がなく、複数のTableRowオブジェクトまたはその他のコンポーネントで構成できます。各TableRowは複数のセルで構成でき、各セルはビューです。 TableRowは幅layout_widthと高さlayout_heightを設定する必要はありません。幅はmatch_parentである必要があります。つまり、親コンテナは自動的に入力され、高さはwrap_contentである必要があります。これにより、コンテンツに応じて高さが変更されます。ただし、TableRowの他のコンポーネントの場合、幅と高さを設定できますが、wrap_contentまたはfill_parentである必要があります。

TableLayoutDemoの例は、TableLayoutを使用してUIを作成する方法を示しています。その効果を図6に示します。

例TableLayoutDemoのstrings.xmlのコードは次のとおりです。

<?xml version='1.0' encoding='utf-8'?> <TableLayout xmlns:android='http://schemas.android.com/apk/res/android' android:layout_width='fill_parent' android:layout_height='fill_parent'> <TableRow> <TextView android:text='@string/column1' /> <TextView android:text='@string/column2' /> <TextView android:text='@string/column3' /> </TableRow> <TextView android:layout_height='wrap_content' android:background='#fff000' android:gravity='center' android:text='Single TextView' /> <TableRow> <Button android:layout_span='3' android:gravity='center_horizontal' android:text='@string/merger' android:textColor='#f00' /> </TableRow> <TextView android:layout_height='wrap_content' android:background='#fa05' android:text='Single TextView' /> <TableRow android:layout_height='wrap_content'> <TextView android:text='@string/empty' /> <Button android:text='@string/row2column2' /> <Button android:text='string/row2column3' /> </TableRow> </TableLayout>

例TableLayoutDemoのレイアウトファイルmain.xmlのコードは次のとおりです。

<?xml version='1.0' encoding='utf-8'?> <AbsoluteLayout xmlns:android='http://schemas.android.com/apk/res/android' android:layout_width='match_parent' android:layout_height='match_parent' > <Button android:id='@+id/button1' android:layout_width='wrap_content' android:layout_height='wrap_content' android:layout_x='32px' android:layout_y='53px' android:text='Button' /> <Button android:id='@+id/button2' android:layout_width='wrap_content' android:layout_height='wrap_content' android:layout_x='146px' android:layout_y='53px' android:text='Button' /> <Button android:id='@+id/button3' android:layout_width='wrap_content' android:layout_height='wrap_content' android:layout_x='85px' android:layout_y='135px' android:text='Button' /> </AbsoluteLayout>

レイアウトファイルmain.xmlは、TableLayoutレイアウトに2つのTableRowsと2つのTextViewを追加し、図6に示す効果を形成します。実行中の効果から判断すると、1行目も5行目も完全に表示できません。

TableLayoutレイアウトは、次の特殊効果を実現できるいくつかの特殊プロパティを提供します。
android：shrinkColumns属性：この属性は、縮小可能な列を設定するために使用されます。折りたたみ可能な列の幅が広すぎてレイアウト内の他の列を表示できない場合、折りたたみ可能な列は垂直方向に伸び、それ自体が占めるスペースを圧縮して、他の列を完全に表示できるようにします。 android：shrinkColumns = '1'は、2番目の列が縮小可能な列として設定され、列の数が0から始まることを示します。
android：stretchColumns属性：この属性は、ストレッチ可能な列を設定するために使用されます。伸縮可能な柱は自動的に長さを伸ばし、利用可能なすべてのスペースを埋めます。 android：stretchColumns = '1'は、2番目の列がストレッチ可能な列として設定されていることを示します。
android：collapseColumns属性：この属性は、非表示の列を設定するために使用されます。 android：collapseColumns = '1'は、2番目の列を表示から非表示にすることを意味します。

属性android：shrinkColumns = '0'をタグに追加して、再度実行します。その効果を図7に示します。1行目と5行目が完全に表示されていることがわかります。

AbsoluteLayout
AbsoluteLayoutは、絶対レイアウトとも呼ばれます。このレイアウトに配置されたコンポーネントは、android：layout_xとandroid：layout_yの2つのプロパティを介して正確な座標値を指定し、それらを画面に表示する必要があります。

理論的には、AbsoluteLayoutレイアウトを使用して、柔軟性の高い任意のレイアウトデザインを完成させることができますが、実際のエンジニアリングアプリケーションでこのレイアウトを使用することはお勧めしません。このレイアウトを使用すると、各コンポーネントのサイズを正確に計算して計算量を増やす必要があるだけでなく、アプリケーションがさまざまな画面サイズの携帯電話で実行されたときにさまざまな効果が得られるためです。

例AbsoluteLayoutDemoは、AbsoluteLayoutレイアウトの使用法を示しています。その効果は、図8に示されています。

AbsoluteLayoutDemoレイアウトファイルのmain.xmlコードの例は次のとおりです。

<uses-permission android:name='android.permission.INTERNET' />

その中で：
android：layout_x =“ 85px”
android：layout_y = '135px'

これは、コンポーネントが画面の左上隅を座標原点として座標系の下に配置され、x値が85ピクセル、y値が135ピクセルであることを示しています。

これは、Androidシステムで一般的に使用されるサイズ単位の簡単な紹介です。
ピクセル：pxと略されます。画面上の物理ピクセルを表します。
ポイント：ポイント、略してpt。 1ptは1/72インチに相当し、印刷業界で一般的に使用されています。
拡大ピクセル：sp。主にフォント表示に使用されるAndroidは、デフォルトでフォントサイズの単位としてspを使用します。
密度に依存しないピクセル：dipまたはdpと略されます。このサイズは、160dpの画面を参照として使用し、画面を使用して実際の画面にマップします。さまざまな解像度の画面に対応するズーム効果があり、さまざまな解像度の画面に適用されます。 pxを使用する場合、320pxはHVGAの幅を占め、WVGAでは、画面の半分未満しか占有できません。それはあなたが望むものであってはなりません。
んー。
WebView
WebViewコンポーネントはAbsoluteLayoutのサブクラスであり、Webページを表示するために使用されます。 WebViewを使用すると、独自のWebブラウザを簡単に開発できます。ここでは、WebViewの基本的な使用法のみを紹介します。後で、Webアプリを学習するときにさらに説明します。

プロジェクトWebViewDemoを作成し、AndroidManifest.xmlファイルにインターネットアクセス許可を追加します。

<?xml version='1.0' encoding='utf-8'?> <LinearLayout xmlns:android='http://schemas.android.com/apk/res/android' android:layout_width='fill_parent' android:layout_height='fill_parent' android:orientation='vertical'> <WebView android:id='@+id/webView1' android:layout_width='match_parent' android:layout_height='match_parent'/> </LinearLayout>

WebViewコンポーネントをレイアウトファイルmain.xmlに追加します。 Main.xmlの内容は次のとおりです。

package introduction.android.webView import android.app.Activity import android.os.Bundle import android.webkit.WebView public class WebViewDemoActivity extends Activity { private WebView webView /** * Called when the acctivity is first crested. */ @Override public void onCreate(Bundle saveInstanceState) { super.onCreate(saveInstanceState) setContentView(R.layout.main) webView = (WebView) findViewById(R.id.webView1) webView.getSettings().setJavaScriptEnabled(true) webView.loadUrl('http://www.google.com') } }

WebViewDemoアクティビティファイルの例WebViewDemoActivity.javaコードは次のとおりです。

ランニング効果を図9に示します。