เพิ่มรูปภาพลงในแอปการ์ดวันเกิด

ใน Codelab นี้ คุณจะได้ดูวิธีเพิ่มรูปภาพลงในแอปโดยใช้ ImageView

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

• วิธีสร้างและเรียกใช้แอปใหม่ใน Android Studio
• วิธีเพิ่มและนําออก และตั้งค่าแอตทริบิวต์ใน TextViews โดยใช้เครื่องมือแก้ไขเลย์เอาต์

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

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

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

• ขยายแอป สุขสันต์วันเกิดเพื่อเพิ่มรูปภาพ

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

• คอมพิวเตอร์ที่ติดตั้ง Android Studio
• แอปจาก "สร้างแอปวันเกิดการ์ด" codelab

1. เปิดโปรเจ็กต์จาก Codelab ก่อนหน้า สร้างแอปการ์ดวันเกิดใน Android Studio
   เมื่อเรียกใช้แอป โค้ดดังกล่าวควรมีลักษณะดังนี้
   

เพิ่มรูปภาพลงในโปรเจ็กต์

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

1. ไปที่เว็บไซต์นี้เพื่อค้นหารูปภาพสําหรับการ์ดวันเกิด
2. คลิกปุ่มดาวน์โหลดทางด้านขวา ซึ่งจะเป็นการแสดงรูปภาพด้วยตนเอง
   
3. คลิกขวาที่รูปภาพและบันทึกไฟล์ลงในคอมพิวเตอร์เป็น androidparty.jpg จดบันทึกสถานที่ที่คุณบันทึก (เช่น โฟลเดอร์ดาวน์โหลด)
4. ใน Android Studio ให้คลิก View > Tool Windows > Resource Manager ในเมนูหรือคลิกแท็บ Resource Manager ทางด้านซ้ายของหน้าต่าง Project
5. คลิก + ใต้ผู้จัดการทรัพยากร แล้วเลือกนําเข้าภาพวาด การดําเนินการนี้จะเปิดโปรแกรมเรียกดูไฟล์
   
6. ในเบราว์เซอร์ไฟล์ ให้หาไฟล์ภาพที่คุณดาวน์โหลด แล้วคลิกเปิด
7. คลิกถัดไป
   Android Studio จะแสดงตัวอย่างรูปภาพ
8. คลิกนำเข้า
9. หากนําเข้ารูปภาพเรียบร้อยแล้ว Android Studio จะเพิ่มรูปภาพดังกล่าวไปยังรายการ Drawable รายการนี้รวมรูปภาพและไอคอนทั้งหมดสําหรับแอป ตอนนี้คุณสามารถใช้รูปภาพนี้ในแอปได้แล้ว
   
10. เปลี่ยนกลับไปใช้มุมมองโปรเจ็กต์โดยคลิกมุมมอง > เครื่องมือ Windows &gt โปรเจ็กต์ ในเมนูหรือแท็บโปรเจ็กต์ทางด้านซ้ายสุด
11. ยืนยันว่ารูปภาพอยู่ในโฟลเดอร์ Drawable ของแอปโดยการขยาย app > res >Drawable
    

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

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

เพิ่ม ImageView และตั้งค่ารูปภาพ

1. ในหน้าต่างโปรเจ็กต์ ให้เปิด activity_main.xml ( app > res >Layout > activity_main.xml)

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

2. ในเครื่องมือแก้ไขเลย์เอาต์ ให้ไปที่ชุดสีแล้วลาก ImageView ไปยังแอป โปรดวางให้ใกล้กับจุดกึ่งกลางและไม่ซ้อนทับข้อความใดๆ

กล่องโต้ตอบเลือกทรัพยากรจะเปิดขึ้น กล่องโต้ตอบนี้แสดงรายการทรัพยากรรูปภาพทั้งหมดที่แอปมี สังเกตที่รูปภาพวันเกิดที่แสดงในแท็บวาดได้ ทรัพยากรที่วาดได้คือแนวคิดทั่วไปสําหรับกราฟิกที่วาดไปยังหน้าจอได้ ซึ่งรวมถึงรูปภาพ บิตแมป และไอคอน และแหล่งข้อมูลประเภทอื่นๆ ที่วาดไว้

3. ในกล่องโต้ตอบเลือกทรัพยากร ให้หารูปภาพเค้กในรายการ Drawable
4. คลิกรูปภาพ แล้วคลิกตกลง
   

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

จัดตําแหน่งและขนาด ImageView

