ตอนที่ 3 Android Studio Kotlin แนะนำ Layouts

28เม.ย. 2023 by รับทำแอพ สบายไอที

เลย์เอาต์ (Layouts) เป็นคำที่ใช้ในสาขาต่างๆ ตั้งแต่การออกแบบกราฟิกไปจนถึงการรับทำแอพ เพื่ออธิบายการจัดเรียงองค์ประกอบในพื้นที่ที่กำหนด ในการทำแอพ เลย์เอาต์ (Layouts) ใช้เพื่อกำหนดอินเทอร์เฟซผู้ใช้ของแอปพลิเคชัน ระบุตำแหน่งและขนาดขององค์ประกอบภาพต่างๆ บนหน้าจอ

ในบทความนี้ เราจะสำรวจพื้นฐานของเลย์เอาต์ในการทำแอพ โดยเฉพาะในบริบทของการทำแอพ Android Studio

เลย์เอาต์ในการทำแอพ Android

Android เป็นระบบปฏิบัติการที่ใช้กับอุปกรณ์เคลื่อนที่ เช่น สมาร์ทโฟนและแท็บเล็ต เมื่อรับทำแอพ Android คุณต้องกำหนดอินเทอร์เฟซผู้ใช้ (UI) ของแอปโดยใช้ชุดเค้าโครง เลย์เอาต์ใน Android คือไฟล์ XML ที่กำหนดโครงสร้างขององค์ประกอบ UI เช่น ปุ่ม view ข้อความ และรูปภาพ

เลย์เอาต์ Android ใช้โครงสร้างแบบต้นไม้ โดยเลย์เอาต์ระดับบนสุดจะทำหน้าที่เป็นคอนเทนเนอร์หลักสำหรับ view ย่อยทั้งหมด แต่ละ view ในเลย์เอาต์มีชุดของคุณสมบัติที่กำหนดตำแหน่ง ขนาด และลักษณะการทำงาน

มีเลย์เอาต์หลายประเภทใน Android รวมถึง:
  1. LinearLayout: เค้าโครงนี้จัดเรียง view ย่อยในแถวหรือคอลัมน์เดียว คุณสามารถใช้คุณสมบัติการวางแนวเพื่อระบุทิศทางของเค้าโครง
  2. RelativeLayout: เลย์เอาต์นี้จัดเรียง view ย่อยให้สัมพันธ์กันหรือสัมพันธ์กับ view พาเรนต์ คุณสามารถใช้คุณสมบัติต่างๆ เช่น layout_alignParentTop และ layout_below เพื่อระบุตำแหน่งของ view ย่อย
  3. ConstraintLayout: เค้าโครงนี้ช่วยให้คุณสร้างเค้าโครงที่ซับซ้อนได้โดยการระบุข้อจำกัดระหว่าง view ย่อยและ view หลัก คุณสามารถใช้คุณสมบัติ layout_constraintLeft_toLeftOf และ layout_constraintTop_toTopOf เพื่อระบุข้อจำกัด
  4. GridLayout: เค้าโครงนี้จัดเรียง view ย่อยในรูปแบบกริด คุณสามารถใช้คุณสมบัติ rowCount และ columnCount เพื่อระบุจำนวนแถวและคอลัมน์ในกริด

การสร้างเลย์เอาต์ใน Android

เมื่อสร้างเลย์เอาต์ใน Android Studio คุณต้องกำหนดไฟล์ XML ที่อธิบายองค์ประกอบ UI และคุณสมบัติ ต่อไปนี้คือตัวอย่างไฟล์เค้าโครงอย่างง่ายที่มีปุ่ม:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <Button
       android:id="@+id/myButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Click Me" />

</LinearLayout>

ในตัวอย่างนี้ เราใช้ LinearLayout เพื่อจัดเรียงปุ่มในแนวตั้ง คุณสมบัติ layout_width และ layout_height ถูกตั้งค่าเป็น match_parent ซึ่งหมายความว่าเค้าโครงจะเต็มทั้งหน้าจอ view ปุ่มมี ID เป็น myButton และข้อความ “Click Me”

