教材：「Androidアプリ開発パラダイムエッセンス」
（コードを少し変更してあり、完全な自作ではありませんが、他を転載するリンクがないため、転載を選択する方法はありません）

1.フレームレイアウト
2、LinearLayout
3.絶対レイアウト
4.相対レイアウト
- 栗：
5. テーブルのレイアウト
- 栗：
6. TabActivity と TabHost を使用してビューを整理する
- 栗：
- 栗の合体バージョン：
7. レイアウトのネスト
8、カスタムレイアウト

1.フレームレイアウト

フレームレイアウト / フレームレイアウト

すべてのコンポーネントはインターフェースの左上隅に固定されています。後者のコンポーネントは前者のコンポーネントをオーバーライドします。

2、LinearLayout

フローレイアウト/リニアレイアウト

android:orientation は、コンポーネントの特定の方向への配置を制御します。

3.絶対レイアウト

絶対レイアウト/座標レイアウト

これは、画面の左上隅の値 (0, 0) を基準とした X/Y 座標によって配置できます。

アンドロイド:レイアウト_x
アンドロイド:レイアウト_y

4.相対レイアウト

相対レイアウト

位置は、子要素または親要素を基準にして設定できます。

栗：

ここに画像の説明を挿入
コード：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffF4F4F4"
    android:padding="10px"
    tools:context=".MainActivity">

   <TextView
       android:id="@+id/tips"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="口令:"
       android:textSize="16sp"
       android:textColor="#ffff0000"
       />
   <EditText
      android:id="@+id/tipsEdit"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
      android:hint="请输入口令"
      android:textSize="16sp"
      android:textColor="#ff0000ff"
      android:layout_below="@+id/tips"/>
   <Button
      android:id="@+id/cancelButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
      android:hint="取消"
      android:textSize="16sp"
       android:layout_alignParentRight="true"
      android:layout_below="@+id/tipsEdit"
      />
   <Button
       android:id="@+id/okButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
      android:hint="确定"
      android:textSize="16sp"
      android:layout_alignTop="@+id/cancelButton"
      android:layout_marginLeft="150dp"
      />

</RelativeLayout>

5. テーブルのレイアウト

テーブルレイアウト

子要素を行または列に割り当てます。TableLayout には境界線がありません。TableLayout は複数の TableRow で構成されます。各 TableRow には 0 個以上のセルを含めることができます。

android:layout_span はセルの結合を実装しますが、行間の結合はサポートしていません。
android:layout_column は、コンポーネントが表示するセルの位置を指定するため、一部のセルがスキップされます。

栗：

インターフェース：
ここに画像の説明を挿入

コード：

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffF4F4F4"
    android:stretchColumns="1"
    tools:context=".MainActivity">

    <TableRow>
        <TextView
            android:text="TableLayout Example"
            android:padding="3dp"
            android:textColor="#978C8C"
            android:layout_span="3"
            android:layout_gravity="center"
            android:background="#FAD8CE"
            />
    </TableRow>
    <!--  间隔线  -->
    <View
        android:layout_height="2dip"
        android:textColor="#978C8C" />
    <TableRow>
        <TextView
            android:text="New"
            android:padding="3px"
            android:textColor="#978C8C"
            android:background="#FAD8CE"/>
        <TextView
            android:text="Alt+Shift+N"
            android:gravity="right"
            android:padding="3px"
            android:textColor="#978C8C"
            android:background="#FAD8CE"/>
    </TableRow>

    <TableRow>
        <TextView
            android:text="Open File..."
            android:padding="3px"
            android:textColor="#978C8C"
            android:background="#FAD8CE"/>
    </TableRow>
    <View
        android:layout_height="2dip"
        android:background="#FF909090" />
    <TableRow
        android:layout_width="match_parent">
        <TextView
            android:text="Close"
            android:padding="3px"
            android:textColor="#978C8C"
            android:background="#FAD8CE"/>
        <TextView
            android:text="Ctrl+W"
            android:gravity="right"
            android:padding="3px"
            android:textColor="#978C8C"
            android:background="#C4D6FB"/>
    </TableRow>

    <TableRow>
        <TextView
            android:text="Close"
            android:padding="3px"
            android:textColor="#978C8C"
            android:background="#FAD8CE"/>
        <TextView
            android:text="Ctrl+Shift+W"
            android:gravity="right"
            android:padding="3px"
            android:textColor="#978C8C"
            android:background="#C4D6FB"
            />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:textColor="#978C8C"/>

    <TableRow>
        <TextView
            android:text="Exit"
            android:padding="3px"
            android:textColor="#978C8C"
            android:background="#FAD8CE"/>
    </TableRow>
    <TableRow>
        <TextView
            android:text="END"
            android:padding="3px"
            android:gravity="center"
            android:layout_column="1"
            android:background="#FAD8CE"/>
    </TableRow>