1. คลิกและลาก ImageView ไปรอบๆ ในตัวแก้ไขเลย์เอาต์ และโปรดทราบว่าเมื่อคุณลาก สี่เหลี่ยมผืนผ้าสีชมพูจะปรากฏรอบหน้าจอแอปในมุมมองการออกแบบ รูปสี่เหลี่ยมผืนผ้าสีชมพูบ่งชี้ขอบเขตของหน้าจอสําหรับวางตําแหน่ง ImageView
2. วาง ImageView เพื่อให้ขอบด้านซ้ายและขวาสอดคล้องกับสี่เหลี่ยมผืนผ้าสีชมพู Android Studio จะ "สแนป" และเลื่อนรูปภาพไปยังขอบเมื่อคุณปิด (คุณจะดูแลด้านบนและด้านล่างในอีกสักครู่)
   

Views ใน ConstraintLayout ต้องมีข้อจํากัดทั้งแนวนอนและแนวตั้งเพื่อบอก ConstraintLayout วิธีการวางตําแหน่ง คุณจะใส่คําเหล่านี้ในลําดับต่อไป

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

1. วางเมาส์ไว้เหนือวงกลมด้านบนของโครงร่างของ ImageView และไฮไลต์ด้วยวงกลมอื่น
2. ลากวงกลมไปที่ด้านบนของหน้าจอแอป และลูกศรเชื่อมต่อวงกลมกับตัวชี้ขณะที่คุณลาก ลากจนกว่าจะสแนปไปที่ด้านบนของหน้าจอ คุณได้เพิ่มข้อจํากัดจากด้านบนของ ImageView ไปยังด้านบนของ ConstraintLayout แล้ว
   
   
3. เพิ่มข้อจํากัดจากด้านล่างของ ImageView ไปที่ด้านล่างของ ConstraintLayout

เคล็ดลับ: การเพิ่มข้อจํากัดอาจเป็นเรื่องยากเมื่อคุณเพิ่ม Views ในหน้าจอ หากเพิ่มข้อจํากัดลงใน View ที่ไม่ถูกต้อง คุณจะยกเลิกขั้นตอนดังกล่าวด้วย Control+Z (Command+Z ใน Mac) ได้ หรือคลิกขวาที่ View ซึ่งจะปรากฏขึ้นในเมนูและเลือกล้างข้อจํากัดด้านการเลือก ซึ่งจะนําข้อจํากัดทั้งหมดใน View นั้นออก

4. ในแผงแอตทริบิวต์ ให้ใช้วิดเจ็ตข้อจํากัดเพื่อเพิ่มระยะขอบ 0 ทางด้านซ้ายและทางขวา วิธีนี้จะสร้างข้อจํากัดในทิศทางดังกล่าวโดยอัตโนมัติ
   

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

1. ใต้วิดเจ็ตข้อจํากัดในส่วนข้อจํากัด ให้ตั้งค่า layout_width เป็น 0dp (ข้อจํากัดการจับคู่)
   0dp เป็นคําอธิบายสั้นๆ ที่จะบอกให้ Android Studio ใช้ข้อจํากัดการจับคู่สําหรับความกว้างของ ImageView "ข้อจํากัดข้อจํากัดหมายความว่า.... เนื่องจากข้อจํากัดที่คุณเพิ่งเพิ่ม ทําให้มีความกว้างเท่ากับ ConstraintLayout และลบระยะขอบ
   
2. กําหนด layout_height เป็น 0dp (ข้อจํากัดด้านการจับคู่)
   เนื่องจากข้อจํากัดที่คุณเพิ่ม ทําให้ ImageView สูงเท่ากับ ConstraintLayout ลบระยะขอบใดก็ได้
   
3. ImageView มีความกว้างและความสูงเท่ากับหน้าจอของแอป แต่รูปภาพอยู่กึ่งกลางภายใน ImageView และมีช่องว่างด้านบนและด้านล่างของรูปภาพ เนื่องจากภาพดูไม่น่าสนใจ คุณจึงต้องปรับ scaleType ของ ImageView ซึ่งระบุวิธีปรับขนาดและจัดตําแหน่งรูปภาพ อ่านเพิ่มเติมเกี่ยวกับ ScaleType ในคู่มือสําหรับนักพัฒนาซอฟต์แวร์ ตอนนี้แอปของคุณควรมีลักษณะดังที่แสดงด้านล่างนี้
   
4. ค้นหาแอตทริบิวต์ scaleType คุณอาจต้องเลื่อนลงหรือค้นหาแอตทริบิวต์นี้ ลองตั้งค่าต่างๆ สําหรับ scaleType เพื่อดูการทํางาน

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

5. เมื่อเสร็จแล้ว ให้ตั้งค่า scaleType เป็น centerCrop เพราะจะทําให้รูปภาพเติมเต็มหน้าจอโดยไม่บิดเบี้ยว