เมื่อคุณสร้างไฟล์เลย์เอาต์แล้ว คุณสามารถใช้ไฟล์ในโค้ด Java หรือ Kotlin ของคุณเพื่อขยายเลย์เอาต์และเพิ่มลงในกิจกรรมหรือแฟรกเมนต์ของคุณ นี่คือตัวอย่างวิธีใช้ไฟล์เค้าโครงด้านบนใน Activity สำหรับ Kotlin:

class MyActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.my_layout)
   }
}

ในตัวอย่างนี้ เรากำลังขยายไฟล์เค้าโครง my_layout.xml และตั้งค่าเป็น view เนื้อหาของกิจกรรมโดยใช้ setContentView()
เลย์เอาต์เป็นส่วนสำคัญในการทำแอพ Android ช่วยให้การทำแอพกำหนดส่วนต่อประสานผู้ใช้ของแอพโดยใช้ไฟล์ XML ด้วยการใช้โครงร่างและคุณสมบัติประเภทต่างๆ นักพัฒนาสามารถสร้าง UI ที่ซับซ้อนซึ่งตอบสนองและใช้งานง่าย

LinearLayout

LinearLayout เป็นเลย์เอาต์ประเภทหนึ่งที่ใช้ในทำแอพ Android ที่จัดเรียง view ย่อยในแนวนอนหรือแนวตั้งในบรรทัดเดียว เป็นเลย์เอาต์ที่เรียบง่ายและยืดหยุ่นซึ่งสามารถใช้สร้าง UI พื้นฐานสำหรับแอพมือถือ

ในบทความนี้ เราจะสำรวจพื้นฐานของ LinearLayout และแสดงตัวอย่างวิธีใช้งานในแอป Android

คุณสมบัติของ LinearLayout

LinearLayout มีคุณสมบัติหลายอย่างที่สามารถใช้เพื่อปรับแต่งลักษณะการทำงาน ได้แก่:

  1. orientation: คุณสมบัตินี้ระบุทิศทางของเลย์เอาต์ในแนวนอนหรือแนวตั้ง ค่าเริ่มต้นคือแนวตั้ง
  2. layout_weight: คุณสมบัตินี้ระบุว่าแต่ละ view ย่อยควรใช้พื้นที่เท่าใดภายในเค้าโครง หากตั้งค่าเป็น 0 view ย่อยจะใช้พื้นที่เท่าที่จำเป็นเท่านั้น หากตั้งค่าเป็นค่าที่มากกว่า 0 view ย่อยจะขยายเพื่อเติมเต็มช่องว่างที่มีอยู่
  3. gravity: คุณสมบัตินี้ระบุการจัดตำแหน่งของ view ย่อยภายในเค้าโครง ค่าต่างๆ ได้แก่ กึ่งกลาง ซ้าย ขวา บน ล่าง และอื่นๆ
ตัวอย่าง LinearLayout

มาดูตัวอย่างวิธีใช้ LinearLayout ในแอพ Android กัน สมมติว่าเราต้องการสร้าง UI อย่างง่ายที่แสดง view ข้อความสอง view และปุ่มหนึ่งปุ่มในเค้าโครงแนวตั้ง

1. สร้างไฟล์เลย์เอาต์ใหม่ชื่อ activity_main.xml และเพิ่มโค้ดต่อไปนี้:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:padding="16dp"
   tools:context=".MainActivity">

   <TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello, World!" />

   <TextView
       android:id="@+id/textView2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="This is a simple LinearLayout example." />

   <Button
       android:id="@+id/button1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Click Me" />

</LinearLayout>

ในตัวอย่างนี้ เราใช้ LinearLayout แนวตั้งเพื่อจัดเรียงview view ข้อความและปุ่มถูกเพิ่มเป็น view ย่อยของ LinearLayout โดยแต่ละ view จะมีคุณสมบัติ layout_width และ layout_height ของตัวเอง คุณสมบัติช่องว่างภายในใช้เพื่อเพิ่มระยะห่างระหว่าง view และขอบของ Layouts

2. ต่อไปเราต้องสร้างคลาส MainActivity เพื่อแสดงเค้าโครง เพิ่มโค้ดต่อไปนี้ใน MainActivity.kt:

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

