【Android】KotlinにおけるFragmentの基本と使い方について徹底解説

すだ

みなさま〜こんにちは！
メモリアインクのすだです！

本日は、
KotlinにおけるFragmentの基本的な考え方と使い方を
実際のコードを用いて一緒に学んでいきましょう！

この記事を読んでわかること…
・Fragmentとは？
・Fragmentの使い方

この記事は、「Activity」について理解していると よりスムーズに読み進められます。
Activityについては ぜひ以下の記事をご覧ください！↓

あわせて読みたい

【Android】KotlinにおけるActivityの使い方と、画面遷移（startActivity、finish）の方法について徹底解説 Androidアプリ開発大好きなみなさまー！作業は順調ですか？メモリアインクのすだです。本日は、KotlinにおけるActivityの基本的な考え方と使い方、さらにはActivity間の…

環境

• Kotlin (ver 1.9.0)
• Android Studio (Giraffe | 2022.3.1 Patch 3)

Fragmentとは？

Fragmentとは、簡単にいうとActivityの中で使える「部品（view）」です。

Activityの一部分として機能します。

例えば、「マイページ」「ログイン画面」「商品一覧画面」「注文画面」… のようにActivityが分かれている場合、

「マイページ」という区切りの中には
・プロフィール情報の編集画面
・過去の注文履歴画面
・設定の変更画面

「商品一覧画面」という区切りの中には
・ヘッダー部分
・新着商品一覧画面
・検索機能部分

などなど、1つの区切りの中にも細かく分けると様々な「部分」や「画面」があります。

全てをActivityとして区切るとリソースの消費が激しくなりますので
こういった場合には Fragmentを利用して UIや画面を部品化し、より扱いやすく軽量にします。

Fragmentを使用するメリット

① 再利用性があること

Fragmentは 1つ作ると「部品」としていろんな箇所で使う（呼び出す）ことができます。

Activityから呼び出せるのはもちろん、Fragmentから違うFragmentを呼び出すこともできますので
より自由に効率的に開発を行えるのがメリットの1つです！

②Activityを扱うより軽量であること

Fragmentを使用する場合、
新しいActivityを起動する場合と比較して、リソースの消費を大幅に抑えることが可能です。

これは、Fragmentが既存のActivity内（すでに開かれている画面内）で動作し、
新しい画面環境を別途作成する必要がないためです。

この特性から、
Activityは画面の大元を形成する「一つの大きな箱」としての役割にとどまり、
細かい画面の構築や共通部品の作成にはFragmentが使われることが多いです。

↑ たとえば、「マイページ」という区切りをActivityで作成した場合、
マイページの中に含める画面をFragmentで作成し
中ではFragmentが遷移される形をとる といった感じです。

Fragmentを使用するデメリット

Fragmentの使用が増えていくと、アプリの複雑性が高まって 処理の流れによっては混乱を招く元になります。

例えば、Fragmentが表示されるタイミングや隠れるタイミング、
データのロードや保存のタイミングなど、複数の処理を正しく管理することを考慮して構成する・実装していく必要があります。

また 1つのFragment内に大量のビュー（ボタンや入力ボックス、画像など）がある場合、
保持するデータや状態が多くなり、UIの応答時間が遅くなるなどの問題を引き起こすこともあります。

すだ

Activity同様、アプリ全体のパフォーマンスを考えながら
ActivityとFragmentの役割、Fragment同士の役割を明確に分けて管理すべきですね〜！

Fragmentの使い方

それでは、実際に ActivityにFragmentを埋め込んで表示してみましょう！

ファイル構成としては、こんな感じになります ↓

まず、部品であるFragmentから用意します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@color/blue" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment 1"
        android:textSize="50dp" />

</LinearLayout>

class FirstFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_first, container, false)
    }
}

上記は、Fragmentを表示する処理です。
分解して追っていきましょう。

Fragment()

Androidアプリを開発する上で 標準に備わっているクラス(= 設計図やテンプレートのようなもの)。
Fragmentを定義するときに使用します。

onCreateView

処理の流れ（= ライフサイクルとよばれる）の中の1つ。
レイアウトファイルを使ってビューを生成する働きを持ちます。

引数が3つ（LayoutInflater、ViewGroup、Bundle）ありますが、それぞれがFragmentのビューを作成する際に特定の役割を担っています。

inflater.inflate(…)

実際にFragmentの画面（UI）を作っているコードです。

 要するに、生成したビューを return（表示）する処理ということです。

次に、大枠であるActivityを用意します。

activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@color/pink">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Activity"
        android:textSize="50sp"/>

    <!-- ここにフラグメントを表示 -->
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment_first_container_view"
        android:layout_width="300dp"
        android:layout_height="500dp" />

</LinearLayout>

上記のように、Activityに付随するレイアウトファイル内の表示したい部分に、 Fragmentを埋め込みます。

FragmentContainerViewは、を表示するのに特化したviewです。
（Fragmentを埋め込める場所）

※ このviewを使って Fragment以外を表示することはできません。

MainActivity.xml 

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        if (savedInstanceState == null) {
            // フラグメントを追加
            supportFragmentManager.beginTransaction()
                .add(R.id.fragment_first_container_view, FirstFragment())
                .commit()
        }
    }
}

Activityに関しても、分解して追っていきます。

savedInstanceState

アクティビティの以前の状態を保存するために使用される器のようなもの。
画面の回転やアクティビティの再作成されるとき、savedInstanceStateには以前の状態が保存されます。

フラグメントを重複して追加しないように、
savedInstanceStateがnullの時のみ Fragmentの追加を行う処理が走るようにします。

supportFragmentManager.beginTransaction()

supportFragmentManagerは、アクティビティ内でフラグメントを操作するためのツール。beginTransaction()メソッドを呼び出すことで、フラグメントに対する一連の変更（追加、削除など）を行うためのトランザクション（= 一連の操作のまとまり）を開始します。

.add(R.id.fragment_first_container_view, FirstFragment())

実際に追加するフラグメントを「add」を用いて指定する。
第一引数は、フラグメントが配置されるビューのID。
第二引数は、追加するフラグメントのインスタンスです。

それでは、画面に表示させてみましょう！↓

Activityの中にFragmentを埋め込むことができました〜！

すだ

1つの大きなFragmentの中に、細かいパーツとしてさらにFragmentを埋め込むこともできます！

まとめ

おつかれさまでした！

Fragmentの基本的な考え方と使い方を理解することで、
より充実したAndroidアプリを作成することができますね！

すだ

技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
を通じて、
自分の市場価値をさらに向上させてみませんか？

ではまた次の記事でお会いしましょう〜！