</TableLayout>

注:
stretchColumns="1" は、tableLayout の 2 番目の列が拡張可能に設定されていることを意味します。列の数が画面全体をカバーしない場合、残りのスペースは 2 番目の列によって占有され、自動的に拡張可能になります。 fill_parent と同様に、画面を埋め尽くします。
android:stretchColums="*" は、各列が引き伸ばされることを意味します。これは、Linearlayout のlayout_weight="1" に似ています。

6. TabActivity と TabHost を使用してビューを整理する

TabHost は、タブをロードするためのコンテナです。各タブ項目はレイアウトをロードできます。TabActivity の getTabHost() メソッドを通じて TabHost オブジェクトを取得できます。TabHost は、タブページを追加および変更するためのメソッドを提供します。

栗：

最初のページ:
ここに画像の説明を挿入

「緑色」の Textview コンポーネントをクリックすると、ページは
ここに画像の説明を挿入
次のようになります。

コード:
xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- tab1的内容显示区域   -->
    <TextView
        android:id="@+id/view1"
        android:background="#FFB3B3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="红色区域"
        />
    <!-- tab2的内容显示区域   -->
    <TextView
        android:id="@+id/view2"
        android:background="#BEFFBE"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="绿色区域"
        />
    <!-- tab3的内容显示区域   -->
    <TextView
        android:id="@+id/view3"
        android:background="#A2E2FF"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="蓝色区域"
        />
</FrameLayout>

MainActivity.java:

public class MainActivity extends TabActivity {
    
    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        this.setTitle("TabActivity 和 TabHost"); //设置窗体的标题
        TabHost tabHost = this.getTabHost();//从TabActivity上获取TabHost容器
        //LayoutInflater 抽象类，用来实例化 XML布局文件生成对应的 View
        //LayoutInflater.from(this) 获取当前 TabActivity的 LayoutInflater对象
        LayoutInflater.from(this).inflate(R.layout.activity_main,tabHost.getTabContentView(),true);
        //setIndicator(CharSequence label, Drawable icon)在tab按钮上面添加文字和图标
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("红色",
                getResources().getDrawable(R.drawable.homemenu)).
                setContent(R.id.view1)); //setContent()设置View中显示的内容
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("绿色").setContent(R.id.view2));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("蓝色").setContent(R.id.view3));
    }

}

実機で実行すると、ナビゲーションバーがタブボタンの下に張り付いてしまうため、ナビゲーションバーを削除する必要があります。

上部のナビゲーションバーを削除します。
value/styles.xml を変更します。
ここに画像の説明を挿入

栗の合体バージョン：

別のタブをクリックして別のフォーム情報を表示する場合は、TabHost.TabSpec クラスで setContent(Intent インテント) メソッドを提供し、そのインテントをタブのコンテンツとして使用できます。

例えば、ここでは先ほど書いた相対レイアウトや表レイアウトのページを取り出して再利用することができます。ここでは、 activity_book2_table_layout.xml と activity_book2_relativelayout.xml という名前を付けました。

実行結果:
ここに画像の説明を挿入

MainActivity.java を変更します。

public class MainActivity extends TabActivity {
    
    
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        this.setTitle("TabActivity 和 TabHost"); //设置窗体的标题
        TabHost tabHost = this.getTabHost();//从TabActivity上获取TabHost容器
        //LayoutInflater 抽象类，用来实例化 XML布局文件生成对应的 View
        //LayoutInflater.from(this) 获取当前 TabActivity的 LayoutInflater对象
        LayoutInflater.from(this).inflate(R.layout.activity_main,tabHost.getTabContentView(),true);
        //setIndicator(CharSequence label, Drawable icon)在tab按钮上面添加文字和图标
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("相对布局示例",
                getResources().getDrawable(R.drawable.homemenu)).
                setContent(new Intent(this,Book2Relativelayout.class))); //setContent()设置View中显示的内容
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("表格布局示例").
                setContent(new Intent(this, Book2TableLayout.class)));
    }

}

7. レイアウトのネスト

最初に必要なレイアウトを設計してから、ネストする方法を検討できます。

8、カスタムレイアウト

LayoutParams クラスは、子ビューがどこに配置すべきかを親ビューに伝えるために使用されます。
異なる ViewGroup は異なる LayoutParams サブクラスを提供します。

終わり

【Android学習メモ】UIレイアウト

目次