0Pricing
Android Academy · บทเรียน

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 ถูกแนบเข้ากับ Activity
  • onCreate — สร้าง 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. โครงสร้างโครงการและไฟล์ Manifest
  2. Activity และวงจรชีวิต
  3. เค้าโครงและมุมมอง
  4. การจัดการข้อมูลที่ผู้ใช้ป้อน
  5. อินเทนต์และการนำทาง
  6. Fragment
  7. สิทธิ์และคำขอขณะทำงาน
← กลับไปที่ Android Academy