ในโค้ดนี้ เรากำลังขยายไฟล์เค้าโครง activity_main.xml และตั้งค่าเป็น view เนื้อหาของกิจกรรมโดยใช้ setContentView()

3. รันแอพและควรเห็น UI ต่อไปนี้:

Android Studio Kotlin ตัวอย่าง LinearLayout

LinearLayout เป็นเค้าโครงที่เรียบง่ายและยืดหยุ่นซึ่งสามารถใช้สร้าง UI พื้นฐานในแอป Android Studio ด้วยการระบุคุณสมบัติ orientation, layout_weight, และ gravity นักพัฒนาสามารถปรับแต่งเลย์เอาต์ให้ตรงกับความต้องการเฉพาะของตนได้

RelativeLayout

RelativeLayout เป็นเลย์เอาต์อีกประเภทหนึ่งที่ใช้ในการทำแอพ Android Studio ที่จัดเรียง view ย่อยให้สัมพันธ์กันหรือกับเลย์เอาต์หลัก เป็นเลย์เอาต์ที่ทรงพลังและยืดหยุ่นซึ่งสามารถใช้สร้าง UI ที่ซับซ้อนสำหรับแอพมือถือ

ในบทความนี้ เราจะสำรวจพื้นฐานของ RelativeLayout และแสดงตัวอย่างวิธีใช้งานในแอป Android

คุณสมบัติของ RelativeLayout

RelativeLayout มีคุณสมบัติหลายอย่างที่สามารถใช้เพื่อปรับแต่งลักษณะการทำงาน รวมถึง:

  1. layout_alignParentTop/Bottom/Left/Right: คุณสมบัติเหล่านี้จัด view ย่อยให้ตรงกับขอบของเค้าโครงหลัก
  2. layout_alignTop/Bottom/Left/Right: คุณสมบัติเหล่านี้จัด view ย่อยให้ตรงกับขอบที่สอดคล้องกันของ view ย่อยอื่น
  3. layout_above/below/toLeftOf/toRightOf: คุณสมบัติเหล่านี้วางตำแหน่ง view ย่อยด้านบน ด้านล่าง ทางด้านซ้ายของ หรือทางด้านขวาของ view ย่อยอื่น
  4. layout_centerInParent: คุณสมบัตินี้จัดกึ่งกลาง view ย่อยในแนวนอนและแนวตั้งภายในเค้าโครงหลัก
ตัวอย่าง RelativeLayout

มาดูตัวอย่างการใช้ RelativeLayout ในแอพ Android กัน สมมติว่าเราต้องการสร้าง UI ที่แสดง view รูปภาพและ view ข้อความ โดยให้ view ข้อความอยู่กึ่งกลางใต้ view รูปภาพ

1. สร้างไฟล์เลย์เอาต์ใหม่ชื่อ activity_main.xml และเพิ่มโค้ดต่อไปนี้:

<RelativeLayout 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:padding="16dp"
   tools:context=".MainActivity">

   <ImageView
       android:id="@+id/imageView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/my_image"
       android:layout_centerHorizontal="true"
       android:layout_marginBottom="16dp" />

   <TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="My Image"
       android:layout_below="@id/imageView1"
       android:layout_centerHorizontal="true" />

</RelativeLayout>

ในตัวอย่างนี้ เราใช้ RelativeLayout เพื่อจัดเรียง view view รูปภาพจะอยู่ที่กึ่งกลางด้านบนของเลย์เอาต์โดยใช้คุณสมบัติ layout_centerHorizontal และ view ข้อความจะอยู่ด้านล่างของ view รูปภาพโดยใช้คุณสมบัติ layout_below คุณสมบัติ layout_marginBottom ใช้เพื่อเพิ่มระยะห่างระหว่าง view รูปภาพและ view ข้อความ

** หากไม่มีรูปภาพ my_image ให้ทำการเพิ่มรูปภาพไปที่ res/drawable เช่น my_image.png หรือ my_image.jpg ด้วยการ copy ไปที่ folder

Android Studio เพิ่มรูปภาพ my_image.png

2. ต่อไปสร้างคลาส MainActivity เพื่อแสดงเค้าโครง เพิ่มโค้ดต่อไปนี้ใน MainActivity.kt:

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

