メインコンテンツまでスキップ

Kotlin Android – Fragment の例

Androidの Fragment は subactivity の一種です。1つの activity は複数の Fragment をホストすることができます。例えば、1つのメインページとサブページが必要な場合は、Fragmentsを考える必要があります。興味深いのは、Fragmentsは独自のライフサイクルを持っているので、activityにあまり頼らなくても、独立した作業方法を提供してくれることです。

このチュートリアルでは、Kotlin Androidをベースにした簡単なHow To例で、Fragmentsの使い方を説明します。

例 1: Kotlin Android - Activity に Fragment を表示する​

アクティビティ」にはボタンがあり、クリックすると「フラグメント」を表示します。以下は、作成されたデモ画像です。

Kotlin Android Fragment Example

ステップ 1: 依存関係​

このプロジェクトでは、サードパーティの依存関係は必要ありません。

ステップ2: レイアウトの設計​

フラグメント用のレイアウトと、メインのアクティビティ用のレイアウトの2つが必要です。

(a). fragment.xmlを作成します。

これは 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">

    <TextView
        android:id="@+id/txt_fragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="top|left"
        android:text="@string/str_fragment"
        android:textColor="#2a2a2a"
        android:layout_margin="10dp"
        android:padding="10dp"/>

</LinearLayout>

(b). activity_main.xml （アクティビティのメインとなるレイアウトです。

これはメインの activity のレイアウトです。ボタンと framelayout が含まれています。ユーザーがボタンをクリックすると、fragmentが初期化され、framelayoutの中にレンダリングされます。

<?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"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_show"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.9"
        android:text="@string/show"/>

    <FrameLayout
        android:id="@+id/fragment_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.1">

    </FrameLayout>
</LinearLayout>

ステップ 3: Fragment の作成​

3つ目のステップは、実際の Fragment を作成し、そのレイアウトを膨らませることです。フラグメントは、androidx.fragment.app.Fragmentクラスを拡張して作成します。フラグメントは onCreateView()をオーバーライドすることで作成され、フラグメント` のレイアウトから作成されたビューオブジェクトを返します。

以下がそのコードです。

Fragment_one.kt。


import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.fragment.app.Fragment
import kotlinx.android.synthetic.main.fragment.*

class Fragment_one : Fragment() {

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

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        txt_fragment.setOnClickListener {
            Toast.makeText(activity,"text fragment",Toast.LENGTH_SHORT).show()
        }

    }

}

ステップ 4: MainActivity の作成​

これは、フラグメントをホストするアクティビティです。フラグメント」は単独では存在せず、「アクティビティ」によってホストされます。1つの activity が複数の fragment をホストすることができます。

フラグメントを activity の中に表示するには、Fragment Transaction と呼ばれるものを実行する必要があります。このようなトランザクションには、fragmentの追加、fragmentの削除、fragmentの置き換えなどがあります。今回の例では、framelayoutをfragment`で置き換えることに興味があります。そのためのコードは次のとおりです。


    fun showFragment(fragment: Fragment_one){
        val fram = supportFragmentManager.beginTransaction()
        fram.replace(R.id.fragment_main,fragment)
        fram.commit()
    }

以下は、この activity の完全なコードです。

MainActivity.kt。

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        btn_show.setOnClickListener {

            val fragment = arb.test.fragment.Fragment_one()
            showFragment(fragment)

        }

    }

    fun showFragment(fragment: Fragment_one){
        val fram = supportFragmentManager.beginTransaction()
        fram.replace(R.id.fragment_main,fragment)
        fram.commit()
    }
}

実行​

プロジェクトを実行してみましょう。

参考にしてください。​

以下のコードをダウンロードしてください。

---