รูปภาพเค้กควรแสดงแบบเต็มหน้าจอ ดังที่แสดงด้านล่าง

แต่ตอนนี้ คุณจะไม่เห็นคําทักทายและลายเซ็นวันเกิดของคุณ ซึ่งคุณจะแก้ไขได้ในขั้นตอนถัดไป

ย้าย ImageView ไปไว้ด้านหลังข้อความ

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

1. ในแผนผังคอมโพเนนต์ ให้คลิก ImageView แล้วลากไปอยู่เหนือ TextViews ให้อยู่ใต้ ConstraintLayout เส้นสีน้ําเงินที่มีรูปสามเหลี่ยมจะปรากฏขึ้นในตําแหน่งที่ ImageView จะไปต่อ วาง ImageView ให้ห่างจาก ConstraintLayout
   
   

ตอนนี้ ImageView ควรอยู่อันดับแรกในรายการด้านล่าง ConstraintLayout โดยมี TextViews นําหน้า ทั้งข้อความ &คําอวยพรวันเกิด, คํากล่าว (ไม่ต้องสนใจคําเตือนสําหรับคําอธิบายเนื้อหาที่ขาดหายไปในตอนนี้)

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

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

1. เลือก TextView แรกโดยคลิกในแผนผังคอมโพเนนต์
2. ในแอตทริบิวต์ ให้คลิกแอตทริบิวต์ textColor และเริ่มพิมพ์สีขาว
   สังเกตเห็นว่าขณะที่พิมพ์ Android Studio จะแสดงรายการสีที่มีข้อความที่คุณพิมพ์อยู่
   
3. เลือก @android:color/white จากรายการสีและกด Enter Android กําหนดสีจํานวนหนึ่งเพื่อให้คุณใช้สีต่างๆ ได้อย่างสอดคล้องกันในส่วนต่างๆ ของแอป
4. ทําแบบเดียวกับTextViewอื่น
5. เรียกใช้แอปและสังเกตว่าข้อความอ่านได้ง่ายขึ้นแล้ว
   

ยินดีด้วย คุณได้เพิ่มรูปภาพลงในแอป Android แล้ว ข้อความของคุณก็ดูดีมากเช่นกัน!

เมื่อคุณเพิ่ม TextViews ใน Codelab ที่ผ่านมาแล้ว Android Studio จะแจ้งว่าโค้ดเหล่านั้นเป็นรูปสามเหลี่ยมในคําเตือน ในขั้นตอนนี้ คุณจะต้องแก้ไขคําเตือนเหล่านั้นและแก้ไขคําเตือนในImageView

กำลังแปล

โปรดทราบว่าเมื่อเขียนแอป แอปอาจแปลเป็นอีกภาษาหนึ่งได้ ตามที่คุณเรียนรู้ใน Codelab ก่อนหน้านี้ สตริงคือลําดับอักขระ เช่น "Happy Birthday, Sam!"

สตริงฮาร์ดโค้ดคือสตริงที่เขียนในโค้ดของแอปโดยตรง สตริงที่ฮาร์ดโค้ดจะทําให้แปลแอปเป็นภาษาอื่นๆ ได้ยากขึ้น และใช้สตริงซ้ําในตําแหน่งต่างๆ ในแอปได้ยากขึ้น คุณสามารถจัดการปัญหาเหล่านั้นได้โดย &hlt;แยกสตริงไปยังไฟล์ทรัพยากร" ซึ่งหมายความว่าไม่ต้องใส่สตริงในโค้ด เพียงแค่ใส่สตริงเป็นไฟล์ ตั้งชื่อ แล้วใช้ชื่อนั้นเมื่อต้องการใช้สตริงนี้ ชื่อจะยังคงเหมือนเดิม แม้ว่าคุณจะเปลี่ยนสตริงหรือแปลเป็นภาษาอื่นก็ตาม

1. คลิกรูปสามเหลี่ยมสีส้มถัดจาก TextView แรกด้วย "Happy Birthday, Sam!"
   Android Studio เปิดหน้าต่างที่มีข้อมูลเพิ่มเติมและการแก้ไขที่แนะนํา คุณอาจต้องเลื่อนลงเพื่อดูการแก้ไขที่แนะนํา
   
   
2. คลิกปุ่มแก้ไข
   Android Studio เปิดกล่องโต้ตอบแยกทรัพยากร ในกล่องโต้ตอบนี้ คุณสามารถปรับแต่งสิ่งที่เรียกว่าทรัพยากรสตริง และรายละเอียดบางอย่างเกี่ยวกับวิธีจัดเก็บได้ ชื่อทรัพยากรคือสิ่งที่จะเรียกสตริง ค่าทรัพยากรจะเป็นสตริงจริง