ในโค้ดนี้ เรากำลังขยายไฟล์เค้าโครง activity_main.xml และตั้งค่าเป็น view เนื้อหาของกิจกรรมโดยใช้ setContentView()

3. รันแอพและคุณควรเห็น UI ต่อไปนี้:

Android Studio Kotlin ตัวอย่าง RelativeLayout

RelativeLayout เป็นเลย์เอาต์ที่ทรงพลังและยืดหยุ่นซึ่งสามารถใช้สร้าง UI ที่ซับซ้อนในแอพ Android Studio ด้วยการระบุคุณสมบัติเลย์เอาต์ต่างๆ นักพัฒนาสามารถวางตำแหน่ง view ย่อยที่สัมพันธ์กันหรือกับเลย์เอาต์หลักเพื่อสร้าง UI ที่ต้องการ

ConstraintLayout

ConstraintLayout เป็นเค้าโครงที่มีประสิทธิภาพและยืดหยุ่นซึ่งใช้ในการทำแอพ Android Studio ช่วยให้คุณสร้างเลย์เอาต์ที่ซับซ้อนโดยกำหนดข้อจำกัดระหว่าง viewในบทความนี้ เราจะสำรวจพื้นฐานของ ConstraintLayout และแสดงตัวอย่างวิธีใช้งานในแอป Android

คุณสมบัติ ConstraintLayout

ConstraintLayout มีคุณสมบัติหลายอย่างที่สามารถใช้เพื่อปรับแต่งลักษณะการทำงาน รวมถึง:

  1. layout_constraintTop_toTopOf/bottom_toBottomOf/start_toStartOf/end_toEndOf: คุณสมบัติเหล่านี้ตั้งค่าข้อจำกัดของ view ไปยังขอบที่สอดคล้องกันของ view อื่น
  2. layout_constraintBaseline_toBaselineOf: คุณสมบัตินี้ตั้งค่าบรรทัดฐานของ view เป็นบรรทัดฐานของ view อื่น
  3. layout_constraintHorizontal_bias/Vertical_bias: คุณสมบัติเหล่านี้ตั้งค่าอคติแนวนอนหรือแนวตั้งของ view ระหว่างสองข้อจำกัด
  4. layout_constraintDimensionRatio: คุณสมบัตินี้กำหนดอัตราส่วนกว้างยาวของ view
  5. layout_constraintGuide_begin/end: คุณสมบัติเหล่านี้สร้างแนวทางที่สามารถใช้เป็นข้อจำกัดสำหรับ view อื่นๆ
ตัวอย่าง ConstraintLayout

มาดูตัวอย่างการใช้ ConstraintLayout ในแอพ Android Studio กัน สมมติว่าเราต้องการสร้าง UI ที่แสดง view รูปภาพและ view ข้อความ โดยให้ view ข้อความอยู่กึ่งกลางใต้ view รูปภาพและจัดชิดขอบด้านขวาของหน้าจอ

1. สร้างไฟล์เลย์เอาต์ใหม่ชื่อ 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"
   android:padding="16dp">

   <ImageView
       android:id="@+id/imageView1"
       android:layout_width="0dp"
       android:layout_height="0dp"
       android:src="@drawable/my_image"
       app:layout_constraintDimensionRatio="1:1"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintEnd_toStartOf="@id/guideline"
       app:layout_constraintBottom_toTopOf="@id/textView1" />

   <TextView
       android:id="@+id/textView1"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:text="My Image"
       app:layout_constraintTop_toBottomOf="@id/imageView1"
       app:layout_constraintStart_toEndOf="@id/guideline"
       app:layout_constraintEnd_toEndOf="parent"
       android:layout_marginStart="16dp"
       android:layout_marginEnd="16dp" />

   <androidx.constraintlayout.widget.Guideline
       android:id="@+id/guideline"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       app:layout_constraintGuide_begin="256dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

