Android Kotlin Fundamentals 02.1: เลย์เอาต์เชิงเส้นโดยใช้เครื่องมือแก้ไขเลย์เอาต์

Codelab นี้เป็นส่วนหนึ่งของหลักสูตรพื้นฐานเกี่ยวกับ Kotlin ใน Android คุณจะได้รับประโยชน์สูงสุดจากหลักสูตรนี้ หากทํางานผ่าน Codelab ตามลําดับ Codelab ของหลักสูตรทั้งหมดจะแสดงอยู่ในหน้า Landing Page ของ Codelab ของ Android Kotlin Fundamentals

สิ่งที่ควรทราบอยู่แล้ว

  • การสร้างแอป Android ขั้นพื้นฐานใน Kotlin
  • เรียกใช้แอป Android ในโปรแกรมจําลองหรืออุปกรณ์
  • ข้อมูลเบื้องต้นเกี่ยวกับ LinearLayout
  • การสร้างแอปแบบง่ายที่ใช้ LinearLayout และ TextView

สิ่งที่คุณจะได้เรียนรู้

  • วิธีทํางานกับ View และ ViewGroup
  • วิธีจัดเรียงมุมมองใน Activity โดยใช้ LinearLayout.
  • วิธีใช้ ScrollView สําหรับแสดงเนื้อหาแบบเลื่อนได้
  • วิธีเปลี่ยนระดับการเข้าถึงของ View
  • วิธีสร้างและใช้ทรัพยากรสตริงและมิติข้อมูล
  • วิธีสร้างเลย์เอาต์เชิงเส้นโดยใช้เครื่องมือแก้ไขเลย์เอาต์ของ Android Studio&#39

สิ่งที่คุณจะทํา

  • สร้างแอปเกี่ยวกับฉัน
  • เพิ่ม TextView ลงในเลย์เอาต์เพื่อแสดงชื่อ
  • เพิ่ม ImageView.
  • เพิ่ม ScrollView เพื่อแสดงข้อความที่เลื่อนได้

ในแอป aboutMe คุณสามารถแสดงข้อเท็จจริงที่น่าสนใจเกี่ยวกับตัวคุณเอง หรือปรับแต่งแอปสําหรับเพื่อน สมาชิกในครอบครัว หรือสัตว์เลี้ยง แอปนี้แสดงชื่อ ปุ่มเสร็จสิ้น รูปภาพดาว และข้อความแบบเลื่อนได้บางรายการ

โดยคุณจะสร้างโปรเจ็กต์ "เกี่ยวกับฉัน" ใน Android Studio ในงานนี้

  1. เปิด Android Studio หากยังไม่ได้เปิด
  2. หากมีโปรเจ็กต์เปิดอยู่แล้วใน Android Studio ให้เลือก File > New > New Project


  3. หากยังไม่ได้เปิดโปรเจ็กต์ ให้เลือก + เริ่มโปรเจ็กต์ Android Studio ใหม่ในกล่องโต้ตอบยินดีต้อนรับสู่ Android Studio


  4. ในกล่องโต้ตอบสร้างโปรเจ็กต์ใหม่ในแท็บโทรศัพท์และแท็บเล็ต ให้เลือกเทมเพลตกิจกรรมที่ว่างเปล่า คลิกถัดไป


  5. จากนั้นกําหนดพารามิเตอร์ต่อไปนี้แล้วคลิกเสร็จสิ้นในกล่องโต้ตอบสร้างโปรเจ็กต์ใหม่

แอตทริบิวต์

ค่า

ชื่อแอปพลิเคชัน

เกี่ยวกับฉัน

ชื่อบริษัท Android

com.android.example.AboutMe (หรือโดเมนของคุณเอง)

บันทึกตำแหน่ง

เก็บตําแหน่งเริ่มต้นไว้หรือเปลี่ยนเป็นไดเรกทอรีที่ต้องการ

ภาษา

Kotlin

ระดับ API ขั้นต่ํา

API 19: Android 4.4 (KitKat)

โปรเจ็กต์นี้จะรองรับ Instant App

ไม่เลือกช่องทําเครื่องหมายนี้

ใช้อาร์ติแฟกต์ AndroidX

เลือกช่องทําเครื่องหมายนี้

Android Studio จะใช้เวลาสักครู่ในการสร้างไฟล์โครงการ

  1. เรียกใช้แอป คุณจะเห็นสตริง " Hello World" ในหน้าจอว่าง

เทมเพลตกิจกรรมที่ว่างเปล่าจะสร้างกิจกรรมเปล่ารายการเดียวชื่อ Mainactivity.kt เทมเพลตนี้ยังสร้างไฟล์เลย์เอาต์ชื่อ activity_main.xml ด้วย ไฟล์เลย์เอาต์มี ConstraintLayout เป็นรูทของ ViewGroup และมี TextView เดียวเป็นเนื้อหา

