Android Academy · บทเรียน

เค้าโครงและมุมมอง

ออกแบบส่วนติดต่อผู้ใช้ด้วยเค้าโครง XML ใช้ ConstraintLayout, LinearLayout และมุมมองทั่วไป เช่น TextView, Button, ImageView และ EditText

เค้าโครงและมุมมอง เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 7 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 7 บทเรียน

การสร้าง UI ด้วย XML

UI ของ Android กำหนดไว้ในไฟล์เค้าโครง XML ที่จัดเก็บอยู่ใน res/layout/ เค้าโครงจะอธิบายโครงสร้างและลักษณะที่ปรากฏของหน้าจอ เช่น จะแสดงมุมมองใดบ้างและอยู่ที่ตำแหน่งใด

จากนั้นโค้ด Kotlin จะขยายเค้าโครงนี้และโต้ตอบกับมุมมองต่าง ๆ ขณะทำงาน

ประเภทมุมมองที่ใช้บ่อย

วิดเจ็ตมุมมองที่ใช้บ่อยที่สุด:

TextView — แสดงข้อความ
EditText — ช่องรับข้อความ
Button — ปุ่มที่กดได้
ImageView — แสดงรูปภาพ
CheckBox — สลับเปิด/ปิด
Switch — ตัวสลับเปิด/ปิด (Material)

ConstraintLayout

ConstraintLayout เป็นเค้าโครงที่แนะนำสำหรับหน้าจอส่วนใหญ่ คุณสามารถใช้เพื่อจัดตำแหน่งมุมมองโดยอ้างอิงจากมุมมองอื่นหรือมุมมองแม่ผ่านข้อจำกัดต่าง ๆ ซึ่งคล้ายกับการเชื่อมจุดยึดเข้าด้วยกัน

โครงสร้างแบบแบน — ไม่จำเป็นต้องซ้อนเค้าโครงหลายชั้น
ยืดหยุ่น — รองรับหน้าจอทุกขนาด
ใช้เป็นค่าเริ่มต้นในโปรเจกต์ Android Studio ใหม่

XML ของ ConstraintLayout

TextView ที่อยู่กึ่งกลางหน้าจอใน ConstraintLayout:

<!-- res/layout/activity_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android!"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

LinearLayout

LinearLayout จัดเรียงมุมมองในแถวหรือคอลัมน์เดียว:

android:orientation="vertical" — เรียงมุมมองจากบนลงล่าง
android:orientation="horizontal" — เรียงมุมมองไว้ข้างกัน
android:layout_weight — แบ่งพื้นที่ที่เหลือตามสัดส่วน

เรียบง่ายและคาดเดาได้ แต่ควรหลีกเลี่ยงการซ้อนหลายชั้น

แอตทริบิวต์สำคัญของเค้าโครง

View ทุกตัวมีแอตทริบิวต์สำคัญเหล่านี้:

layout_width / layout_height: match_parent, wrap_content หรือค่าหน่วย dp แบบกำหนดตายตัว
id: ใช้เพื่ออ้างอิงมุมมองใน Kotlin
margin: พื้นที่ด้านนอกมุมมอง
padding: พื้นที่ด้านในมุมมอง

ใช้ dp สำหรับขนาด (พิกเซลที่ไม่ขึ้นกับความหนาแน่น) และใช้ sp สำหรับขนาดข้อความ

ScrollView

เมื่อเนื้อหาสูงเกินหน้าจอ ให้ครอบเนื้อหานั้นด้วย ScrollView:

มีลูกโดยตรงได้เพียง หนึ่ง ตัว (โดยทั่วไปคือ LinearLayout)
เลื่อนในแนวตั้งเป็นค่าเริ่มต้น
ใช้ HorizontalScrollView สำหรับการเลื่อนในแนวนอน

สำหรับรายการแบบไดนามิกที่มีความยาวมาก ให้ใช้ RecyclerView แทน เพราะมีประสิทธิภาพมากกว่า

การค้นหามุมมองในโค้ด

มีสองวิธีในการเข้าถึงมุมมองในโค้ด Kotlin:

findViewById(R.id.tvTitle) — วิธีดั้งเดิม โดยคืนค่ามุมมองตาม ID
ViewBinding — แนวทางสมัยใหม่ที่สร้างคลาส binding จาก XML ทำให้เข้าถึงมุมมองทั้งหมดได้อย่างปลอดภัยตามชนิดข้อมูล

แนะนำให้ใช้ ViewBinding อย่างยิ่ง โดยคุณจะได้เรียนรู้ในบทเรียนถัดไป

การใช้ findViewById

เข้าถึงและแก้ไขมุมมองจาก onCreate:

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

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

        val tvTitle = findViewById<TextView>(R.id.tvTitle)
        tvTitle.text = "Welcome!"
        tvTitle.textSize = 20f
    }
}

ตรวจสอบความเข้าใจ

ควรใช้หน่วยใดสำหรับขนาดข้อความในเค้าโครง Android

สรุป: เค้าโครงและมุมมอง

ขณะนี้คุณสามารถออกแบบหน้าจอ Android ได้แล้ว:

UI กำหนดไว้ในไฟล์เค้าโครง XML ภายใน res/layout/
มุมมองที่ใช้บ่อย: TextView, EditText, Button, ImageView
ConstraintLayout — ยืดหยุ่น โครงสร้างแบน และเป็นตัวเลือกที่แนะนำ
LinearLayout — จัดเรียงเป็นแถวหรือคอลัมน์อย่างง่าย
ใช้ dp สำหรับขนาด และ sp สำหรับข้อความ
เข้าถึงมุมมองใน Kotlin ด้วย findViewById

ถัดไป: ทำให้ UI โต้ตอบได้ด้วยการจัดการข้อมูลที่ผู้ใช้ป้อน

คำถามที่พบบ่อย

บทเรียน “เค้าโครงและมุมมอง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เค้าโครงและมุมมอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 7 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เค้าโครงและมุมมอง”

ออกแบบส่วนติดต่อผู้ใช้ด้วยเค้าโครง XML ใช้ ConstraintLayout, LinearLayout และมุมมองทั่วไป เช่น TextView, Button, ImageView และ EditText คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 7 บทเรียน

บทเรียน “เค้าโครงและมุมมอง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม

ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

← กลับไปที่ Android Academy