ในตัวอย่างนี้ เราใช้ ConstraintLayout เพื่อจัดเรียง view view รูปภาพจะอยู่ที่ด้านบนซ้ายของเค้าโครงโดยใช้คุณสมบัติ app:layout_constraintStart_toStartOf และ app:layout_constraintTop_toTopOf และจำกัดไว้ที่ขอบด้านขวาของหน้าจอและด้านล่างแนวทางโดยใช้คุณสมบัติ app:layout_constraintEnd_toStartOf และ app:layout_constraintBottom_toTopOf คุณสมบัติ app:layout_constraintDimensionRatio ใช้เพื่อสร้าง ImageView สแควร์ แนวทางนี้ใช้เพื่อวางตำแหน่ง view ข้อความโดยใช้คุณสมบัติ app:layout_constraintStart_toEndOf และ app:layout_constraintEnd_toEndOf และจัดชิดขอบด้านขวาของหน้าจอโดยใช้ app:layout_constraintEnd_toEndOf=”parent” คุณสมบัติ app:layout_constraintTop_toBottomOf ใช้เพื่อวางตำแหน่ง view ข้อความด้านล่าง view รูปภาพ

2. เพิ่มไฟล์รูปภาพชื่อ my_image.png ไปยังโฟลเดอร์ res/drawable ของโปรเจ็กต์ของคุณ (ถ้ายังไม่มี)

3. รันแอพบนอีมูเลเตอร์หรืออุปกรณ์จริง คุณควรเห็น view รูปภาพและ view ข้อความแสดงบนหน้าจอ โดย view ข้อความจะอยู่กึ่งกลางใต้ view รูปภาพและจัดชิดขอบด้านขวาของหน้าจอ

Android Studio Kotlin ตัวอย่าง ConstraintLayout

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

GridLayout

GridLayout เป็นเลย์เอาต์ประเภทหนึ่งที่ใช้ในการทำแอพ Android Studio ที่จัดเรียง view ย่อยในตาราง มีประโยชน์สำหรับการแสดงข้อมูลในรูปแบบตารางหรือสำหรับการสร้างตารางปุ่มหรือรูปภาพอย่างง่าย ในบทความนี้ เราจะสำรวจพื้นฐานของ GridLayout และแสดงตัวอย่างวิธีใช้งานในแอป Android

คุณสมบัติ GridLayout

GridLayout มีคุณสมบัติหลายอย่างที่สามารถใช้เพื่อปรับแต่งลักษณะการทำงานของมัน รวมถึง:

  1. layout_column: คุณสมบัตินี้ระบุคอลัมน์ที่ควรวาง view
  2. layout_row: คุณสมบัตินี้ระบุแถวที่ควรวาง view
  3. layout_columnSpan: คุณสมบัตินี้ระบุจำนวนคอลัมน์ที่ view ควรขยาย
  4. layout_rowSpan: คุณสมบัตินี้ระบุจำนวนแถวที่ view ควรขยาย
  5. layout_gravity: คุณสมบัตินี้ระบุการจัดตำแหน่งของ view ภายในเซลล์
ตัวอย่าง GridLayout

มาดูตัวอย่างการใช้ GridLayout ในแอพ Android กัน สมมติว่าเราต้องการสร้าง UI ที่แสดงตารางรูปภาพ โดยแต่ละรูปภาพจะแสดงในเซลล์ของตัวเองของตาราง

1. สร้างไฟล์เลย์เอาต์ใหม่ชื่อ activity_main.xml และเพิ่มโค้ดต่อไปนี้:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/gridLayout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:columnCount="3"
   android:rowCount="3"
   android:padding="16dp">

   <ImageView
       android:src="@drawable/image1"
       android:layout_column="0"
       android:layout_row="0"
       android:layout_rowSpan="2"
       android:layout_width="100dp"
       android:layout_height="wrap_content"
       android:layout_gravity="fill_vertical|fill_horizontal"/>

   <ImageView
       android:src="@drawable/image2"
       android:layout_column="1"
       android:layout_row="0"
       android:layout_width="100dp"
       android:layout_height="wrap_content"
       android:layout_gravity="fill_vertical|fill_horizontal"/>

   <ImageView
       android:src="@drawable/image3"
       android:layout_column="2"
       android:layout_row="0"
       android:layout_width="100dp"
       android:layout_height="wrap_content"
       android:layout_gravity="fill_vertical|fill_horizontal"/>

   <ImageView
       android:src="@drawable/image4"
       android:layout_column="1"
       android:layout_row="1"
       android:layout_width="100dp"
       android:layout_height="wrap_content"
       android:layout_gravity="fill_vertical|fill_horizontal"/>

   <ImageView
       android:src="@drawable/image5"
       android:layout_column="2"
       android:layout_row="1"
       android:layout_width="100dp"
       android:layout_height="wrap_content"
       android:layout_gravity="fill_vertical|fill_horizontal"/>

   <ImageView
       android:src="@drawable/image6"
       android:layout_column="0"
       android:layout_row="2"
       android:layout_width="100dp"
       android:layout_height="wrap_content"
       android:layout_gravity="fill_vertical|fill_horizontal"/>

   <ImageView
       android:src="@drawable/image7"
       android:layout_column="1"
       android:layout_row="2"
       android:layout_width="100dp"
       android:layout_height="wrap_content"
       android:layout_gravity="fill_vertical|fill_horizontal"/>

   <ImageView
       android:src="@drawable/image8"
       android:layout_column="2"
       android:layout_row="2"
       android:layout_width="100dp"
       android:layout_height="wrap_content"
       android:layout_gravity="fill_vertical|fill_horizontal"/>