ในงานนี้ ให้เปลี่ยนราก ViewGroup ที่สร้างขึ้นเป็น LinearLayout และยังจัดเรียงองค์ประกอบ UI ในแนวตั้งได้อีกด้วย

ดูกลุ่ม

ViewGroup คือมุมมองที่อาจมีมุมมองย่อย ซึ่งประกอบด้วยมุมมองและกลุ่มการดูอื่นๆ มุมมองที่ประกอบขึ้นเป็นเลย์เอาต์จะได้รับการจัดระเบียบเป็นลําดับชั้นของมุมมอง โดยมีกลุ่มการดูเป็นรูท

ในกลุ่มข้อมูลพร็อพเพอร์ตี้ LinearLayout องค์ประกอบ UI จะจัดเรียงในแนวนอนหรือแนวตั้ง

เปลี่ยนเลย์เอาต์รากเพื่อให้ใช้กลุ่มข้อมูลพร็อพเพอร์ตี้ LinearLayout:

  1. เลือกแผง Project > Android เปิดไฟล์ activity_main.xml ในโฟลเดอร์ app/res/layout
  2. เลือกแท็บข้อความ แล้วเปลี่ยนกลุ่มระดับรากจาก ConstraintLayout เป็น LinearLayout
  3. โปรดนํา TextView ออก ในองค์ประกอบ LinearLayout ให้เพิ่มแอตทริบิวต์ android:orientation และตั้งค่าเป็น vertical

ก่อน:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

หลัง:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

เครื่องมือแก้ไขเลย์เอาต์เป็นเครื่องมือออกแบบภาพภายใน Android Studio แทนที่จะต้องเขียนโค้ด XML ด้วยตนเองเพื่อสร้างเลย์เอาต์ของแอป คุณสามารถใช้เครื่องมือแก้ไขเลย์เอาต์เพื่อลากองค์ประกอบ UI ไปยังตัวแก้ไขการออกแบบได้

หากต้องการดูเครื่องมือแก้ไขเลย์เอาต์ ให้คลิกแท็บการออกแบบ ภาพหน้าจอด้านล่างแสดงส่วนต่างๆ ของเครื่องมือแก้ไขเลย์เอาต์

ตัวแก้ไขดีไซน์: แสดงภาพเลย์เอาต์ของหน้าจอในมุมมองการออกแบบ มุมมองพิมพ์เขียว หรือทั้ง 2 แบบ ตัวแก้ไขดีไซน์คือส่วนหลักของเครื่องมือแก้ไขเลย์เอาต์

แถบเครื่องมือ: มีปุ่มสําหรับกําหนดค่าลักษณะที่ปรากฏของเลย์เอาต์ในตัวแก้ไขดีไซน์ และเปลี่ยนแอตทริบิวต์เลย์เอาต์บางรายการ ตัวอย่างเช่น หากต้องการเปลี่ยนการแสดงเลย์เอาต์ในตัวแก้ไขดีไซน์ ให้ใช้เมนูแบบเลื่อนลงเลือกพื้นผิวการออกแบบ ดังนี้

  • ใช้การออกแบบเพื่อดูตัวอย่างเลย์เอาต์จริง
  • ใช้ Blueprint เพื่อดูเฉพาะโครงร่างสําหรับมุมมองแต่ละรายการ
  • ใช้การออกแบบ + พิมพ์เขียวเพื่อดูการแสดงผลทั้งสองพร้อมกัน

จานสี: แสดงรายการมุมมองและมุมมองกลุ่มที่สามารถลากลงในเลย์เอาต์หรือในแผงแผนผังคอมโพเนนต์

แอตทริบิวต์: แสดงแอตทริบิวต์สําหรับข้อมูลพร็อพเพอร์ตี้หรือกลุ่มมุมมองที่เลือกในปัจจุบัน หากต้องการสลับระหว่างรายการแอตทริบิวต์ทั้งหมดและแอตทริบิวต์ที่ใช้กันทั่วไป ให้ใช้ไอคอน ที่ด้านบนของแผง

คอมโพเนนต์คอมโพเนนต์: แสดงลําดับชั้นของเลย์เอาต์เป็นแผนผังมุมมอง แผนผังคอมโพเนนต์จะมีประโยชน์เมื่อคุณมีมุมมองขนาดเล็ก ซ่อนอยู่ หรือซ้อนทับกันซึ่งคุณเลือกในตัวแก้ไขดีไซน์ไม่ได้

