建立專案

建立一個有 EmptyActivity 的專案，其名稱為 FragmentLab01，Minimun SDK為 API 21

處理相依性

這個例子並不需要新增任何的 Dependencies

建立第一個 Fragment，並加入 Activity

建立 FirstFragment

建立一個名為 FirstFragment 的 BlankFragment，修改其相關的檔案內容。

FirstFragment.kt

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

fragment_first.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    tools:context=".FirstFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/tv_first"
        android:textSize="20sp"
        android:text="First text"/>

</LinearLayout>

將 FirstFragment 加入 MainActivity

我們需要修改 activity_main.xml，建立一個 FragmentContainerView 來放我們的 Fragment，我們將這個 FragmentContainerView 命名為 first_fragment_container_view。

activity_main.xml

<?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"
    android:gravity="center_horizontal"
    android:padding="8dp"
    tools:context=".MainActivity" >

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/first_fragment_container_view"
        android:name="app.kirin.android.fragmentlab01.FirstFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

執行結果

此時執行 app 可以看到顯示 First text

建立第二個 Fragment，並加入 Activity 中

建立 SecondFragment

建立一個名為 SecondFragment 的 BlankFragment，修改其相關的檔案內容。

SecondFragment.kt

lass SecondFragment : Fragment() {

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

fragment_second.xml

我們把背景設為灰色(#EEEEEE)，來和 FirstFragment 區別開來。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="#EEEEEE"
    tools:context=".SecondFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv_second"
        android:textSize="20sp"
        android:text="Second text"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn_second"
        android:textSize="20sp"
        android:text="Second" />

</LinearLayout>

將 SecondFragment 加入 MainActivity

我們需要修改 activity_main.xml，加入另一個 FragmentContainerView 來放我們的 Fragment，我們將這個 FragmentContainerView 命名為 second_fragment_container_view。

然後調整兩個 FragmentContainerView 的 layout_height 及 layout_weight，使其能上下均分畫面。

activity_main.xml

<?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"
    android:gravity="center_horizontal"
    android:padding="8dp"
    tools:context=".MainActivity" >

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/first_fragment_container_view"
        android:name="app.kirin.android.fragmentlab01.FirstFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/second_fragment_container_view"
        android:name="app.kirin.android.fragmentlab01.SecondFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

</LinearLayout>

執行結果

此時執行 app 可以看到上下排列的 2 個 Fragment。

讓 2 個 Fragment 產生互動

我們要讓 SecondFragment 的 Button 能影響 FirstFragment 的 TextView。

在 MainActivity 中設定 Button 行為

MainActivity.kt

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

    override fun onResume() {
        super.onResume()
        val btnSecond = findViewById<Button>(R.id.btn_second)
        btnSecond.setOnClickListener {
            val tvFirst= findViewById<TextView>(R.id.tv_first)
            tvFirst.setText("Action by Second Button")
        }
    }
}

備註

如果要在 MainActivity 控制 Fragment 中的元件，不能在 onCreate() 中處理，必須要在 onResume() 中處理，才不會出現元件的 null-pointer 錯誤；但是如果把 FragmentContainerView 改為 fragment，就可以在 onCreate 中處理，原因未明，有同再研究。

執行結果

按下 SecondFragment 的按鈕，可以改變 FirstFragment 的文字。

建立第三個 Fragment，在執行時期替換第一個 Fragment

建立 ThirdFragment

建立一個名為 ThirdFragment 的 BlankFragment，修改其相關的檔案內容。

ThirdFragment.kt

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

fragment_thrid.kt

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="24sp"
        android:text="Third"/>

</FrameLayout>

在 MainActivity 中設定替換 Fragment 的行為

將原來改變 TextView 的動作改為替換 FirstFragment 為 ThirdFragment。

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

    override fun onResume() {
        super.onResume()
        val btnSecond = findViewById<Button>(R.id.btn_second)
        btnSecond.setOnClickListener {
            val fragmentManager = supportFragmentManager
            val transaction = fragmentManager.beginTransaction()
            transaction.replace(R.id.first_fragment_container_view, ThirdFragment())
            transaction.commit()
        }
    }
}

執行結果

按下 SecondFragment 裏的 Button，就會發現 FirstFragment 己替換為 ThirdFragment。

參考資料

developers Guide: Fragment

developers Reference: androidx.fragment.FragmentTransaction

舊的版本是：android.app.FragmentTransaction (Deprecated)