</GridLayout>

2. ในโค้ดนี้ เราได้กำหนด GridLayout ที่มี 3 คอลัมน์และ 3 แถว และเพิ่มอิลิเมนต์ ImageView 8 รายการเข้าไป องค์ประกอบ ImageView แต่ละรายการถูกกำหนดด้วยคุณสมบัติ layout_column, layout_row, layout_rowSpan และ layout_gravity ซึ่งระบุคอลัมน์และแถวที่ควรวาง view จำนวนแถวที่ view ควรขยาย และการจัดตำแหน่งของ view ภายในเซลล์ .

3. เราได้ตั้งค่าคุณสมบัติ android:padding เพื่อเพิ่มช่องว่างระหว่างขอบของกริดและรูปภาพ

4. สุดท้าย เราได้ตั้งค่าคุณสมบัติ android:layout_width ของแต่ละอิลิเมนต์ ImageView เป็น 100dp และคุณสมบัติ android:layout_height เป็น wrap_content สิ่งนี้บอกให้ GridLayout กระจายพื้นที่ว่างระหว่างคอลัมน์เท่าๆ กัน ในขณะที่อนุญาตให้แต่ละ ImageView ปรับขนาดตัวเองตามเนื้อหา

5. เพิ่มไฟล์รูปภาพชื่อ image1.png, image2.png และที่เหลือไปยังโฟลเดอร์ res/drawable ของโปรเจ็กต์ของคุณ

6. รันแอพบนอีมูเลเตอร์หรืออุปกรณ์จริง คุณควรเห็นภาพที่แสดงในตาราง โดยแต่ละภาพจะแสดงในเซลล์ของตัวเอง

Android Studio Kotlin ตัวอย่าง GridLayout

อธิบายถึงพื้นฐานของ GridLayout และแสดงตัวอย่างวิธีใช้งานในแอป Android ด้วย GridLayout คุณสามารถสร้างตารางของ view ที่ตอบสนองต่อการเปลี่ยนแปลงของขนาดหน้าจอและการวางแนวได้อย่างง่ายดาย

เลย์เอาต์เป็นส่วนสำคัญของการทำแอพ Android ที่ช่วยให้นักพัฒนาสร้างอินเทอร์เฟซผู้ใช้ที่ดูดึงดูดสายตาและใช้งานได้จริง

Android Studio มีตัวเลือกเลย์เอาต์หลายแบบ แต่ละแบบมีชุดฟีเจอร์และประโยชน์เฉพาะของตัวเอง เช่น LinearLayout, RelativeLayout, ConstraintLayout และ GridLayout

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

ตัวเลือกเลย์เอาต์เหล่านี้แต่ละตัวเลือกมีข้อดีและข้อเสียของตัวเอง และการเลือกตัวเลือกที่เหมาะสมนั้นขึ้นอยู่กับข้อกำหนดของแอพและความซับซ้อนของอินเทอร์เฟซผู้ใช้

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

เขียนแอพ Android Studio

ตอนที่ 2 สำรวจซอร์สโค้ดโปรเจคของ Android Studio
ตอนที่ 4 Android Studio Kotlin แนะนำ Views