ขั้นตอนที่ 1: เพิ่ม TextView

  1. เปิดไฟล์ res/layout/activity_main.xml หากยังไม่ได้เปิด
  2. เปลี่ยนไปที่แท็บข้อความ และตรวจสอบโค้ด โค้ดมี LinearLayout เป็นกลุ่มมุมมองรูท (กลุ่มการดูคือข้อมูลพร็อพเพอร์ตี้ที่มีมุมมองอื่นๆ)

    LinearLayout มีแอตทริบิวต์ที่จําเป็น layout_height, layout_width และ orientation ซึ่งเป็น vertical โดยค่าเริ่มต้น
  3. เปลี่ยนไปที่แท็บการออกแบบเพื่อเปิดเครื่องมือแก้ไขเลย์เอาต์
  1. ลากมุมมองข้อความจากแผงชุดสีไปยังตัวแก้ไขดีไซน์


  2. สังเกตแผงแผนผังคอมโพเนนต์ มุมมองข้อความใหม่วางเป็นองค์ประกอบย่อยของกลุ่มมุมมองระดับบนสุด ซึ่งก็คือ LinearLayout

  3. เปิดแผงแอตทริบิวต์หากยังไม่ได้เปิด (หากต้องการเปิดแผง ให้ดับเบิลคลิก TextView ที่เพิ่งเพิ่มในตัวแก้ไขการออกแบบ)
  4. ตั้งค่าแอตทริบิวต์ต่อไปนี้ในแผงแอตทริบิวต์

แอตทริบิวต์

ค่า

ID

name_text

ข้อความ

ตั้งชื่อเลย (ช่อง text ใดช่องหนึ่งจะแสดงประแจเพื่อระบุว่าเป็นเนมสเปซของ tools ส่วนที่ไม่มีประแจนี้ก็มีไว้สําหรับเนมสเปซ android ซึ่งเป็นช่องข้อความที่คุณต้องการ)

textลักษณะที่ปรากฏขึ้น >ขนาดข้อความ

20sp

textShowingance &gt textColor

@android:color/black

textลักษณะที่ปรากฏและข้อความในการจัดข้อความ

ศูนย์

ขั้นตอนที่ 2: สร้างทรัพยากรสตริง

ในแผนผังคอมโพเนนต์ TextView, จะเห็นไอคอนคําเตือน หากต้องการดูข้อความเตือน ให้คลิกไอคอนหรือชี้ไปที่รายการนั้น ดังที่แสดงในภาพหน้าจอด้านล่าง

หากต้องการสร้างคําเตือน ให้สร้างทรัพยากรสตริงดังนี้

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


  2. ในกล่องโต้ตอบทรัพยากร ให้เลือกเพิ่มทรัพยากรใหม่ > ค่าสตริงใหม่
  3. ในกล่องโต้ตอบทรัพยากรค่าสตริงใหม่ ให้ตั้งค่าช่องชื่อทรัพยากรเป็น name ตั้งค่าช่อง Value value เป็นชื่อของคุณเอง คลิก OK โปรดสังเกตว่าคําเตือนนี้หายไป


  4. เปิดไฟล์ res/values/strings.xml แล้วมองหาทรัพยากรสตริงที่สร้างใหม่ชื่อ name
<string name="name">Aleks Haecky</string>

ขั้นตอนที่ 3: สร้างทรัพยากรมิติข้อมูล

คุณเพิ่งเพิ่มทรัพยากรโดยใช้เครื่องมือแก้ไขทรัพยากร นอกจากนี้ คุณสามารถแยกทรัพยากรในตัวแก้ไขโค้ด XML เพื่อสร้างทรัพยากรใหม่ได้ด้วย:

  1. ในไฟล์ activity_main.xml ให้เปลี่ยนเป็นแท็บข้อความ
  2. ในบรรทัด textSize คลิกที่หมายเลข (20sp) และพิมพ์ Alt+Enter (Option+Enter บน Mac) เลือกแยกทรัพยากรมิติข้อมูลจากเมนูป๊อปอัป
  3. ในกล่องโต้ตอบแยกทรัพยากร ให้ป้อน text_size ในช่องชื่อทรัพยากร คลิกตกลง


  4. เปิดไฟล์ res/values/dimens.xml เพื่อดูโค้ดที่สร้างต่อไปนี้
<dimen name="text_size">20sp</dimen>
  1. เปิดไฟล์ MainActivity.kt แล้วมองหาโค้ดต่อไปนี้ที่ส่วนท้ายของฟังก์ชัน onCreate() 
setContentView(R.layout.activity_main)

