Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@buno15(buno 15)

AndroidのViewGroupメモ

Posted at

AndroidのViewGroupについて

Android デベロッパーによると

レイアウトは、アクティビティなど、アプリ内のユーザー インターフェースの構造を定義します。レイアウトの要素はすべて、View オブジェクトと ViewGroup オブジェクトの階層を使用して作成されます。

View オブジェクトは、通常「ウィジェット」と呼ばれ、Button や TextView など、多くのサブクラスのいずれかになります。ViewGroup オブジェクトは、通常「レイアウト」と呼ばれ、LinearLayout や ConstraintLayout など、さまざまなレイアウト構造を提供する多くのタイプのいずれかになります。

主なViewGroupの種類として以下のようなものがある。

  • LinearLayout
  • RelativeLayout
  • ConstraintLayout
  • GridLayout
  • FrameLayout
  • TableLayout
  • ScrollView
  • HorizontalScrollView
  • ListView
  • RecyclerView
  • etc

ここでは以下のLayoutに限定して記述する。

  • LinearLayout
  • RelativeLayout
  • ConstraintLayout
  • GridLayout
  • FrameLayout
  • TableLayout

環境

Android Studioで用意されている [File] > [New] > [New Project] > [Basic Project] を使用した。
デフォルトで実装されている MainActivity/FirstFragment で検証した。

LinearLayout

要素を水平または垂直に並べることができる。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".FirstFragment">

    <TextView
        android:id="@+id/textview_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/hello_first_fragment" />

    <EditText
        android:id="@+id/edittext_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:hint="@string/hello_first_fragment" />

    <Button
        android:id="@+id/button_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/next" />
</LinearLayout>

ll.png

RelativeLayout

要素を相対的に配置できる。

<?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"
    tools:context=".FirstFragment">

    <TextView
        android:id="@+id/textview_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:text="@string/hello_first_fragment" />

    <EditText
        android:id="@+id/edittext_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textview_first"
        android:layout_centerInParent="true"
        android:hint="@string/hello_first_fragment" />

    <Button
        android:id="@+id/button_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/edittext_first"
        android:layout_centerInParent="true"
        android:text="@string/next" />
</RelativeLayout>

rl.png

ConstraintLayout

この記事によると、従来のLinearLayoutやRelativeLayoutはネストした階層構造になりやすく、パフォーマンス低下の原因になる。一方、ConstraintLayoutは階層を完全にフラットにできる。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".FirstFragment">

    <TextView
        android:id="@+id/textview_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_first_fragment"
        app:layout_constraintBottom_toTopOf="@id/edittext_first"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/edittext_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_first_fragment"
        app:layout_constraintBottom_toTopOf="@id/button_first"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/next"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_first" />
</androidx.constraintlayout.widget.ConstraintLayout>

cl.png

GridLayout

ViewやViewGroupを格子状に並べるときに使用するレイアウト。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="2"
    android:rowCount="2"
    tools:context=".FirstFragment">

    <TextView
        android:id="@+id/textview_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="0"
        android:text="@string/hello_first_fragment" />

    <EditText
        android:id="@+id/edittext_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="1"
        android:text="@string/hello_first_fragment" />

    <Button
        android:id="@+id/button_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="0"
        android:text="ok" />

    <Button
        android:id="@+id/button_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="1"
        android:text="no" />

</GridLayout>

gl.png

FrameLayout

画面上に表示する要素を一つだけ配置することができる。親要素の中に複数のViewを配置して、表示を切り替えたりできる。View同士が重なり合うことによって、タップイベントなどが正しく処理されない場合がある。

<?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=".FirstFragment">

    <TextView
        android:id="@+id/textview_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_first_fragment" />

    <Button
        android:id="@+id/button_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ok" />

</FrameLayout>

fl.png

TableLayout

ViewやViewGroupを格子状に並べるときに使用するレイアウト。TableLayoutは、列と行の数が固定されており、View同士が重なることはできない。

<?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="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".FirstFragment">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_first_fragment" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ok" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ok" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_first_fragment" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ok" />
    </TableRow>
</TableLayout>

tl.png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?