3. ในกล่องโต้ตอบแยกทรัพยากร ให้เปลี่ยนชื่อทรัพยากรเป็น happy_birthday_text ทรัพยากรสตริงควรมีชื่อตัวพิมพ์เล็กและคั่นระหว่างคําด้วยขีดล่าง และปล่อยการตั้งค่าอื่นๆ ไว้เป็นค่าเริ่มต้น
   
4. คลิกปุ่มตกลง
5. ในแผงแอตทริบิวต์ ให้ค้นหาแอตทริบิวต์ text และสังเกตเห็นว่า Android Studio ตั้งค่าดังกล่าวเป็น @string/happy_birthday_text ให้คุณโดยอัตโนมัติ
   
6. เปิด strings.xml (app > res > value > string.xml) แล้วสังเกตเห็นว่า Android Studio สร้างทรัพยากรสตริงชื่อ happy_birthday_text

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

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

7. ทําตามขั้นตอนเดียวกันนี้เพื่อดึงข้อความสําหรับลายเซ็น TextView และตั้งชื่อทรัพยากรสตริง signature_text

ไฟล์ที่สร้างเสร็จแล้วควรมีลักษณะดังนี้

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
    <string name="signature_text">From Emma.</string>
</resources>

ตรวจสอบแอปสําหรับการช่วยเหลือพิเศษ

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

หมายเหตุ: Android มีเครื่องมือมากมายให้ผู้ใช้ ตัวอย่างเช่น TalkBack คือโปรแกรมอ่านหน้าจอของ Google ที่มีอยู่ในอุปกรณ์ Android TalkBack ช่วยให้ผู้ใช้อธิบายและอ่านออกเสียง เพื่อให้ผู้ใช้ใช้อุปกรณ์ได้โดยไม่ต้องมองหน้าจอ อ่านเพิ่มเติมเกี่ยวกับการช่วยเหลือพิเศษในคู่มืออ้างอิงสําหรับนักพัฒนาซอฟต์แวร์

Android Studio ให้คําแนะนําและคําเตือนเพื่อช่วยให้คุณเข้าถึงแอปได้ง่ายขึ้น

1. ในแผนผังคอมโพเนนต์ ให้สังเกตรูปสามเหลี่ยมสีส้มถัดจาก ImageView ที่คุณเพิ่มไว้ก่อนหน้านี้ หากวางเมาส์เหนือตัวชี้ คุณจะเห็นเคล็ดลับเครื่องมือพร้อมคําเตือนเกี่ยวกับแอตทริบิวต์ 'contentDescription' ขาดหายไปในรูปภาพ คําอธิบายเนื้อหาช่วยให้แอปของคุณใช้งาน TalkBack ได้มากขึ้นโดยกําหนดวัตถุประสงค์ขององค์ประกอบ UI

อย่างไรก็ตาม รูปภาพในแอปนี้มีไว้สําหรับการตกแต่งเท่านั้น แต่จะไม่ดําเนินการใดๆ ได้หากผู้ใช้แตะ และไม่มีความหมายพิเศษสําหรับการช่วยเหลือพิเศษ แทนที่จะตั้งค่าคําอธิบายเนื้อหา ให้ทําเครื่องหมาย ImageView เพื่อให้ระบบรู้ว่าไม่สําคัญสําหรับการช่วยเหลือพิเศษ จากนั้นโปรแกรมอ่านหน้าจอจะรู้ว่าให้ข้ามส่วนนั้นไป

2. ในแผนผังคอมโพเนนต์ ให้เลือก ImageView
3. ในหน้าต่าง Attribute ในส่วน All Attributes ให้ค้นหา entialForAccessibility และตั้งค่าเป็น no
   

รูปสามเหลี่ยมสีส้มถัดจาก ImageView จะหายไป

4. เรียกใช้แอปอีกครั้งเพื่อให้แน่ใจว่าแอปยังทํางานอยู่

ยินดีด้วย คุณได้เพิ่มรูปภาพในแอป Happy Birthday แล้วปฏิบัติตามหลักเกณฑ์การช่วยเหลือพิเศษ ซึ่งทําให้แปลเป็นภาษาอื่นๆ ได้ง่ายขึ้น

โค้ดโซลูชันสําหรับแอป Happy Birthday ได้อัปโหลดไปยัง GitHub แล้ว ในกรณีที่คุณต้องการดูโค้ดที่เราลงท้ายด้วย

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

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