ฟังก์ชัน setContentView() จะเชื่อมต่อไฟล์เลย์เอาต์กับ Activity ไฟล์ทรัพยากรเลย์เอาต์ที่ระบุคือ R.layout.activity_main

  • R เป็นการอ้างอิงไปยังทรัพยากร ชั้นเรียนที่สร้างขึ้นโดยอัตโนมัติจะมีคําจํากัดความสําหรับทรัพยากรทั้งหมดในแอป
  • layout.activity_main ระบุว่าทรัพยากรเป็นเลย์เอาต์ชื่อ activity_main
  1. เรียกใช้แอป ระบบจะแสดง TextView พร้อมชื่อของคุณ

เมื่อคุณดูหน้าจอแอป ระบบจะพุชชื่อไปที่ด้านบนของหน้าจอ ดังนั้นคุณจึงเพิ่มระยะห่างจากขอบและมีระยะห่างจากขอบแล้ว

ระยะห่างจากขอบกับขอบ

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

ขนาดที่เห็นได้จะมีระยะห่างจากขอบ ต่อไปนี้คือแอตทริบิวต์ระยะห่างจากขอบที่ใช้กันทั่วไป

  • android:padding จะระบุระยะห่างจากขอบทั้ง 4 ด้านของมุมมอง
  • android:paddingTop ระบุระยะห่างจากขอบสําหรับขอบด้านบน
  • android:paddingBottom ระบุระยะห่างจากขอบด้านล่าง
  • android:paddingStart ระบุระยะห่างจากขอบสําหรับ "starting" ขอบมุมมอง
  • android:paddingEnd ระบุระยะห่างจากขอบสําหรับ "ending" ขอบมุมมอง
  • android:paddingLeft ระบุระยะห่างจากขอบสําหรับขอบด้านซ้าย
  • android:paddingRight ระบุระยะห่างจากขอบด้านขวา

Margin คือพื้นที่นอกเส้นขอบของมุมมอง #39 ซึ่งเป็นพื้นที่จากขอบของมุมมองถึงระดับบนสุด ดังที่แสดงในภาพด้านบน ต่อไปนี้เป็นแอตทริบิวต์อัตรากําไรที่ใช้กันทั่วไป

  • android:layout_margin ระบุอัตรากําไรของทั้ง 4 ด้านของมุมมอง
  • android:layout_marginBottom ระบุพื้นที่ว่างนอกด้านล่างของมุมมองนี้
  • android:layout_marginStart ระบุพื้นที่นอกด้าน "starting" ของมุมมองนี้
  • android:layout_marginEnd ระบุพื้นที่ว่างที่ส่วนท้ายของมุมมองนี้
  • android:layout_marginLeft ระบุพื้นที่ทางด้านซ้ายของมุมมองนี้
  • android:layout_marginRight ระบุพื้นที่ทางด้านขวาของมุมมองนี้

ขั้นตอนที่ 1: เพิ่มระยะห่างจากขอบ

หากต้องการเพิ่มระยะห่างระหว่างชื่อและขอบด้านบนของมุมมองข้อความ name ให้เพิ่มระยะห่างจากขอบด้านบน

  1. เปิดไฟล์ activity_main.xml ในแท็บการออกแบบ
  2. ในโครงสร้างคอมโพเนนต์หรือในตัวแก้ไขดีไซน์ ให้คลิกมุมมองข้อความเพื่อเปิดแผงแอตทริบิวต์
  3. ที่ด้านบนของแผงแอตทริบิวต์ ให้คลิกไอคอนลูกศรคู่ เพื่อดูแอตทริบิวต์ที่ใช้ได้ทั้งหมด
  4. ค้นหาระยะห่างจากขอบ ขยายส่วนนั้น แล้วคลิกจุด 3 จุด ... ข้างแอตทริบิวต์ด้านบน กล่องโต้ตอบทรัพยากรจะปรากฏขึ้น
  5. ในกล่องโต้ตอบทรัพยากร ให้เลือกเพิ่มทรัพยากรใหม่ > ค่า Dimen ใหม่
  6. ในกล่องโต้ตอบทรัพยากรค่ามิติข้อมูลใหม่ ให้สร้างทรัพยากร dimen ใหม่ที่ชื่อว่า small_padding ที่มีค่าเป็น 8dp

    ตัวย่อของ dp ย่อมาจาก density-indอิสระ หากต้องการให้องค์ประกอบ UI มีขนาดเท่ากันบนหน้าจอที่มีความหนาแน่นต่างกัน ให้ใช้ dp เป็นหน่วยการวัด แต่เมื่อระบุขนาดข้อความ ให้ใช้ sp (พิกเซลที่ปรับขนาดได้) เสมอ
  7. คลิกตกลง

ขั้นตอนที่ 2: เพิ่มขอบ

