สร้างแอปการ์ดวันเกิด

ใน Codelab นี้ คุณจะต้องสร้างแอป Android แบบง่ายที่แสดงข้อความ คุณจัดตําแหน่งข้อความในหน้าจอได้โดยทําความเข้าใจเพิ่มเติมเกี่ยวกับคอมโพเนนต์อินเทอร์เฟซผู้ใช้ (UI) ใน Android

สิ่งที่ต้องมีก่อน

  • วิธีสร้างแอปใหม่ใน Android Studio
  • วิธีเรียกใช้โปรแกรมจําลองหรือในอุปกรณ์ Android

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

  • องค์ประกอบอินเทอร์เฟซผู้ใช้ เช่น Views และ ViewGroups
  • วิธีแสดงข้อความใน TextView ในแอป
  • วิธีตั้งค่าแอตทริบิวต์ เช่น ข้อความ แบบอักษร และระยะขอบใน TextView

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

  • แอป Android ที่แสดงคําทักทายวันเกิดในรูปแบบข้อความ

แอปของคุณจะมีลักษณะดังนี้เมื่อเสร็จ

สิ่งที่ต้องมี

  • คอมพิวเตอร์ที่ติดตั้ง Android Studio

สร้างโปรเจ็กต์กิจกรรมที่ว่างเปล่า

  1. หากต้องการเริ่มต้น ให้สร้างโปรเจ็กต์ Kotlin ใหม่ใน Android Studio โดยใช้เทมเพลตกิจกรรมเปล่า
  2. เรียกใช้แอป "Happy Birthday" โดยมีระดับ API ขั้นต่ําที่ 19 (KitKat)

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

  1. เรียกใช้แอป แอปควรมีลักษณะดังนี้ภาพหน้าจอด้านล่าง

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

เกี่ยวกับอินเทอร์เฟซผู้ใช้

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

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

ใน Codelab นี้ คุณจะต้องทํางานร่วมกับ View ประเภทหนึ่งที่ใช้แสดงข้อความและเรียกว่า TextView

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

ViewGroup ประเภทหนึ่งคือ ConstraintLayout ซึ่งช่วยให้คุณจัดเรียง Views ได้อย่างยืดหยุ่น

เกี่ยวกับเครื่องมือแก้ไขเลย์เอาต์

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

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

  • ทางด้านซ้าย (1) คือหน้าต่างโปรเจ็กต์ที่คุณเคยเห็นมาก่อน โดยจะแสดงรายการไฟล์ทั้งหมดในเครื่อง
  • ที่ตรงกลาง คุณจะเห็นภาพวาด 2 ภาพ (4) และ (5) ที่แทนเลย์เอาต์หน้าจอของแอป ภาพด้านซ้าย (4) เป็นค่าประมาณที่ใกล้เคียงว่าหน้าจอจะมีลักษณะอย่างไรเมื่อแอปทํางาน ซึ่งเรียกว่ามุมมอง การออกแบบ
  • งานนําเสนอทางด้านขวา (5) คือมุมมอง Blueprint ซึ่งมีประโยชน์สําหรับการดําเนินการที่เฉพาะเจาะจง
  • ชุดสี (2) มีรายการ Views ประเภทต่างๆ ที่คุณเพิ่มลงในแอปได้
  • แผนผังคอมโพเนนต์ (3) เป็นการนําเสนอมุมมองต่างๆ ของหน้าจอ โดยจะแสดงมุมมองทั้งหมดของหน้าจอ
  • ด้านขวาสุด (6) คือแอตทริบิวต์ โดยจะแสดงแอตทริบิวต์ของ View เพื่อให้คุณเปลี่ยนแปลงแอตทริบิวต์ได้

อ่านเพิ่มเติมเกี่ยวกับเครื่องมือแก้ไขเลย์เอาต์และวิธีกําหนดค่าในคู่มืออ้างอิงสําหรับนักพัฒนาซอฟต์แวร์

