Kotlinのフラグメントの使い方！画面分割の基本構造を初心者向けに解説

Kotlinのフラグメントの使い方！画面分割の基本構造

先生と生徒の会話形式で理解しよう

生徒

「Androidアプリで、画面を分けて表示したいときってどうすればいいんですか？」

先生

「そのときはフラグメントという機能を使うと便利ですよ。1つの画面の中に複数の部品を入れるようなイメージです。」

生徒

「フラグメントって、アクティビティとは違うんですか？」

先生

「アクティビティは画面全体、フラグメントはその中のパーツという感じですね。では、使い方を分かりやすく説明していきましょう！」

1. フラグメントとは？画面の部品としての役割

フラグメント（Fragment）は、Androidアプリで使える画面の部品のようなものです。たとえば、左側にメニュー、右側にコンテンツを表示したいときなどに便利です。アクティビティの中に埋め込んで使うことができます。

2. フラグメントの基本構造とは？

フラグメントを使うには、Kotlinでクラスを作成して、Fragmentクラスを継承します。さらに、どんなレイアウト（見た目）を表示するかをonCreateView関数で指定します。


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

このコードは「SampleFragment」という名前のフラグメントを作る例です。レイアウトにはfragment_sample.xmlというファイルを使います。

3. フラグメントのレイアウトファイルを作成しよう

フラグメント専用のレイアウトファイルを作ると、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">

    <TextView
        android:id="@+id/sampleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="フラグメントのサンプルです" />
</LinearLayout>

4. アクティビティにフラグメントを表示するには？

作ったフラグメントは、アクティビティの中に表示できます。まず、アクティビティ側のレイアウトに「ここにフラグメントを表示する場所」を作っておきます。


<FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

そして、アクティビティのKotlinコードで、次のようにフラグメントを表示します。


val fragment = SampleFragment()
supportFragmentManager.beginTransaction()
    .replace(R.id.fragment_container, fragment)
    .commit()

replaceは、「指定した場所にフラグメントを表示する」意味です。

5. フラグメントとアクティビティの違いを覚えよう

アクティビティとフラグメントの違いは以下の通りです：

アクティビティ：画面全体を表す。アプリの基本単位。
フラグメント：画面の一部。アクティビティの中に入れて使う。

たとえば、スマホ画面の上半分に地図、下半分にリストを表示したいとき、上下にフラグメントを配置すれば実現できます。

6. 実行結果のイメージ

実際にアプリを動かすと、以下のようにフラグメントが表示されます。


フラグメントのサンプルです

このように、フラグメントを使えば画面を自由に組み合わせることができます。

7. 複数のフラグメントを使って画面を切り替える方法

フラグメントは、1つだけでなく、複数を切り替えて使うこともできます。たとえば「設定画面」と「プロフィール画面」を切り替えたいとき、それぞれを別のフラグメントにして、必要に応じてreplace()で表示を切り替えます。

このようにすると、アプリ全体を切り替えずに、部品だけ変更できるため、軽量で効率的なアプリになります。

8. フラグメントのメリットとは？

KotlinのAndroid開発において、フラグメントを使うことには次のようなメリットがあります：

画面の再利用がしやすい
タブ切り替えなどのUIが作りやすい
画面を柔軟に構成できる

特にタブ付きの画面や、左右にスライドして切り替えるUIでは、フラグメントがよく使われます。

Kotlinを基礎からしっかり学びたい人や、 Java経験を活かしてモダンな言語にステップアップしたい人には、定番の入門書がこちらです。

基礎からわかるKotlinをAmazonで見る

※ Amazon広告リンク

まとめ

Kotlinのフラグメントは、Androidアプリを柔軟に構築するための重要な仕組みであり、複数の画面要素をひとつのアクティビティの中で組み合わせたいときにとても役立つ存在です。今回の記事で学んだ内容を振り返ると、フラグメントが持つ「画面の部品として再利用しやすい構造」や「アクティビティと連携しながら動作する仕組み」が、アプリ全体の設計をより明確にし、画面構築の自由度を大きく高めてくれることが分かります。フラグメントは単なる“パーツ”ではなく、独自のライフサイクルを持ち、XMLレイアウトとKotlinコードを組み合わせてひとつの役割を担うことができます。そのため、複数の画面切り替えやタブ構成、左右分割レイアウトなど、現代のAndroidアプリで求められるさまざまな画面設計に柔軟に対応できる点が大きな魅力です。

特に、フラグメントの基本構造を理解することは「画面の再利用」「パフォーマンスの最適化」「表示領域の切り替え」など多くの場面で役に立ちます。アクティビティが画面全体の管理者であり、フラグメントがそれを構成する部品として動く関係性は大変分かりやすく、アプリ全体の構造も自然と整理されていきます。また、画面切り替えの際にアクティビティを丸ごと変更する必要がなくなるため、アプリの動作が軽くなり、ユーザー体験も向上します。

さらに、レイアウトファイルとクラスファイルを分離して設計することで、UIの見た目と処理を明確に分けられるため、保守性や可読性が高まる点も大きなメリットです。フラグメントは再利用性が高く、ひとつ作っておくことで別の画面構成にも流用しやすいので、開発効率の面でも重宝されます。複数のフラグメントを切り替えて操作する設計も自然に行えるため、アプリの管理がしやすくなり、より複雑な画面構成にも挑戦しやすくなります。

フラグメント表示のサンプルコード


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

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

// アクティビティ側での切り替え例
val menuFragment = MenuFragment()
val contentFragment = ContentFragment()

supportFragmentManager.beginTransaction()
    .replace(R.id.left_container, menuFragment)
    .commit()

supportFragmentManager.beginTransaction()
    .replace(R.id.right_container, contentFragment)
    .commit()

このように、複数のフラグメントを用途に応じて配置することで、メニューとコンテンツの表示を分離し、メリハリのある画面構成を実現できます。スマホ・タブレット双方のレイアウトにも応用でき、画面サイズに合わせた柔軟なデザインが可能になります。フラグメントはAndroidアプリ開発をより豊かにする基礎であり、使いこなすことでアプリ全体のクオリティが大きく向上します。

先生と生徒の振り返り会話

生徒

「今日のフラグメントの内容、すごく分かりやすかったです。アクティビティより小さな部品として使えるので、画面を分割するときにすごく便利なんですね。」

先生

「そうですね。フラグメントは画面の一部を管理するための仕組みなので、複数の表示をひとつのアクティビティの中で切り替えたいときにとても効果的です。再利用もしやすいので、実際の開発でも重宝します。」

生徒

「レイアウトをXMLで作って、Kotlinでクラスを分ける方法も良いですよね。画面の見た目と処理が分かれていると、とても整理しやすいと思いました。」

先生

「その通りです。フラグメントをうまく使えるようになると、アプリの構造がきれいに整理されて、さまざまな画面にも応用できるようになりますよ。これからもいろいろ挑戦してみてくださいね。」

【未経験OK】Kotlinで始めるプログラミング入門｜ゼロから「動く喜び」を体験する60分

「プログラミングを始めたい」を形にする。最新言語Kotlinで楽しむ、ものづくりの第一歩。

本講座は、プログラミング経験が全くない方のためのエントリー講座です。「コードを書くってどういうこと？」という基本から、世界中で使われている最新言語Kotlin（コトリン）を使って、実際にプログラムを動かすまでを体験します。難しい理屈よりも、まずは「自分の手で動かす楽しさ」を最短距離で実感していただきます。