หากต้องการย้ายมุมมองข้อความ name ออกจากขอบขององค์ประกอบระดับบนสุด ให้เพิ่มระยะขอบบน

  1. ในแผงแอตทริบิวต์ ให้ค้นหา "ฟื้นตัว&เครื่องหมายคําพูด เพื่อค้นหา Layout_Margin
  2. ขยาย Layout_Margin แล้วคลิกจุด 3 จุด ... ข้างแอตทริบิวต์ด้านบน
  3. สร้างทรัพยากร dimen ใหม่ที่ชื่อ layout_margin แล้วกําหนดให้เป็น 16dp คลิก OK

ขั้นตอนที่ 3: เพิ่มแบบอักษร

หากต้องการให้แบบอักษรของมุมมอง name สวยงามขึ้น ให้ใช้แบบอักษร Android Roboto แบบอักษรนี้เป็นส่วนหนึ่งของไลบรารีการสนับสนุน และคุณเพิ่มแบบอักษรเป็นทรัพยากร

  1. ในแผงแอตทริบิวต์ ให้ค้นหา "fontFamily"
  2. ในช่อง fontFamily ให้คลิกลูกศรแบบเลื่อนลง จากนั้นเลื่อนไปที่ด้านล่างของรายการ แล้วเลือกแบบอักษรเพิ่มเติม
  3. ในกล่องโต้ตอบ Resources ให้ค้นหา rob และเลือก Roboto ในรายการตัวอย่าง ให้เลือกปกติ
  4. เลือกปุ่มตัวเลือกเพิ่มแบบอักษรในโครงการ
  5. คลิกตกลง

ขณะนี้โฟลเดอร์ res มีโฟลเดอร์ font ที่มีไฟล์แบบอักษร roboto.ttf เพิ่มแอตทริบิวต์ @font/roboto ไปยัง TextView แล้ว

ขั้นตอนที่ 4: ดึงรูปแบบ

รูปแบบคือคอลเล็กชันแอตทริบิวต์ที่ระบุลักษณะและรูปแบบของข้อมูลพร็อพเพอร์ตี้ สไตล์ประกอบด้วยสีแบบอักษร ขนาดแบบอักษร สีพื้นหลัง ระยะห่างจากขอบ แอตทริบิวต์ทั่วไป และแอตทริบิวต์อื่นๆ ได้

คุณสามารถดึงการจัดรูปแบบข้อความในมุมมอง name&#39 ลงในรูปแบบหนึ่ง แล้วนําสไตล์นั้นกลับมาใช้ซ้ําสําหรับจํานวนการดูกี่รายการก็ได้ในแอป การใช้รูปแบบซ้ําจะทําให้แอปมีความสม่ําเสมอเมื่อคุณมีการดูหลายรายการ การใช้รูปแบบยังช่วยให้คุณเก็บแอตทริบิวต์ทั่วไปเหล่านี้ไว้ในที่เดียวได้

  1. คลิกขวาที่ TextView ในแผนผังคอมโพเนนต์ แล้วเลือก Rector > Style Style
  2. ในกล่องโต้ตอบแยกสไตล์ Android ให้ล้างช่องทําเครื่องหมาย layout_width ช่องทําเครื่องหมาย layout_height และช่องทําเครื่องหมาย textAlignment แอตทริบิวต์เหล่านี้มักแตกต่างกันไปตามข้อมูลพร็อพเพอร์ตี้แต่ละรายการ คุณจึงไม่ต้องการให้แอตทริบิวต์เหล่านี้เป็นส่วนหนึ่งของสไตล์
  3. ป้อน NameStyle ในช่องชื่อสไตล์
  4. คลิกตกลง


  5. รูปแบบเป็นทรัพยากรได้ด้วย ดังนั้นระบบจะบันทึกสไตล์ไว้ในโฟลเดอร์ res/values/ ในไฟล์ styles.xml เปิด styles.xml และตรวจสอบโค้ดที่สร้างขึ้นสําหรับสไตล์ NameStyle ซึ่งจะมีลักษณะคล้ายกับตัวอย่างนี้
<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>
  1. เปิด activity_main.xml แล้วเปลี่ยนเป็นแท็บข้อความ โปรดสังเกตว่ามีการใช้รูปแบบที่สร้างขึ้นในมุมมองข้อความเป็น style="@style/NameStyle"
  2. เรียกใช้แอปและดูการเปลี่ยนแปลงของแบบอักษรและระยะห่างจากขอบรอบๆ TextView

แอป Android ในชีวิตจริงส่วนใหญ่ประกอบด้วยมุมมองต่างๆ ร่วมกันเพื่อแสดงรูปภาพ ข้อความที่แสดง และยอมรับอินพุตจากผู้ใช้ในรูปแบบข้อความหรือเหตุการณ์คลิก ในงานนี้ คุณจะได้เพิ่มมุมมองเพื่อแสดงรูปภาพ

