Fragment
สร้างส่วนติดต่อผู้ใช้แบบเป็นโมดูลด้วย Fragment เรียนรู้วงจรชีวิตของ Fragment การใช้ ViewBinding ใน Fragment การส่งอาร์กิวเมนต์ การจัดการกองซ้อนย้อนกลับ และการสื่อสารระหว่าง Fragment กับ Activity
Fragment เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 6 จากทั้งหมด 7 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 7 บทเรียน
Fragment คืออะไร
Fragment คือโมดูล UI ที่นำกลับมาใช้ซ้ำได้และอยู่ภายใน Activity ลองนึกภาพว่าเป็น Activity ย่อยที่มีเค้าโครง วงจรชีวิต และตรรกะของตนเอง
เหตุใดจึงควรใช้ Fragment
- นำ UI กลับมาใช้ซ้ำในหลาย Activity
- รองรับเค้าโครงที่แตกต่างกันสำหรับโทรศัพท์และแท็บเล็ต
- สร้างลำดับการทำงานหลายหน้าจอโดยไม่ต้องมีหลาย Activity
- ทำงานร่วมกับ Navigation Component ได้อย่างเป็นธรรมชาติ
วงจรชีวิตของ Fragment
Fragment มีวงจรชีวิตของตนเองซึ่งทำงานควบคู่ไปกับวงจรชีวิตของ Activity callback สำคัญมีดังนี้:
onAttach— Fragment ถูกแนบเข้ากับ ActivityonCreate— สร้าง Fragment แล้ว (ยังไม่มีมุมมอง)onCreateView— ขยายเค้าโครงonViewCreated— มุมมองพร้อมใช้งาน ให้ตั้งค่า UI ที่นี่onDestroyView— มุมมองถูกทำลาย (ล้างการอ้างอิงมุมมอง)onDetach— Fragment ถูกถอดออก
การสร้าง Fragment
สร้างคลาสที่สืบทอดจาก Fragment และเขียนทับ onCreateView เพื่อขยายเค้าโครง:
import androidx.fragment.app.Fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
class HomeFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_home, container, false)
}
}ViewBinding ใน Fragment
ใช้ ViewBinding ใน Fragment แต่ให้ปล่อย binding ใน onDestroyView เพื่อหลีกเลี่ยงหน่วยความจำรั่ว:
class HomeFragment : Fragment() {
private var _binding: FragmentHomeBinding? = null
private val binding get() = _binding!!
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
_binding = FragmentHomeBinding.inflate(inflater, container, false)
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.tvTitle.text = "Welcome!"
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null // prevent memory leak
}
}XML เค้าโครงของ Fragment
สร้าง res/layout/fragment_home.xml เช่นเดียวกับเค้าโครงของ Activity โดยมุมมองรากจะกลายเป็นมุมมองของ Fragment:
<!-- res/layout/fragment_home.xml -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:text="Home" />
</LinearLayout>การเพิ่ม Fragment ลงใน Activity
มีสองวิธีในการเพิ่ม Fragment ลงใน Activity:
- แบบคงที่ (XML) — ประกาศในเค้าโครงด้วยแท็ก
<fragment>จะไม่เปลี่ยนแปลงขณะทำงาน - แบบไดนามิก (โค้ด) — ใช้
FragmentManagerและธุรกรรม สามารถสลับได้ขณะทำงาน
<!-- Static: in activity_main.xml -->
<fragment
android:id="@+id/homeFragment"
android:name="com.example.HomeFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />ธุรกรรม Fragment แบบไดนามิก
ใช้ supportFragmentManager เพื่อเพิ่ม แทนที่ หรือลบ Fragment ขณะทำงาน:
// In Activity:
class MainActivity : AppCompatActivity(R.layout.activity_main) {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
if (savedInstanceState == null) {
supportFragmentManager.beginTransaction()
.add(R.id.fragmentContainer, HomeFragment())
.commit()
}
}
fun showDetail(id: Int) {
supportFragmentManager.beginTransaction()
.replace(R.id.fragmentContainer, DetailFragment.newInstance(id))
.addToBackStack(null) // allow back navigation
.commit()
}
}การส่งอาร์กิวเมนต์ให้ Fragment
ส่งข้อมูลผ่าน Bundle โดยใช้รูปแบบโรงงานของออบเจ็กต์คู่หู อย่าใช้ตัวสร้างของ Fragment ที่มีพารามิเตอร์ เพราะ Android จะสร้าง Fragment ใหม่ด้วยตัวสร้างที่ไม่มีอาร์กิวเมนต์หลังการเปลี่ยนแปลงการกำหนดค่า:
class DetailFragment : Fragment() {
companion object {
private const val ARG_ID = "item_id"
fun newInstance(itemId: Int): DetailFragment {
return DetailFragment().apply {
arguments = Bundle().apply {
putInt(ARG_ID, itemId)
}
}
}
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
val itemId = requireArguments().getInt(ARG_ID)
// use itemId to load data
}
}การสื่อสารระหว่าง Fragment → Activity
ใช้อินเทอร์เฟซที่กำหนดไว้ใน Fragment และให้ Activity นำไปใช้ Fragment จะได้รับการอ้างอิงผ่าน onAttach:
class ListFragment : Fragment() {
interface OnItemSelected {
fun onItemSelected(id: Int)
}
private var listener: OnItemSelected? = null
override fun onAttach(context: Context) {
super.onAttach(context)
listener = context as? OnItemSelected
}
private fun handleClick(id: Int) {
listener?.onItemSelected(id)
}
override fun onDetach() {
super.onDetach()
listener = null
}
}กองย้อนกลับ
เมื่อเรียก addToBackStack(null) ในธุรกรรม การกดปุ่มย้อนกลับจะนำ Fragment ออกจากกอง:
- หากไม่มี
addToBackStack— ปุ่มย้อนกลับจะออกจาก Activity - หากมี
addToBackStack— ปุ่มย้อนกลับจะกลับไปยัง Fragment ก่อนหน้า - ใช้
popBackStack()ในโค้ดเพื่อนำทางย้อนกลับ
Fragment ในคอนเทนเนอร์
เค้าโครงของ Activity ต้องมีเพียงมุมมองคอนเทนเนอร์ ซึ่งโดยทั่วไปคือ FrameLayout ที่มี ID โดย Fragment จะขยายเต็มคอนเทนเนอร์นั้น:
<!-- activity_main.xml -->
<FrameLayout
android:id="@+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />ตรวจสอบความเข้าใจ
เหตุใดจึงไม่ควรส่งอาร์กิวเมนต์ผ่านตัวสร้างให้ Fragment และควรใช้ Bundle ผ่านโรงงานของออบเจ็กต์คู่หูแทน
สรุป: Fragment
Fragment คือองค์ประกอบพื้นฐานของ UI Android สมัยใหม่:
- สืบทอดจาก
Fragmentและขยายเค้าโครงในonCreateView - ตั้งค่า UI ใน
onViewCreated - ปล่อย ViewBinding ใน
onDestroyView - ส่งข้อมูลผ่าน
Bundle+ โรงงานของออบเจ็กต์คู่หู (newInstance) - ใช้
addToBackStackสำหรับการนำทางย้อนกลับ - สื่อสารกับ Activity ผ่านอินเทอร์เฟซ
ถัดไป: ขอสิทธิ์ที่มีความเสี่ยงขณะทำงาน
คำถามที่พบบ่อย
บทเรียน “Fragment” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Fragment” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 7 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Fragment”
สร้างส่วนติดต่อผู้ใช้แบบเป็นโมดูลด้วย Fragment เรียนรู้วงจรชีวิตของ Fragment การใช้ ViewBinding ใน Fragment การส่งอาร์กิวเมนต์ การจัดการกองซ้อนย้อนกลับ และการสื่อสารระหว่าง Fragment กับ Activity คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 6 จากทั้งหมด 7 บทเรียน
บทเรียน “Fragment” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม
ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โครงสร้างโครงการและไฟล์ Manifest
- Activity และวงจรชีวิต
- เค้าโครงและมุมมอง
- การจัดการข้อมูลที่ผู้ใช้ป้อน
- อินเทนต์และการนำทาง
- Fragment
- สิทธิ์และคำขอขณะทำงาน