如何使用Fragment(kotlin)

如何使用Fragment(kotlin)

情境

Fragment 是後來 Android 最常用來呈現畫面的一個元件,其中我們會使用兩種 Fragment 來處理不同的應用情境,一種是 Fragment,最常用來嵌入到某個畫面或元件內,它的生命週期是跟著 Activity,所以當整個 Activity 被回收掉以後,掛在上面的 Fragment 也會跟著消失,反之則不會。
官網宣布棄用 android.app.DialogFragment 這個類別,建議我們使用 Support Library 的 DialogFragment,所以以下範例會從新的 androidx.fragment.app.Fragment 來進行改寫。

完整程式碼

如果你想了解完整程式碼,可以直接到 Github 下載或觀看。

程式碼說明

一開始先建立主畫面,建立兩個 Button,用來切換 Fragment1 以及 Fragment2,在切換過程當中,我們可以觀察到 Fragment 的字樣在變化。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
	android:layout_width="match_parent"  
	android:layout_height="match_parent"  
	android:padding="16dp"  
	android:orientation="vertical">  
	<LinearLayout  android:orientation="horizontal"  
		android:layout_width="match_parent"  
		android:layout_height="wrap_content">  
		<Button  android:layout_width="wrap_content"  
			android:layout_height="wrap_content"  
			android:text="fragment1"  
			android:id="@+id/first_fragment" />  
		<Button  android:layout_width="wrap_content"  
			android:layout_height="wrap_content"  
			android:text="fragment2"  
			android:id="@+id/second_fragment" />  
	</LinearLayout> 
	<RelativeLayout  android:id="@+id/fragment_container"  
		android:layout_width="match_parent"  
		android:layout_height="wrap_content"  
		android:padding="20dp"  
		android:orientation="vertical" />  
</LinearLayout>

這樣一來就可以利用這兩個 Button 來切換 Fragment,接著我們建立一個 Fragment 的樣板,
透過這個 Fragment 產生出兩個實體,在按鈕進行切換的時候,就利用 SupportFragmentManager 來幫我們進行切換,前面講到我們是透過 Support library 的 Fragment 來幫忙處理畫面,因此,就必須用到 SupportFragmentManager 而不能直接使用 FragmentManager,否則會出現無法編譯的問題。

我們先來看一下 DetailsFragment 內部長怎樣子。

class DetailsFragment(private val index:Int) : Fragment() {  
  
	override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {  
		val v = LayoutInflater.from(context).inflate(R.layout.fragment_details, container, false)  
		v.text_view.text = "Fragment $index"  
		return v  
	}  
}

其實非常的簡單,只是單純透過建構子告知這個畫面應該要顯示是哪一個 Fragment,為了方便看效果,我們將背景塗成橘色。

接著透過 MainActivity 來幫忙進行切換 Fragment。

class MainActivity : AppCompatActivity() {  
	private val firstFragment = DetailsFragment(1)  
	private val secondFragment = DetailsFragment(2)  
	override fun onCreate(savedInstanceState: Bundle?) {  
		super.onCreate(savedInstanceState)  
		setContentView(R.layout.activity_main)  
		addFragment(firstFragment)  
		addFragment(secondFragment)  
		first_fragment.setOnClickListener {  
			replaceFragment(firstFragment)  
		}  
		second_fragment.setOnClickListener {  
			replaceFragment(secondFragment)  
		}  
	}  

	private fun addFragment(f: Fragment) {  
		val transaction = supportFragmentManager.beginTransaction()  
		transaction.add(R.id.fragment_container, f)  
		transaction.commit()  
	}  

	private fun replaceFragment(f : Fragment){  
		val transaction = supportFragmentManager.beginTransaction()  
		transaction.replace(R.id.fragment_container, f)  
		transaction.commit()  
	}  
}

這邊有宣告兩個方法,第一個方法是在初始化 onCreate 方法內直接先將我們的 Fragment 加入到容器,所以會呼叫 addFragment 這個方法,那接下來因為已經加入到容器了,就可以透過 replaceFragment 這個方法把剛剛兩個 Fragment 進行切換,只要告訴我們的容器,就可以進行快速地切換。

效果如下圖。


透過點選 Button 就可以選擇要切換的 Fragment 了。

這樣就是一個簡單的 Fragment 範例了。