ImageView คือมุมมองสําหรับแสดงทรัพยากรรูปภาพ ตัวอย่างเช่น ImageView สามารถแสดงทรัพยากรของ Bitmap เช่น PNG, JPG, GIF หรือ WebP หรือจะแสดงทรัพยากร Drawable เช่น ภาพวาดเวกเตอร์

มีแหล่งข้อมูลรูปภาพที่มาพร้อมกับ Android เช่น ไอคอนตัวอย่าง รูปโปรไฟล์ และพื้นหลัง คุณเพิ่มทรัพยากรเหล่านี้ลงในแอปได้

  1. แสดงไฟล์เลย์เอาต์ในแท็บการออกแบบ จากนั้นลาก ImageView จากแผงชุดสีลงมาด้านล่าง name_text ในแผนผังคอมโพเนนต์ กล่องโต้ตอบทรัพยากรจะเปิดขึ้น
  2. เลือกวาดเขียนได้หากยังไม่ได้เลือก
  3. ขยาย android แล้วเลื่อนแล้วเลือก btn_star_big_on เป็นดาวสีเหลือง
  4. คลิกตกลง



    ระบบจะเพิ่มรูปภาพดาวลงในเลย์เอาต์ด้านล่างชื่อ เนื่องจากคุณมี LinearLayout แนวตั้ง มุมมองที่คุณเพิ่มจะอยู่ในแนวตั้ง

  5. เปลี่ยนไปที่แท็บข้อความและดูโค้ด ImageView ที่สร้างขึ้น ความกว้างจะตั้งค่าเป็น match_parent ดังนั้นมุมมองจะกว้างเท่ากับองค์ประกอบระดับบน มีการตั้งความสูงเป็น wrap_content มุมมองจึงจะสูงเท่ากับเนื้อหา ImageView อ้างอิงภาพวาดของ btn_star_big_on
<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />
  1. หากต้องการเปลี่ยนชื่อ id ของ ImageView ให้คลิกขวาที่ "@+id/imageView" แล้วเลือกเปลี่ยนปัจจัย > เปลี่ยนชื่อ
  2. ในกล่องโต้ตอบเปลี่ยนชื่อ ให้ตั้งค่า id เป็น @+id/star_image คลิกเปลี่ยนโครงสร้าง


  1. ในแท็บการออกแบบในแผนผังคอมโพเนนต์ ให้คลิกไอคอนคําเตือน ข้าง star_image คําเตือนนี้ยังไม่มี contentDescription ซึ่งโปรแกรมอ่านหน้าจอใช้เพื่ออธิบายรูปภาพให้กับผู้ใช้
  2. ในแผงแอตทริบิวต์ ให้คลิกจุด 3 จุด ... ข้างแอตทริบิวต์ contentDescription กล่องโต้ตอบทรัพยากรจะเปิดขึ้น
  3. ในกล่องโต้ตอบทรัพยากร ให้เลือกเพิ่มทรัพยากรใหม่ > ค่าสตริงใหม่ ตั้งค่าช่องชื่อทรัพยากรเป็น yellow_star และตั้งค่าช่องค่าทรัพยากรเป็น Yellow star คลิก OK
  4. ใช้แผงแอตทริบิวต์เพื่อเพิ่มระยะขอบบนของ 16dp (ซึ่งก็คือ @dimen/layout_margin) ใน yellow_star เพื่อแยกภาพดาวออกจากชื่อ
  5. เรียกใช้แอป ชื่อและรูปดาวจะแสดงใน UI ของแอป

ScrollView คือกลุ่มข้อมูลพร็อพเพอร์ตี้ที่ช่วยให้ระบบเลื่อนลําดับชั้นของมุมมองที่อยู่ในค่าดังกล่าวได้ มุมมองการเลื่อนสามารถมีมุมมองอื่นได้เพียง 1 มุมมอง หรือดูเป็นกลุ่มย่อยก็ได้ มุมมองย่อยมักเป็น LinearLayout คุณสามารถเพิ่มมุมมองอื่นๆ ภายใน LinearLayout

รูปภาพต่อไปนี้แสดงตัวอย่างของ ScrollView ที่มี LinearLayout ซึ่งมีข้อมูลพร็อพเพอร์ตี้อื่นๆ หลายรายการ

มุมมองการเลื่อนนี้มีเลย์เอาต์เชิงเส้นที่มีมุมมองอื่นๆ หลายรายการ

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

ScrollView นี้มี TextView รายการเดียว

