Jetpack Compose ชุดเครื่องมือ UI ใหม่ของ Google สำหรับ Android อยู่ในรุ่นอัลฟ่าแล้ว

เมื่อพูดถึงการพัฒนาแอป มีหลายวิธีในการดำเนินการ คุณสามารถเลือกแพลตฟอร์มที่จะพัฒนา ภาษาการเขียนโปรแกรมที่คุณต้องการใช้ และอื่นๆ อีกมากมาย

ย้อนกลับไปในฤดูใบไม้ร่วงปี 2019 Google แนะนำ เฟรมเวิร์กใหม่สำหรับการสร้าง UI ใน Android โดยใช้ Kotlin จนถึงขณะนี้ มันอยู่ในสถานะการพัฒนา โดยมีการเปลี่ยนแปลงบ่อยครั้งและมีฟีเจอร์ที่ขาดหายไปมากมาย แต่วันนี้ Google ได้ผลักดัน Jetpack Compose ไปสู่สถานะการเปิดตัวอัลฟ่า ซึ่งหมายความว่าเข้าใกล้การใช้ในโครงการคุณภาพการผลิตอีกก้าวหนึ่ง

Jetpack เขียนคืออะไร?

เมื่อสร้างแอป Android มักจะมีองค์ประกอบหลักสองประการที่คุณต้องจัดการ: โค้ดสำหรับสิ่งที่อิงตามตรรกะ และ XML สำหรับเค้าโครง ตามค่าเริ่มต้น Android จะใช้ Java สำหรับโค้ดและชุดแท็ก XML ของตัวเองสำหรับเค้าโครง

สำหรับหลาย ๆ คน Java และ XML นั้นใช้ได้ โดยเฉพาะกับแอปที่เรียบง่ายกว่า แต่ทั้งสองระบบก็มีข้อจำกัดและความรำคาญอยู่เหมือนกัน ด้วยการนำ Kotlin มาเป็น เป็นทางการ (และที่แนะนำ) ภาษาสำหรับการพัฒนา Android ด้านการเขียนโค้ดในการสร้างแอป Android อาจง่ายขึ้นมาก ด้วยคุณสมบัติที่มีประโยชน์ของ Kotlin เช่น การป้องกัน null และฟังก์ชันส่วนขยายในตัว โค้ดจึงดูสะอาดตาและอ่านง่ายขึ้น

แต่ Kotlin ไม่ได้เปลี่ยนแปลงอะไรกับเลย์เอาต์ของ Android หากต้องการสร้างเลย์เอาต์ที่ซับซ้อน คุณยังคงต้องสร้างไฟล์ XML และออกแบบที่นั่น สิ่งนี้มีข้อเสียที่น่าสังเกตบางประการ รวมถึงการแยกระหว่างโค้ดและ XML โดยธรรมชาติ หากคุณมีสตริงคงที่ในโค้ดของคุณ คุณไม่สามารถอ้างอิงสิ่งนั้นจาก XML ได้ ดังนั้นหากสตริงนั้นเปลี่ยนแปลงในโค้ด คุณต้องไม่ลืมที่จะอัปเดตสตริงนั้นใน XML ด้วยเช่นกัน

เข้าสู่การเขียน Jetpack นี่คือคำตอบของ Google สำหรับกระบวนการออกแบบเค้าโครง XML ที่ยุ่งยากมากขึ้นใน Android แทนที่จะออกแบบ UI ของแอปในรูปแบบ XML คุณสามารถทำได้จากโค้ดของคุณโดยตรง แม้ว่าเค้าโครงที่ใช้โค้ดจะสามารถสร้างได้ แต่มักจะบำรุงรักษาได้น้อยกว่า XML และเกี่ยวข้องกับไลบรารีที่เสียหายได้ง่าย ในทางกลับกัน เขียนได้รับการออกแบบให้ทำงานโดยตรงใน Kotlin: ไม่มี XML อีกต่อไป

Jetpack Compose ยังแตกต่างจากการออกแบบเค้าโครง XML ที่จำเป็นตามมาตรฐานอีกด้วย แต่จะคล้ายกับ React หรือ Flutter มากกว่า โดยมีเค้าโครงที่ประกาศซึ่งจะอัปเดตตัวเองเมื่อข้อมูลมีการเปลี่ยนแปลง แทนที่จะอาศัยนักพัฒนาเพื่อใช้ตรรกะนั้น

มีอะไรรองรับ

ตอนนี้ Jetpack Compose อยู่ในอัลฟ่าแล้ว นั่นหมายความว่าอย่างไร? มีหลายสิ่งหลายอย่าง

การทำงานร่วมกันกับ Views

เช่นเดียวกับที่ Kotlin สามารถทำงานร่วมกับ Java ได้อย่างสมบูรณ์ Jetpack Compose สามารถทำงานร่วมกับ Views มาตรฐานของ Android ได้อย่างสมบูรณ์ นี่หมายถึงบางสิ่งค่อนข้างมาก