ภาพหน้าจอที่มีคําอธิบายประกอบของเครื่องมือแก้ไขเลย์เอาต์ทั้งหมด

มาทําการเปลี่ยนแปลงบางอย่างในเครื่องมือแก้ไขเลย์เอาต์ เพื่อทําให้แอปของคุณเหมือนการ์ดวันเกิดมากขึ้นกัน

เปลี่ยนข้อความ Hello World

  1. ใน Android Studio มองหาหน้าต่างโปรเจ็กต์ทางด้านซ้าย
  2. โปรดจดบันทึกข้อมูลเกี่ยวกับโฟลเดอร์และไฟล์เหล่านี้ โฟลเดอร์แอปประกอบด้วยไฟล์ส่วนใหญ่ของแอปที่คุณจะเปลี่ยน โฟลเดอร์ res มีไว้สําหรับทรัพยากร เช่น รูปภาพหรือเลย์เอาต์หน้าจอ โฟลเดอร์ layout มีไว้สําหรับเลย์เอาต์หน้าจอ ไฟล์ activity_main.xml มีคําอธิบายของเลย์เอาต์หน้าจอ
  3. ขยายโฟลเดอร์ app แล้วขยายโฟลเดอร์ res แล้วขยายโฟลเดอร์ layout
  4. ดับเบิลคลิกที่ activity_main.xml
    การดําเนินการนี้จะเปิด activity_main.xml ในตัวแก้ไขเลย์เอาต์และแสดงเลย์เอาต์ที่อธิบายในมุมมองการออกแบบ
  1. ดูรายการมุมมองในแผนผังคอมโพเนนต์ โปรดสังเกตว่ามี ConstraintLayout และ TextView อยู่ด้านล่าง
    ข้อมูลเหล่านี้หมายถึง UI ของแอป โดยมีการเยื้อง TextView ไว้เนื่องจากอยู่ภายใน ConstraintLayout เมื่อเพิ่ม Views ไปยัง ConstraintLayout ระบบจะเพิ่มบุคคลดังกล่าวลงในรายการนี้
  2. สังเกตว่า TextView มี " Hello World!" อยู่ด้านข้าง (ซึ่งเป็นข้อความที่คุณเห็นเมื่อเรียกใช้แอป
  3. ในโครงสร้างคอมโพเนนต์ ให้คลิก TextView
  4. ค้นหาแอตทริบิวต์ที่ด้านขวา
  5. ค้นหาส่วนแอตทริบิวต์ที่ประกาศ
  6. โปรดสังเกตว่าแอตทริบิวต์ text ในส่วนแอตทริบิวต์ที่ประกาศ ประกอบด้วย สวัสดีโลก

แอตทริบิวต์ text จะแสดงข้อความที่พิมพ์ภายใน TextView

  1. คลิกแอตทริบิวต์ text ซึ่งมีข้อความ Hello World!
  2. เปลี่ยนเป็นสุขสันต์วันเกิด! แล้วกดปุ่ม Enter หากเห็นคําเตือนเกี่ยวกับสตริงแบบฮาร์ดโค้ด อย่าเพิ่งกังวลในตอนนี้ คุณจะได้เรียนรู้วิธีกําจัดคําเตือนนั้นใน Codelab ถัดไป
  3. โปรดสังเกตว่าข้อความมีการเปลี่ยนแปลงในมุมมองการออกแบบ...(เยี่ยมไปเลย คุณจะเห็นการเปลี่ยนแปลงได้ทันที)
  4. เรียกใช้แอป แล้วตอนนี้จะเขียนว่า สุขสันต์วันเกิด

เยี่ยมไปเลย คุณทําการเปลี่ยนแปลงแอป Android เป็นครั้งแรก

การ์ดวันเกิดที่คุณกําลังสร้างดูแตกต่างจากในแอปในปัจจุบัน แทนที่จะต้องใช้ข้อความเล็กๆ ตรงกลาง คุณต้องใส่ข้อความขนาดใหญ่กว่า 2 ข้อความ โดยข้อความหนึ่งจะอยู่ที่ด้านซ้ายบนและอีกครั้งหนึ่งที่มุมล่างขวา ในงานนี้ คุณจะลบ TextView ที่มีอยู่และเพิ่ม TextViews ใหม่ 2 รายการ และดูวิธีกําหนดตําแหน่งภายใน ConstraintLayout

ลบ TextView ปัจจุบัน

  1. ในเครื่องมือแก้ไขเลย์เอาต์ ให้คลิกเพื่อเลือก TextView ที่ตรงกลางของเลย์เอาต์
  2. กดปุ่ม Delete
    Android Studio ลบ TextView และแอปของคุณจะแสดงเฉพาะ ConstraintLayout ใน Editor Editor และ Component Tree

เพิ่ม TextView

ในขั้นตอนนี้ คุณจะเพิ่ม TextView ที่ด้านซ้ายบนของแอปเพื่ออวยพรวันเกิด

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

  1. หา TextView ซึ่งจะปรากฏทั้งในหมวดหมู่ทั่วไปและในหมวดหมู่ข้อความ
  2. ลาก TextView จากจานสีไปทางด้านซ้ายบนของพื้นผิวการออกแบบในเครื่องมือแก้ไขเลย์เอาต์ แล้ววาง

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

จัดตําแหน่ง TextView

สําหรับการ์ดวันเกิด TextView ต้องอยู่ใกล้กับมุมบนซ้ายโดยมีพื้นที่ว่างรอบๆ หากต้องการแก้ไขคําเตือน ให้เพิ่มข้อจํากัดลงใน TextView ซึ่งจะบอกวิธีจัดตําแหน่งแอป ข้อจํากัดคือทิศทางและข้อจํากัดเกี่ยวกับตําแหน่งของ View ในเลย์เอาต์

ข้อจํากัดที่คุณเพิ่มด้านบนและด้านซ้ายจะมีระยะขอบ ระยะขอบจะระบุระยะห่างของ View จากขอบของคอนเทนเนอร์

  1. ในแอตทริบิวต์ทางด้านขวา ให้หาวิดเจ็ตข้อจํากัดในส่วนเลย์เอาต์ สี่เหลี่ยมจัตุรัสนี้แสดงมุมมองของคุณ
  2. คลิก + ที่ด้านบนของสี่เหลี่ยมจัตุรัส สําหรับข้อจํากัดระหว่างด้านบนของมุมมองข้อความและขอบด้านบนของเลย์เอาต์ข้อจํากัด
  3. ช่องที่มีตัวเลขจะปรากฏขึ้นสําหรับการตั้งค่าระยะขอบบน ระยะขอบคือระยะทางจาก TextView ไปยังขอบของคอนเทนเนอร์ ConstraintLayout ตัวเลขที่คุณเห็นจะแตกต่างกันไปตามตําแหน่งที่คุณวาง TextView เมื่อคุณกําหนดระยะขอบบนแล้ว Android Studio ยังเพิ่มข้อจํากัดจากด้านบนของมุมมองข้อความไว้ที่ด้านบนของ ConstrainLayout โดยอัตโนมัติด้วย
  4. เปลี่ยนระยะขอบบนเป็น 16
  1. ให้ทําแบบเดียวกันนี้สําหรับขอบซ้าย
  2. ตั้งค่าข้อความเพื่ออวยพรวันเกิดอย่างเพื่อน เช่น "Happy Birthday, Sam!" แล้วกด Enter
  3. โปรดสังเกตว่ามุมมองการออกแบบจะอัปเดตเพื่อแสดงรูปลักษณ์ของแอปของคุณ

เพิ่มและจัดตําแหน่ง TextView อื่น

การ์ดวันเกิดต้องมีบรรทัดที่ 2 บริเวณมุมขวาล่าง ซึ่งจะเพิ่มในขั้นตอนนี้เช่นเดียวกับงานก่อนหน้า คุณคิดว่าอัตรากําไรของ TextView นี้ควรเป็นเท่าใด

  1. ลาก TextView ใหม่จากจานสีและวางไว้ที่ด้านขวาล่างของมุมมองแอปในเครื่องมือแก้ไขเลย์เอาต์
  2. ตั้งค่าระยะขอบที่เหมาะสมเป็น 16
  3. ตั้งค่าระยะขอบล่างเป็น 16
  4. ในแอตทริบิวต์ ให้ตั้งค่าแอตทริบิวต์ text เพื่อลงนามบัตร เช่น "From Emma."
  5. เรียกใช้แอป คุณจะเห็นวันเกิดวันเกิดที่ด้านซ้ายบนและลายเซ็นที่ด้านขวาล่าง

ยินดีด้วย คุณได้เพิ่มและจัดตําแหน่งองค์ประกอบ UI บางอย่างในแอปแล้ว

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

  1. คลิก TextView แรกในแผนผังคอมโพเนนต์ แล้วหาส่วนแอตทริบิวต์ทั่วไปของหน้าต่างแอตทริบิวต์ คุณอาจต้องเลื่อนหน้าจอลงจึงจะเห็นตัวเลือกนี้
  2. โปรดสังเกตว่าแอตทริบิวต์ต่างๆ ได้แก่ fontFamily, textSize และ textColor
  3. มองหา textShowingance
  4. หากระบบไม่ขยาย textShowingance ให้คลิกสามเหลี่ยมลง
  5. ตั้งค่า textSize เป็น 36sp
  1. คุณจะสังเกตเห็นการเปลี่ยนแปลงในเครื่องมือแก้ไขเลย์เอาต์
  2. เปลี่ยน fontFamily เป็น Casual
  3. ลองใช้แบบอักษรต่างๆ เพื่อดูว่ามีลักษณะอย่างไร นอกจากนี้ยังมีตัวเลือกแบบอักษรอีกมากมายที่ด้านล่างของรายการ ในส่วนแบบอักษรเพิ่มเติม...
  4. เมื่อลองใช้แบบอักษรต่างๆ เสร็จแล้ว ให้ตั้งค่า fontFamily เป็น sans-serif-light
  5. คลิกแอตทริบิวต์แก้ไข textColor&#39 แล้วเริ่มพิมพ์สีดํา
    สังเกตเห็นว่าเมื่อคุณพิมพ์ Android Studio จะแสดงรายการสีที่มีข้อความที่คุณพิมพ์ไปแล้ว
  6. เลือก @android:color/black จากรายการสีและกด Enter
  7. ใน TextView ที่มีลายเซ็นของคุณ ให้เปลี่ยน textSize, textColor และ fontFamily เพื่อจับคู่
  8. เรียกใช้แอปแล้วดูผลลัพธ์

ยินดีด้วย คุณได้ดําเนินการขั้นตอนแรกในการสร้างแอปการ์ดวันเกิดแล้ว
  • เครื่องมือแก้ไขเลย์เอาต์ช่วยให้คุณสร้าง UI สําหรับแอป Android ได้
  • เกือบทุกอย่างที่คุณเห็นบนหน้าจอของแอปคือ View
  • TextView เป็นองค์ประกอบ UI สําหรับแสดงข้อความในแอป
  • ConstraintLayout คือคอนเทนเนอร์สําหรับองค์ประกอบ UI อื่นๆ
  • Views ต้องจํากัดในแนวนอนและแนวตั้งภายใน ConstraintLayout
  • วิธีหนึ่งในการจัดตําแหน่ง View คืออัตรากําไร
  • ระยะขอบบอกว่า View อยู่ห่างจากขอบของคอนเทนเนอร์ไกลแค่ไหน
  • คุณจะตั้งค่าแอตทริบิวต์ใน TextView ได้ เช่น แบบอักษร ขนาดข้อความ และสี