ขั้นตอนที่ 1: เพิ่ม ScrollView ที่มี TextView

  1. เปิดไฟล์ activity_main.xml ในแท็บการออกแบบ
  2. ลากมุมมองการเลื่อนลงในเลย์เอาต์โดยลากลงในตัวแก้ไขดีไซน์หรือในแผนผังคอมโพเนนต์ วางมุมมองการเลื่อนใต้รูปภาพดาว
  3. เปลี่ยนไปที่แท็บข้อความเพื่อตรวจสอบโค้ดที่สร้างขึ้น
// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

ความสูงและความกว้างของ ScrollView จะตรงกับองค์ประกอบระดับบนสุด เมื่อมุมมองข้อความ name_text และมุมมองภาพ star_image ใช้พื้นที่แนวตั้งเพียงพอที่จะแสดงเนื้อหาของตัวเอง ระบบ Android จะวาง ScrollView เพื่อเติมพื้นที่ว่างที่เหลือบนหน้าจอ

  1. เพิ่ม id ไปยัง ScrollView และตั้งชื่อว่า bio_scroll การเพิ่ม id ลงใน ScrollView จะทําให้ระบบของ Android แฮนเดิลสําหรับมุมมอง ซึ่งเมื่อผู้ใช้หมุนอุปกรณ์ ระบบจะคงตําแหน่งการเลื่อนไว้
  2. ภายใน ScrollView ให้นําโค้ด LinearLayout ออกเพราะแอปจะดูข้อมูลได้เพียง 1 รายการที่เลื่อนได้ นั่นคือ TextView
  3. ลาก TextView จากจานสีไปยังแผนผังคอมโพเนนต์ วาง TextView ใต้ bio_scroll เป็นองค์ประกอบย่อยของ bio_scroll

  4. ตั้งค่า id ของมุมมองข้อความใหม่เป็น bio_text
  5. ถัดไป คุณสามารถเพิ่มสไตล์ของมุมมองข้อความใหม่ ในแผงแอตทริบิวต์ ให้คลิกจุด 3 จุด ... ข้างแอตทริบิวต์รูปแบบเพื่อเปิดกล่องโต้ตอบทรัพยากร
  6. ในกล่องโต้ตอบ Resources ให้ค้นหา NameStyle เลือก NameStyle จากรายการ แล้วคลิกตกลง มุมมองข้อความจะใช้รูปแบบ NameStyle ที่คุณสร้างในงานก่อนหน้า

ขั้นตอนที่ 2: เพิ่มชีวประวัติใน TextView ใหม่

  1. เปิด strings.xml สร้างทรัพยากรสตริงชื่อ bio และใส่ข้อความสั้นๆ เกี่ยวกับตัวคุณ หรืออะไรก็ได้ที่ต้องการ

ตัวอย่างชีวประวัติมีดังนี้ 

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>
  1. ในมุมมองข้อความ bio_text ให้กําหนดค่าของแอตทริบิวต์ text เป็นทรัพยากรสตริง bio ที่มีชีวประวัติ
  2. เพื่อให้ข้อความ bio_text อ่านได้ง่ายขึ้น ให้เพิ่มระยะห่างระหว่างบรรทัด ใช้แอตทริบิวต์ lineSpacingMultiplier และระบุค่าเป็น 1.2



    สังเกตว่าในตัวแก้ไขดีไซน์จะใช้ข้อความ bio ไปจนถึงขอบด้านข้างของหน้าจอ หากต้องการแก้ไขปัญหานี้ คุณสามารถเพิ่มแอตทริบิวต์ด้านซ้าย เริ่มต้น ด้านขวา และสิ้นสุดระยะห่างจากขอบไปยังราก LinearLayout ทั้งนี้ คุณไม่จําเป็นต้องเพิ่มระยะห่างจากขอบล่างเนื่องจากข้อความที่ย้ายไปถึงสัญญาณด้านล่างถึงผู้ใช้ว่าเลื่อนข้อความได้
  3. เพิ่มระยะห่างจากขอบเริ่มต้นและจุดสิ้นสุดของ 16dp ในรูท LinearLayout
  4. เปลี่ยนไปที่แท็บข้อความ ดึงข้อมูลทรัพยากรมิติข้อมูล และตั้งชื่อเป็น layout_padding

  1. เรียกใช้แอปและเลื่อนดูข้อความ

ยินดีด้วย

คุณได้สร้างแอปที่สมบูรณ์ตั้งแต่ต้นแล้ว และมันดูดีมากเลย

โปรเจ็กต์ Android Studio: AboutMe

ใน ScrollView ให้เพิ่ม ImageView เหนือ TextView เมื่อคุณเรียกใช้แอป ภาพนี้จะแตกต่างจากดาวที่จะเลื่อนออกจากมุมมองในขณะที่ข้อความเลื่อนขึ้น

