建立專案
建立一個有 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)
Comments