ประการแรก การย้ายไปยัง Jetpack Compose จะง่ายกว่ามากถ้าคุณต้องการ แทนที่จะต้องแปลงมุมมองและเลย์เอาต์ที่กำหนดเองทั้งหมดเป็น Composable คุณจะสามารถสร้างเลย์เอาต์และส่วนประกอบใหม่ใน Compose ได้ มีห้องสมุดที่ใช้ Views "ดั้งเดิม" แต่แอปของคุณได้รับการออกแบบด้วย Compose หรือไม่ ไม่มีปัญหา. คุณสามารถเพิ่ม View ลงในฟังก์ชัน Composable ของคุณได้โดยตรง ยังไม่ได้ข้ามไปที่ Compose แต่คุณต้องการใช้ไลบรารีที่ต้องใช้ Composables ใช่หรือไม่ อีกครั้งไม่มีปัญหา เพียงใส่ Composable ลงในเลย์เอาต์ของคุณ

สำหรับธีมนั้น มันไม่ได้ค่อนข้างเป็นแบบพลักแอนด์เพลย์เหมือนกับการทำงานร่วมกันของเลย์เอาต์ อย่างไรก็ตาม, Google ได้สร้างห้องสมุด เพื่อปรับธีม XML มาตรฐานของคุณให้เป็นธีมที่เข้ากันได้กับการเขียน ช่วยให้สิ่งต่าง ๆ รวมศูนย์และหลีกเลี่ยงความซ้ำซ้อน

ภาพเคลื่อนไหว

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

รายการขี้เกียจ

Lazy List คือ RecyclerView เวอร์ชันของ Compose โดยจะจัดวางรายการตามความจำเป็นเท่านั้น ประหยัด RAM และเพิ่มประสิทธิภาพ แน่นอนว่านี่คือการเขียน รายการจึงง่ายกว่ามากในการนำไปใช้

ข้อจำกัดเค้าโครง

Views ที่ทรงพลังที่สุดอย่างหนึ่งใน Android คือ ConstraintLayout ซึ่งจะทำให้คุณสามารถวางตำแหน่ง ขนาด และน้ำหนักการดูของเด็กที่สัมพันธ์กัน ในขณะเดียวกันก็ทำให้ภาพเคลื่อนไหวบางอย่างง่ายขึ้นอีกด้วย หากคุณกังวลเกี่ยวกับการสูญเสียฟังก์ชันการทำงานนี้ใน Compose คุณไม่ควรกังวล เพราะมันอยู่ที่นี่เช่นกัน

ส่วนประกอบ UI ของวัสดุ

Views อันทรงพลังอีกชุดหนึ่งคือไลบรารี Material Components ของ Google สิ่งที่อยู่ในที่นี้ส่วนใหญ่คือ Views และเลย์เอาต์มาตรฐานที่คุณสามารถพบได้ในเฟรมเวิร์ก View ดั้งเดิม แต่พวกมันได้รับการปรับแต่งหรือรวมเข้าด้วยกันเพื่อให้มีฟังก์ชันพิเศษและทำให้ธีมง่ายขึ้น และพวกเขาก็หันมาใช้ Compose ด้วยเช่นกัน

การทดสอบ

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

คุณสมบัติการเข้าถึง

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

แอนดรอยด์สตูดิโอ

คุณลักษณะบางอย่างของ Jetpack Compose ไม่ได้มีอยู่ใน Jetpack Compose เอง Android Studio และ Kotlin ยังมีปลั๊กอินและส่วนเสริมเพื่อให้เขียนได้ง่ายขึ้น

ปลั๊กอินคอมไพเลอร์ Kotlin

เช่นเดียวกับ Kotlin JVM มีปลั๊กอินคอมไพเลอร์ใน Android Studio เพื่อแปลงฟังก์ชัน Compose ของคุณให้เป็นโค้ดที่ Android สามารถเข้าใจและปฏิบัติตามได้จริง

การแสดงตัวอย่างแบบโต้ตอบ

เช่นเดียวกับเค้าโครง XML มาตรฐานของคุณ Android Studio มาพร้อมกับการแสดงตัวอย่างเค้าโครงสำหรับ Jetpack Compose แม้ว่าในปัจจุบันจะไม่ค่อยสะดวกเท่ากับตัวอย่าง XML ในบางแง่มุม แต่คุณก็ต้องสร้างโปรเจ็กต์ของคุณขึ้นมา การแสดงตัวอย่างเพื่ออัปเดต และสร้างฟังก์ชันแสดงตัวอย่างโดยเฉพาะ—มีข้อได้เปรียบที่โดดเด่นอย่างหนึ่ง: การโต้ตอบ ตัวอย่าง

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

การปรับใช้แบบแยกส่วนเดี่ยว

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

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

กรอกโค้ด

หาก IDE ของคุณไม่มีการกรอกโค้ด มันเป็น IDE หรือเปล่า ไม่ ไม่มันไม่ใช่ แน่นอนว่า Android Studio รองรับการเติมโค้ดแบบเต็มสำหรับ Jetpack Compose

---

แม้ว่านี่ไม่ใช่ทุกสิ่งที่ Jetpack Compose นำมาไว้บนโต๊ะ แต่ฟีเจอร์และลักษณะการทำงานด้านบนแสดงให้เห็นว่า Google ต้องการให้เฟรมเวิร์กนี้มีประสิทธิภาพเพียงใด และถึงแม้จะยังอยู่ในช่วงอัลฟ่า แต่ก็ถือว่าก้าวนำหน้าสถานะ "การพัฒนา" ก่อนหน้านี้ไปหนึ่งก้าว หากคุณลังเลที่จะใช้ Jetpack Compose จริงๆ (เหมือนฉัน) ตอนนี้อาจถึงเวลาที่จะลองอีกครั้ง