คําแนะนํา: มุมมองการเลื่อนมีมุมมองย่อยได้เพียง 1 รายการเท่านั้น คุณต้องรวมมุมมองที่เลื่อนได้ 2 มุมมอง ได้แก่ ImageView และ TextView ลงใน LinearLayout

  • ViewGroup คือมุมมองที่อาจมีมุมมองอื่นๆ LinearLayout และ ScrollView เป็นกลุ่มการดู
  • LinearLayout คือกลุ่มข้อมูลพร็อพเพอร์ตี้ที่จัดการมุมมองของบุตรหลานในแนวนอนหรือแนวตั้ง
  • ใช้ ScrollView เมื่อคุณต้องการแสดงเนื้อหาบนหน้าจอ เช่น ข้อความขนาดยาวหรือคอลเล็กชันรูปภาพ มุมมองการเลื่อนมีมุมมองย่อยได้เพียงข้อมูลเดียว หากต้องการเลื่อนข้อมูลพร็อพเพอร์ตี้มากกว่า 1 รายการ ให้เพิ่ม ViewGroup เช่น LinearLayout ลงใน ScrollView และใส่ข้อมูลพร็อพเพอร์ตี้ที่ต้องการเลื่อนดูภายใน ViewGroup
  • เครื่องมือแก้ไขเลย์เอาต์เป็นตัวแก้ไขดีไซน์ภาพภายใน Android Studio คุณใช้ตัวแก้ไขเลย์เอาต์เพื่อสร้างเลย์เอาต์ของแอปได้โดยลากองค์ประกอบ UI ลงในเลย์เอาต์
  • รูปแบบคือคอลเล็กชันของแอตทริบิวต์ที่ระบุลักษณะที่ปรากฏของข้อมูลพร็อพเพอร์ตี้ ตัวอย่างเช่น รูปแบบสามารถระบุสีแบบอักษร ขนาดแบบอักษร สีพื้นหลัง ระยะห่างจากขอบ และขอบ
  • คุณสามารถดึงและรวบรวมการจัดรูปแบบทั้งหมดของมุมมองให้เป็นรูปแบบได้ หากต้องการให้แอปมีรูปลักษณ์ที่สอดคล้องกัน ให้ใช้รูปแบบที่มีมุมมองอื่นๆ ซ้ํา

หลักสูตร Udacity:

เอกสารประกอบสําหรับนักพัฒนาซอฟต์แวร์ Android

ส่วนนี้จะอธิบายการบ้านและรายงานสําหรับนักเรียนที่ทํางานผ่าน Codelab นี้ซึ่งเป็นส่วนหนึ่งของหลักสูตรที่นําโดยผู้สอน สิ่งที่ผู้สอนต้องทํามีดังนี้

  • มอบหมายการบ้านหากจําเป็น
  • สื่อสารกับนักเรียนเกี่ยวกับวิธีส่งงานทําการบ้าน
  • ตัดเกรดการบ้าน

ผู้สอนจะใช้คําแนะนําเหล่านี้เท่าใดก็ได้หรือตามที่ต้องการก็ได้ และสามารถกําหนดให้การบ้านอื่นๆ ที่ตนคิดว่าเหมาะสมได้

หากคุณใช้ Codelab ด้วยตัวเอง ก็ให้ใช้การบ้านเพื่อทดสอบความรู้ของคุณได้

ตอบคําถามเหล่านี้

คำถามที่ 1

ข้อใดต่อไปนี้เป็นกลุ่มการดู

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

คำถามที่ 2

ลําดับชั้นของการดูใดต่อไปนี้ไม่ถูกต้อง

▢ LinearLayout > TextView, TextView, ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

คำถามที่ 3

รูปแบบคือทรัพยากรที่กําหนดไว้ใน styles.xml คุณสามารถใช้รูปแบบเพื่อกําหนดสี แบบอักษร ขนาดข้อความ และลักษณะอื่นๆ ของข้อมูลพร็อพเพอร์ตี้ได้ จริงหรือเท็จ

▢ จริง

▢ เท็จ

คำถามที่ 4

ScrollView คือกลุ่มการดูที่อาจประกอบด้วยยอดดูกี่กลุ่มก็ได้ จริงหรือเท็จ

▢ จริง

▢ เท็จ

คำถามที่ 5

องค์ประกอบใดของ UI ที่ใช้แสดงรูปภาพในแอปได้

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

เริ่มบทเรียนถัดไป: 2.2: เพิ่มการโต้ตอบของผู้ใช้

สําหรับลิงก์ไปยัง Codelab อื่นๆ ในหลักสูตรนี้ โปรดดูหน้า Landing Page ของ Codelab ของ Android Kotlin Fundamentals