URL ของโซลูชัน: https://github.com/google-developer-training/android-basics-kotlin-<APPNAME>

หากต้องการรับรหัสสําหรับ Codelab นี้แล้วเปิดใน Android Studio ให้ทําตามขั้นตอนต่อไปนี้

รับโค้ด

1. คลิก URL ของโซลูชัน การดําเนินการนี้จะเปิดหน้า GitHub สําหรับโปรเจ็กต์ในเบราว์เซอร์
2. ในหน้า GitHub ของโปรเจ็กต์ ให้คลิกปุ่มโคลนหรือดาวน์โหลดเพื่อแสดงกล่องโต้ตอบโคลน

3. ในกล่องโต้ตอบ ให้คลิกปุ่มดาวน์โหลด ZIP เพื่อบันทึกการฉายภาพลงในคอมพิวเตอร์ รอให้การดาวน์โหลดเสร็จสมบูรณ์
4. ค้นหาไฟล์ในคอมพิวเตอร์ (มักจะอยู่ในโฟลเดอร์ดาวน์โหลด)
5. ดับเบิลคลิกไฟล์ ZIP เพื่อคลายการแพคข้อมูล โดยจะสร้างโฟลเดอร์ใหม่ที่มีไฟล์ของโปรเจ็กต์

เปิดการฉายภาพใน Android Studio

1. เริ่ม Android Studio
2. คลิกเปิดโปรเจ็กต์ Android Studio ที่มีอยู่ในหน้าต่างยินดีต้อนรับสู่ Android Studio

หมายเหตุ: หาก Android Studio เปิดอยู่แล้ว ให้เลือกเมนูไฟล์ > ใหม่ > นําเข้าโปรเจ็กต์แทน

3. ในกล่องโต้ตอบนําเข้าโปรเจ็กต์ ให้ไปที่โฟลเดอร์โฟลเดอร์ที่แยกไฟล์อยู่ (น่าจะอยู่ในโฟลเดอร์ดาวน์โหลด)
4. ดับเบิลคลิกในโฟลเดอร์โปรเจ็กต์นั้น
5. รอให้ Android Studio เปิดโปรเจ็กต์
6. คลิกปุ่มเรียกใช้ เพื่อสร้างและเรียกใช้แอป ตรวจสอบว่าแอปทํางานตามที่คาดไว้
7. เรียกดูไฟล์โปรเจ็กต์ในหน้าต่างเครื่องมือโปรเจ็กต์เพื่อดูวิธีใช้งานแอป

ความช่วยเหลือ: ดูคู่มือความช่วยเหลือและการแก้ปัญหาหากโค้ดที่ดาวน์โหลดไม่โหลดหรือทํางานอย่างถูกต้อง

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

• ผู้จัดการทรัพยากรใน Android Studio
• ชั้นเรียน ImageView
• การช่วยเหลือพิเศษ
• รองรับหลายภาษา
• การเริ่มต้นใช้งาน GitHub

หมายเหตุ: คุณจะฝึกหรือไม่ก็ได้ เปิดโอกาสให้นักเรียนได้ฝึกฝนสิ่งที่คุณได้เรียนรู้ใน Codelab นี้

สิ่งที่คุณทําได้มีดังนี้

1. สร้างแอปการ์ดวันเกิดของคุณเองตามการออกแบบของคุณ
2. เริ่มด้วยการนึกถึงสิ่งที่ Views ต้องการ
3. บริษัทใดเพิ่มคําสั่งซื้อที่ง่ายที่สุด
4. ต้องเพิ่มรูปภาพใดลงในโฟลเดอร์ที่ดึงออกได้

รูปภาพบิตแมปที่ใช้กันทั่วไปสําหรับแอป Android, ไฟล์ JPEG และไฟล์ PNG มี 2 ประเภท ไฟล์ PNG อาจมีพื้นที่โปร่งใส (ว่างเปล่า) อยู่ได้ อ่านข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบรูปภาพในข้อมูลอ้างอิงสําหรับนักพัฒนาซอฟต์แวร์

5. อย่าลืมวาง Views ให้มีข้อจํากัดและระยะขอบก่อน จากนั้นจึงจัดรูปแบบ
6. หากต้องการให้ข้อความโดดเด่นมากขึ้นในรูปภาพบางภาพ ให้ลองทดสอบด้วย shadowColor, shadowDx, shadowDy และ shadowRadius
   

ตรวจสอบงาน

แอปที่ทําเสร็จแล้วควรทํางานโดยไม่มีข้อผิดพลาดและแสดงการ์ดวันเกิดที่คุณออกแบบไว้