การพัฒนาแอพ Android สำหรับผู้เริ่มต้น

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

เราเพิ่งเผยแพร่หลักสูตรข้อขัดข้องในการพัฒนาแอป Android บนช่อง YouTube freeCodeCamp.org หลักสูตรนี้สมบูรณ์แบบหากคุณเพิ่งเริ่มพัฒนาแอป Android

Rahul Pandey พัฒนาหลักสูตรนี้ Rahul เป็นหัวหน้า Android ของ Facebook และเป็นวิทยากรที่มหาวิทยาลัยสแตนฟอร์ด

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

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

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

ดูหลักสูตรด้านล่างหรือในช่อง YouTube freeCodeCamp.org (ดู 1 ชั่วโมง)

Transcript

(สร้างอัตโนมัติ)

ในหลักสูตรสำหรับผู้เริ่มต้นนี้ คุณจะได้เรียนรู้วิธีสร้างแอป Android จาก Rahul Pandey

Rahul เป็นวิศวกร Android ที่ Facebook และบรรยายที่ Stanford University เราจะสร้างแอพ Android ตั้งแต่เริ่มต้น เราจะเริ่มต้นด้วยโครงการที่ว่างเปล่า และจบลงด้วยสิ่งที่คุณสามารถใช้ได้จริง และแม้กระทั่งเผยแพร่ไปยัง Play Store เราจะสร้างเครื่องคำนวณทิป ซึ่งคุณสามารถป้อนจำนวนเงินพื้นฐาน เปอร์เซ็นต์ทิป แล้วแอปจะคำนวณทิปและจำนวนเงินทั้งหมดให้คุณ

เราจะสร้างแอปนี้โดยใช้ภาษาการเขียนโปรแกรม kotlin

ฉันจะถือว่าคุณมีพื้นฐานในการเขียนโปรแกรม

แต่ถ้าคุณยังใหม่กับ kotlin ฉันจะทิ้งลิงก์ไว้ในคำอธิบายของไพรเมอร์สั้นๆ 12 นาทีเกี่ยวกับภาษาที่ฉันสร้าง

ฉันชื่อราโฮ ฉันสอน Android บน YouTube และนอก YouTube มาระยะหนึ่งแล้ว

เมื่อคุณพร้อมแล้ว มาสร้างแอปนี้ด้วยกัน

มีสามสิ่งที่ฉันต้องการจะกล่าวถึงในวิดีโอนี้

อันดับแรก ฉันต้องการอธิบายคุณสมบัติหลักของแอปพลิเคชั่นเครื่องคิดเลขทิป

ประการที่ 2 ฉันจะอธิบายแนวคิดหลักของ Android ที่เราจะกล่าวถึงขณะสร้าง

และประการที่สาม เนื่องจากฉันกำลังดูแลแอปอย่างตั้งใจ เรียบง่าย ฉันจึงต้องการพูดถึงแนวคิด Android บางอย่างที่เราจะไม่พบเกี่ยวกับการสร้างแอป

และจะกล่าวถึงในแอป Android ที่มีความซับซ้อนหรือซับซ้อนมากขึ้นในภายหลัง

ฉันได้กล่าวถึงก่อนหน้านี้ว่าคุณจะเผยแพร่แอปนี้ใน Google Play Store ได้อย่างไรเมื่ออ่านบทแนะนำเสร็จแล้ว

และนั่นคือสิ่งที่ฉันทำ

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

เรามาสาธิตแอปกันเพื่อจะได้ทราบถึงคุณสมบัติหลักที่เราจะสร้าง

ในตัวอย่างนี้ ฉันออกไปทานอาหารค่ำคนเดียวอย่างฟุ่มเฟือย และใช้เงินไป 83.15 ดอลลาร์

และฉันกำลังให้ทิปที่ค่อนข้างเอื้อเฟื้อเผื่อไว้ 24% และแอปเปิ้ลจะคำนวณทิปและจำนวนเงินทั้งหมดโดยอัตโนมัติ

เพื่อให้การคำนวณง่ายขึ้นอีกเล็กน้อย ทำไมไม่ปรับปรุงจำนวนเงินพื้นฐานเป็น $100

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

และหากฉันรู้สึกพอใจกับบริการที่ได้รับจากมื้ออาหารจริงๆ ฉันก็สามารถเพิ่มเปอร์เซ็นต์ทิปและเพิ่มเป็น 30% ได้

และมีสองสิ่งเกิดขึ้นที่นี่

หนึ่งคือเราอัปเดตเคล็ดลับและการคำนวณยอดรวมแบบไดนามิกที่ 30

และผลรวมคือ 130

นอกจากนี้เรายังอัปเดตคำอธิบายของเปอร์เซ็นต์ทิปนั้นด้วย

เปลี่ยนจากยอดเยี่ยมไปสู่ความมหัศจรรย์และกลายเป็นสีเขียวที่สดใสยิ่งขึ้นด้วย

ในทางกลับกัน ถ้าฉันไม่พอใจกับบริการจริงๆ ฉันก็อาจจะให้ทิปเป็นศูนย์

และเราถือว่านั่นเป็นเคล็ดลับที่ไม่ดี

และคุณจะเห็นว่าสีได้รับการอัปเดตเป็นสีแดงนี้อย่างไร

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

แนวคิดที่เรากล่าวถึงในเครื่องคำนวณทิปเป็นแนวคิดเดียวกันกับที่เป็นพื้นฐานของแอป Android ทุกแอป

อันดับแรกคือการสร้าง UI

ทุกแอปต้องมีอินเทอร์เฟซผู้ใช้

และองค์ประกอบหลักที่เราจะใช้ที่นี่คือเค้าโครงข้อจำกัด ซึ่งจะประกอบด้วยวิดเจ็ตอื่นๆ เช่น TextView หรือส่วนค้นหา ป้อนเปอร์เซ็นต์ของส่วนปลาย

ประการที่สอง ทุกแอป Android ที่น่าสนใจจะรับฟังและตอบสนองต่อการป้อนข้อมูลของผู้ใช้

ดังนั้นเราจึงสามารถป้อนข้อมูลในแอปของเราได้ 2 วิธี วิธีแรกคือการป้อนจำนวนเงินพื้นฐาน

และที่สองคือเปอร์เซ็นต์ของทิป

และตามนั้น เราจำเป็นต้องตอบสนองและอัปเดต UI อย่างเหมาะสม

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

ยังมีอีกมากที่เราจะไม่พูดถึงในเครื่องคำนวณทิป

และนั่นเป็นสิ่งสำคัญในการลดขอบเขตและทำให้แอปนี้รวดเร็วและง่ายดาย

เพื่อสร้าง

หากคุณเพิ่งเริ่มใช้ Android อันดับแรก เราจะไม่มีหลายหน้าจอ

ซึ่งหมายความว่าเราไม่ต้องจัดการกับสิ่งต่าง ๆ เช่นการนำทางหรือแบ็คสแตกใน Android

และที่จริงแล้ว หน้าจอเดียวที่เรามีนั้นค่อนข้างง่าย เพราะเราไม่มีข้อมูลรายการประเภทใดที่เราต้องจัดการ

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

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

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

ดังนั้นเราจะไม่เขียนไปยังฐานข้อมูล หรือดิสก์ หรือไปยังระบบคลาวด์ทุกที่

และทั้งสามสิ่งนี้ทำให้แอปสร้างได้ง่ายขึ้นมาก

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

แล้วพบกันใหม่ในวิดีโอหน้าครับ

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

สิ่งแรกที่เราจะทำคือสร้างโปรเจ็กต์ enter studio ใหม่เอี่ยม

ดังนั้นฉันจึงมีสตูดิโอของเราทำงานที่นี่ และฉันกำลังดูแลสุนัขจิ้งจอกอาร์กติก แต่เวอร์ชันล่าสุดใดๆ ควรจะแตะกับโปรเจ็กต์ใหม่

และฉันจะเลือกเทมเพลตกิจกรรมที่ว่างเปล่า

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

ปกติผมจะไปทำกิจกรรมเปล่าๆ

มาเรียกแอปพลิเคชันของเราว่า Tippie

ชื่อแพ็กเกจ ปกติแล้วฉันจะใช้ชื่อโดเมนหรือที่อยู่อีเมลของฉันแล้วพลิกกลับ

ฉันจะปล่อยให้มันเป็นอย่างนั้น แล้วเลือกสถานที่ ตรวจสอบให้แน่ใจว่าคุณมี kotlin เลือกภาษานี้

และฉันจะเลือกเวอร์ชัน SDK ขั้นต่ำของ API 21

ตอนนี้ฉันจะแตะที่เสร็จสิ้น

และสิ่งแรกที่ฉันชอบทำทุกครั้งที่มีโครงการใหม่คือเพียงแค่ลองเรียกใช้โค้ดเริ่มต้น

เพราะหากเราไม่สามารถเรียกใช้โค้ดเริ่มต้นได้ แสดงว่ามีบางอย่างผิดพลาดไปแล้ว

ตรวจสอบให้แน่ใจว่าเราอยู่ในจุดที่ดีก่อนที่จะเริ่มเขียนโค้ดใดๆ

เมื่อเราสร้างโปรเจ็กต์ใหม่ในสตูดิโอของเราจะใช้เวลาในการจัดเตรียมทุกอย่าง

ในการเรียกใช้แอปพลิเคชันของเรา เราสามารถไปที่เมนูแบบเลื่อนลงและเลือกปรับใช้แอปของเรากับโปรแกรมจำลองหรืออุปกรณ์จริง

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

และคุณจะเห็นสถานะที่ด้านล่างของ Android Studio เพื่อดูความคืบหน้าในปัจจุบัน

อาจใช้เวลาหนึ่งหรือสองนาที

แต่เมื่อเสร็จแล้ว แอปจะถูกส่งไปยังอุปกรณ์โดยอัตโนมัติและนำไปไว้ที่เบื้องหน้า

สิ่งที่เราต้องทำคือรอจนกว่าเราจะเห็นการดำเนินการบางอย่างบนอีมูเลเตอร์

โอเค ดีมาก

สิ่งนี้ดูมีความหวัง

เรากำลังเห็นแอปพลิเคชันที่เรียกว่าอีมูเลเตอร์ที่เปิดกว้างซึ่งมีข้อความ Hello World ซึ่งเป็นค่าเริ่มต้นสำหรับโปรเจ็กต์เปล่า

และสิ่งนี้ทำให้เรามั่นใจว่าเราสามารถดำเนินโครงการพื้นฐานได้สำเร็จ

มาที่ Inner Studio แล้วคุยกันเรื่องไฟล์เริ่มต้นกัน

และที่จริงแล้ว มันค่อนข้างง่ายเพราะมีเพียงสองไฟล์ที่เราจะเกี่ยวข้องกับกิจกรรมหลัก dot kotlin และจุดหลักของกิจกรรม XML คุณสามารถนึกถึงกิจกรรมในคำศัพท์ Android ที่แสดงหน้าจอเดียวได้

กับโปรเจ็กต์ที่เรามีตอนนี้ก็มีแค่จอเดียว

และที่เรียกว่ากิจกรรมหลักหรือหน้าจอหลัก

และนั่นคือตรรกะทางธุรกิจที่เรากำหนดไว้ ณ ที่นี้ในไฟล์ที่เรียกว่ากิจกรรมหลัก

โดยเฉพาะอย่างยิ่ง รหัสเริ่มต้นทำให้เรามีฟังก์ชันหนึ่งฟังก์ชันหรือวิธีการหนึ่งที่ถูกแทนที่แล้ว

และที่เรียกว่า onCreate สำหรับระบบ Android จะเรียกใช้หรือเรียกใช้ฟังก์ชันนี้โดยอัตโนมัติเมื่อแอปพลิเคชันของเราเริ่มทำงานเมื่อสร้างหน้าจอของเรา

และบรรทัดสำคัญที่นี่คือบรรทัดที่เก้า setcontentview r dot เค้าโครงกิจกรรมหลัก

R ย่อมาจากทรัพยากร

สิ่งที่เราพูดในที่นี้คือเนื้อหาหรือ UI ของหน้าจอควรเป็นไฟล์เลย์เอาต์ในทรัพยากร ซึ่งกำหนดไว้ที่ dot XML หลักของกิจกรรม

และแน่นอน หากเราข้ามไปที่คำจำกัดความของสิ่งนี้ เราจะเห็นว่าไปที่จุด XML หลักของกิจกรรมโดยตรง

ผมจะย่อหน้าต่างเครื่องมือโปรเจ็กต์ตรงนี้เพื่อให้มีพื้นที่มากขึ้น

และนั่นก็เป็นการย่อบานหน้าต่างแอตทริบิวต์ด้วย

นี่คือสิ่งที่เราเห็นในแอปพลิเคชัน เป็นเพียงผ้าใบเปล่าที่มี HelloWorld

โดยเฉพาะอย่างยิ่ง ถ้าคุณดูที่แผนผังองค์ประกอบตรงนี้ มันอาจย่อให้เล็กสุดสำหรับคุณ

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

และมีลูกเพียงคนเดียวที่เรียกว่า TextView หรือป้ายกำกับ

และมีคุณสมบัติที่มีคุณค่า สวัสดีชาวโลก

นั่นคือวิธีที่เราเห็นข้อความ Hello World ในแอปพลิเคชันที่ทำงานอยู่ของเรา

ในวิดีโอนี้ เราจะใช้เวลาทั้งหมดไปกับกิจกรรม main dot XML เพราะตอนนี้เรากังวลแค่เรื่องการสร้าง UI สำหรับแอปพลิเคชันของเราเท่านั้น

โดยเฉพาะอย่างยิ่ง นี่คือสิ่งที่เราต้องการจะจบ เราจะมีองค์ประกอบแปดอย่างในหน้าจอ

ทางด้านซ้าย เรามีมุมมองข้อความที่แตกต่างกันสี่มุมมอง คุณสามารถนึกถึงข้อความ คุณต้องการป้ายกำกับ ซึ่งผู้ใช้ไม่สามารถแก้ไขได้

ทางด้านขวา เรามีองค์ประกอบจริงที่ TextView อธิบายไว้

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

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

แต่คุณยังสามารถเลื่อนลงไปที่แท็บโค้ดซึ่งเป็น XML พื้นฐานที่แท้จริงได้

คุณจึงเห็นได้ว่าเรามีเลย์เอาต์ข้อจำกัด จากนั้นเด็กคนหนึ่งจะดูมุมมองข้อความเหมือนกับการออกแบบ

Split หมายถึงคุณมองทั้งสองอย่าง

และเราจะใช้เวลาส่วนใหญ่ไปกับดูตัวอย่างการออกแบบ

และสิ่งที่เราทำได้คือเข้าไปในจานสีแล้วลากและวางส่วนประกอบต่างๆ เช่น มุมมองข้อความ หรือแก้ไขข้อความที่เราต้องการ

และอีกครั้งที่จะแสดงในแท็บโค้ด

ดังนั้น พึงระลึกไว้เสมอว่ามีการเปลี่ยนแปลงแบบหนึ่งต่อหนึ่งระหว่างสิ่งที่คุณทำในตัวอย่างการออกแบบและ XML พื้นฐาน

ตอนนี้ กลับไปที่การออกแบบ ลบองค์ประกอบที่เรามี เพื่อให้เรามีเค้าโครงข้อจำกัดเดียวที่ไม่มีลูก

เอกสารอธิบายโครงร่างข้อจำกัดเป็นวิธีการสร้างเลย์เอาต์ขนาดใหญ่และซับซ้อนด้วยลำดับชั้นของมุมมองแบบเรียบ

เราสามารถอธิบายความสัมพันธ์ระหว่างมุมมองพี่น้องและเค้าโครงหลักผ่านชุดข้อจำกัดที่เรากำหนด

และนั่นทำให้ระบบภายในสามารถจัดวาง UI ของเราในโทรศัพท์หรือแท็บเล็ตหลายขนาดได้อย่างสวยงาม

และที่สำคัญที่นี่คือไม่มีกลุ่มมุมมองที่ซ้อนกัน

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

ดังนั้นเลย์เอาต์ข้อจำกัดทำให้เราสร้างมุมมองที่ซับซ้อนโดยไม่ต้องมีกลุ่มมุมมองที่ซ้อนกัน

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

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

ย้อนกลับไปใน Android Studio สิ่งแรกที่เราจะทำคือลาก TextView ที่แสดงส่วนประกอบด้านบนซ้ายของหน้าจอออกมา ซึ่งก็คือ TextView ที่แทนตารางฐาน

สิ่งแรกที่ฉันทำทุกครั้งที่ลากส่วนประกอบใดๆ ออกมาคืออัปเดต ID ให้มีความหมายมากขึ้น

ฉันจะเรียกป้ายกำกับฐานทีวีนี้แล้วอัปเดตข้อความให้เป็นฐาน

และสิ่งที่คุณจะสังเกตเห็นที่นี่คือ Android Studio บ่นว่า TextView นี้ไม่มีข้อจำกัด

ดังนั้นมันจึงออกแบบเฉพาะตำแหน่งเวลา มันจะข้ามไปยังตำแหน่ง 00 ซึ่งเป็นด้านซ้ายบนของหน้าจอขณะรันไทม์เว้นแต่เราจะเพิ่มข้อจำกัด

และนี่คือจุดรวมของเค้าโครงข้อจำกัด เราต้องจำกัดทุกองค์ประกอบในแนวตั้งและแนวนอน

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

จากนั้นในแท็บแอตทริบิวต์ เราจะระบุระยะขอบที่เราต้องการจากด้านบนของหน้าจอ และฉันจะบอกว่า 48 ที่ด้านบน

ในทำนองเดียวกัน เราต้องการระบุระยะขอบด้านซ้าย ดังนั้นเราจะลากจุดยึดด้านซ้ายแล้วลากไปยังพาเรนต์ และระบุว่าให้ห่างจากปลายด้านซ้ายของหน้าจอ 32 dP

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

เริ่มต้นด้วยป้ายที่อยู่ใต้ป้ายฐานคือป้ายเปอร์เซ็นต์ทิปทีวี

เขียนข้อความที่นี่เป็น 24%

TextView ด้านล่างซึ่งจะเป็นป้ายบอกทิปทีวี

ข้อความจะเป็นทิป

และในที่สุด เราก็จะได้ป้ายชื่อทีวีทั้งหมด

และข้อความที่นี่จะเป็นทั้งหมด

ดังนั้นเราจึงมีปัญหาเดียวกันกับที่เราต้องจำกัดสิ่งเหล่านี้ในแนวนอนและแนวตั้ง ในแนวตั้ง สิ่งที่เราจะทำคือนำจุดยึดบนสุดสำหรับ TextView แต่ละรายการแล้วลากไปยังองค์ประกอบด้านบน

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

และอีกครั้ง ทำแบบเดียวกัน 32 dP จำกัดการดูแต่ละมุมมองในแนวตั้ง

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

นั่นคือวิธีที่เราต้องการจำกัดพวกมันในแนวนอน

และเราทำได้จริงในแท็บการออกแบบ คุณอาจบอกว่าจัดแนวแล้วจัดแนวขอบด้านขวา

แต่ฉันต้องการแสดงวิธีการดำเนินการนี้ในแท็บโค้ด

ดังนั้น ถ้าฉันเปิดแท็บโค้ดดังที่เราพูดถึง ทุกการเปลี่ยนแปลงที่คุณทำในแท็บออกแบบจะมีการเปลี่ยนแปลงที่สอดคล้องกันในแท็บโค้ด

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

เราจึงขีดเส้นใต้สีแดงไว้

ข้อจำกัดแนวตั้งคือสิ่งที่คุณสามารถดูได้ที่นี่

สิ่งที่เรากำลังสื่อสารกับบรรทัดนี้อยู่ที่ด้านบนสุดของป้ายกำกับเปอร์เซ็นต์ของทิปทีวีควรเท่ากับด้านล่างของทีวีพื้นฐานทุกประการคือ TextView อยู่ด้านบนพร้อมกับระยะขอบ 32 dP ซึ่งหมายความว่าคุณต้องการ อยู่ต่ำกว่าองค์ประกอบด้านบน 32 พิกเซล

ในทำนองเดียวกัน สิ่งที่เราอยากทำคือระบุว่าจุดสิ้นสุดขององค์ประกอบนี้ ป้ายเปอร์เซ็นต์ทิปทีวีควรเท่ากับจุดสิ้นสุดของป้ายกำกับตามทีวี

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

และถ้าเรากลับไปที่แท็บออกแบบ คุณจะเห็นว่าตอนนี้ทุกอย่างสอดคล้องกันอย่างไร

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

เนื่องจากตอนนี้เราได้จำกัดมุมมองเหล่านี้ในแนวนอนและแนวตั้งอย่างเต็มที่ เราจึงไม่ต้องการสิ่งนี้อีกต่อไป

ฉันจะเลือกแต่ละรายการแล้วลบทิ้ง

และอีกอย่างคือ ฉันค่อนข้างจะชอบสไตล์ที่สม่ำเสมอและการเรียงลำดับชื่อแอตทริบิวต์ต่างๆ กัน

ตัวอย่างเช่น ในที่นี้ เรามีวงเล็บเหลี่ยมสิ้นสุดที่บรรทัดเดียวกันหรือขึ้นบรรทัดใหม่

และเพื่อแก้ไขให้เราโดยอัตโนมัติ ฉันแตะ double shift แล้วค้นหารูปแบบใหม่ได้

และมีทางลัดสำหรับการจัดรูปแบบโค้ดใหม่

ถ้าฉันทำเช่นนั้น คุณจะเห็นได้ว่า Android Studio ช่วยเราแก้ไขมันได้อย่างไรในไฟล์ทั้งหมด ซึ่งฉันชอบมากกว่านั้นมาก

ใช่แล้ว กลับไปที่แท็บการออกแบบ

และก่อนที่เราจะไปยังองค์ประกอบทางด้านขวาของหน้าจอ สิ่งหนึ่งที่ฉันต้องการทำเพียงแค่ปรับแต่งการออกแบบสั้นๆ ไม่กี่อย่าง

ก่อนอื่น ฉันต้องการทำให้ข้อความใหญ่ขึ้นเล็กน้อยที่นี่

ฉันจะทำให้ข้อความมีลักษณะเป็นสื่อกลาง คุณจะเห็นว่ามันใหญ่ขึ้นได้อย่างไร

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

เพื่อเป็นการบ่งบอกว่ามีความแตกต่างเล็กน้อยจากส่วนอื่นๆ ฉันจะทำให้ข้อความเป็นตัวหนาที่นี่

เจ๋ง ฉันชอบมัน

ตอนนี้ มาคิดถึงองค์ประกอบทั้งสี่ที่ด้านขวาสุดของหน้าจอ

อันนี้จะเป็นการแก้ไขข้อความด้านล่างที่เรามีแถบค้นหา

และด้านล่างนั้นเรามีมุมมองข้อความสองแบบ

ลองลากข้อความแก้ไขออกมา

และตัวที่เราจะลากคือตัวที่บอกเลขทศนิยม

และความแตกต่างระหว่างข้อความแก้ไขต่างๆ เหล่านี้ก็ค่อนข้างง่าย

มันเป็นเพียงประเภทการป้อนข้อมูล

เนื่องจากเรากำลังจัดการกับสกุลเงิน เราจึงต้องการตัวเลขและทศนิยมในตัวของเรา

ด้านล่างนี้ เราจะมีแถบค้นหา

จากนั้นเราจะลากไปที่ TextView ด้านล่าง

เอาล่ะ มาอัปเดต IDS ที่นี่กันให้เหมาะสมกันดีกว่า

นี่จึงจะเรียกว่าเป็นจำนวนเงินพื้นฐาน

ต่อไปเรามีเคล็ดลับแถบค้นหา

เราก็ได้ค่าทิปทีวี

และในที่สุด เราก็ได้ยอดทีวีทั้งหมด

มาอัปเดตข้อความที่นี่ให้เป็น 103 จุด 11

และอันนี้ ฉันคิดว่าเราพูดในปี 1996

มาปรับแต่งการออกแบบกันก่อนที่เราจะวางตำแหน่งองค์ประกอบเหล่านี้

ดังนั้นพื้นผิวด้านล่างเหล่านี้จึงเป็นส่วนที่สำคัญที่สุดของแอปทั้งหมด

ฉันจะทำให้ข้อความมีขนาดใหญ่

แถบค้นหา ฉันจะระบุความกว้างของฮาร์ดโค้ดที่ 200 dP เพื่อให้กว้างขึ้นเล็กน้อย

นอกจากนี้ยังมีแอตทริบิวต์ที่เรียกว่า Max ซึ่งเป็นจำนวนสูงสุดที่ Seekbar จะถือไว้

และนั่นคือ 30

เพราะเราอนุญาตเพียง 30% เท่านั้น

สำหรับข้อความแก้ไข ฉันจะตั้งค่า EMAS เป็นแปด ซึ่งหมายความว่าจะมีความกว้างกี่อักขระ ข้อความแก้ไขนี้จะกว้างกี่อักขระ และแปดตัวก็เพียงพอสำหรับเรา ฉันจะเพิ่มขนาดตัวอักษรให้เป็น 24 SP.

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

ตอนนี้มาคิดกันว่าจะวางตำแหน่งเหล่านี้อย่างไร

ดังนั้นในแนวตั้ง สองข้อความล่างสุด คุณควรจัดแนวในแนวตั้ง ฉันจะเลือกทั้งสองข้อความแล้วจัดแนวกึ่งกลางแนวตั้ง

และในทำนองเดียวกันสำหรับผู้ที่อยู่เหนือสิ่งเหล่านั้น

และในทำนองเดียวกันสำหรับเปอร์เซ็นต์ทิปและแถบค้นหา

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

สำหรับยอดบิล

ลองคิดดูว่าจะจำกัดมันอย่างไรในแนวนอน โดยห่างจากข้อความที่เกี่ยวข้องทางด้านซ้าย 32 dP

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

ก็ดูดีนะ

สิ่งเดียวที่เราต้องทำตอนนี้คือถ้าเราวางเมาส์ไว้ตรงนี้ แสดงว่าเราไม่มีข้อจำกัดในแนวตั้งในการแก้ไขข้อความ

ในการทำเช่นนั้น ฉันจะไปที่แท็บโค้ด

นี่คือข้อความแก้ไขที่จำนวนเงินพื้นฐาน

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

มันจะอยู่ตรงกลางแนวตั้ง

ดังนั้น หากคุณกลับไปที่แท็บ Design คุณจะเห็นว่าข้อผิดพลาดได้หายไปแล้ว

และคุณจะเห็นได้ว่าข้อจำกัดเหล่านี้เป็นอย่างไร

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

มาฟอร์แมตโค้ดใหม่อย่างรวดเร็วกันเถอะ

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

เป็นวิวด้านซ้ายมือ

จากนั้นสำหรับ TextView ที่เริ่มต้นด้วยการแก้ไขข้อความ นี่คือมุมมองทางด้านขวา

ถูกต้องแล้วที่จะได้เห็นสิ่งนี้

โอเค เยี่ยมมาก

เช่นเดียวกับที่เราคาดหวังไว้ สิ่งนี้สะท้อนสิ่งที่เราเห็นในตัวอย่างการออกแบบได้อย่างแม่นยำ

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

และนั่นคือสิ่งที่วัตถุประสงค์ของเนมสเปซเครื่องมือที่เราพูดถึงก่อนหน้านี้

สิ่งที่ฉันจะทำคือเลือกมุมมองข้อความที่เกี่ยวข้อง

และแทนที่จะมีข้อความที่นี่ ฉันจะเลื่อนลงมา

ฉันจะย้ายสิ่งนี้ไปยังพื้นที่ข้อความประแจ

และนั่นคือเนมสเปซของเครื่องมือ

ฉันจะย้ายสิ่งเหล่านี้ไปยังข้อความเครื่องมือ

และสุดท้ายก็เหมือนเดิม

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

หากเราเปิดแอปเป็นครั้งสุดท้าย มาดูผลกระทบที่มีต่อเลย์เอาต์เริ่มต้นกัน

เยี่ยม มันดูดีมาก

หวังว่าวิดีโอนี้จะช่วยให้คุณเข้าใจถึงพลังของเค้าโครงข้อจำกัด

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

และถ้าฉันลาก TextView ด้านบนซ้ายออก ทุกอย่างจะเคลื่อนไหวตามนั้น ซึ่งเป็นวิธีที่ดีจริงๆ ในการจำกัดมุมมองทั้งหมดให้กันและกัน

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

แล้วพบกันใหม่ในวิดีโอหน้า

ในวิดีโอที่แล้ว เราวางมุมมองแปดครั้งบนหน้าจอสำหรับแอปพลิเคชันเครื่องคิดเลขทิป

ในวิดีโอนี้ เราต้องการเพิ่มตรรกะทางธุรกิจเพื่อทำให้แอปของเราโต้ตอบได้จริง เราต้องการทำได้เมื่อผู้ใช้ขัดบนแถบที่นั่ง เราต้องการอัปเดตป้ายกำกับเปอร์เซ็นต์ของทิป

และเมื่อป้อนเป็นจำนวนฐาน เราต้องการนำค่านั้นมาคำนวณเป็นยอดรวม

โดยเฉพาะอย่างยิ่ง คุณจะสังเกตเห็นว่าไม่มีปุ่มส่ง

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

สำหรับแบบฝึกหัดแรก สิ่งที่ฉันต้องการทำได้คือทันทีที่ผู้ใช้เปลี่ยนค่าบนแถบค้นหา ฉันต้องการอัปเดตป้ายกำกับเปอร์เซ็นต์

ดังนั้น ในการทำสิ่งแรก เราจะทำคือการอ้างถึงมุมมองในหน้าจอที่เราจำเป็นต้องอ่านข้อมูลหรือแก้ไขได้จริง

และจริงๆ แล้วมีวิดเจ็ตที่แตกต่างกัน 5 รายการบนหน้าจอที่เราสนใจเกี่ยวกับป้ายกำกับเปอร์เซ็นต์ทิป และทั้งหมดสำหรับส่วนประกอบทางด้านขวาของหน้าจอ

ในสตูดิโอของเรา วิธีที่เราจะทำคือประกาศตัวแปรจำนวนมากที่นี่สำหรับแต่ละองค์ประกอบ

ตัวอย่างเช่น เรามีข้อความสำหรับแก้ไข ซึ่งจะอยู่ที่จำนวนฐาน

และลักษณะนี้จะเป็นแบบแก้ไขข้อความ

แต่อย่ากังวลมากเกินไปเกี่ยวกับไวยากรณ์ที่นี่

หากทำให้สับสน เรากำลังพูดถึงตัวแปรส่วนตัว

มันเป็นการเริ่มต้นที่ล่าช้าเพราะเราจะเริ่มต้นมันภายในวิธีการ onCreate และไม่ใช่ในตัวสร้างซึ่งเป็นสาเหตุที่การเริ่มต้นช้าเป็นตัวแปรและเราเรียกมันที่ฐานเมานต์ตามแบบแผนที่ฉันทำตาม ชื่อของ ตัวแปรจะเท่ากับชื่อของ ID ทุกประการ

ตอนนี้ใน onCreate

หลังจากตั้งค่ามุมมองเนื้อหา เราจะพูดที่ฐานเมานต์ ค้นหามุมมองตาม ID และจำนวนฐาน

และเราจะทำซ้ำตอนนี้สำหรับส่วนประกอบอีกสี่ส่วนบนหน้าจอ

เรามีเคล็ดลับแถบค้นหา

และแบบที่นี่คือแถบค้นหา

แล้วเราก็มีเปอร์เซ็นต์ทิปทีวี

นั่นจะเป็นข้อความถึงคุณ

แล้วเราก็มีอีกสองข้อความสำหรับเรา

หนึ่งคือจำนวนเงินทิปทีวี และอีกรายการคือยอดรวมทีวี

ตอนนี้ฉันจะดึงข้อมูลอ้างอิงทั้งหมดเหล่านี้ใน onCreate และในที่สุดเราก็มีจำนวนเงินทั้งหมด

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

ที่จริงแล้ว ให้ฉันอัปเดตชื่อของตัวแปรที่นี่ เพียงใช้ป้ายกำกับ TV 2% เพื่อความสอดคล้อง

และวิธีที่เราได้รับแจ้งการเปลี่ยนแปลงบนแถบที่นั่งคือการเพิ่ม Listener เข้าไป โดยจะมีคำว่า Seek bar tip dot set บนตัวฟังการเปลี่ยนแถบค้นหา

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

และไวยากรณ์ที่นี่คือ เราจะพูดว่า object, Seek bar.on, Seekbar, Change listener.

แล้วเราจะนิยามคลาสนี้ภายในนี้

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

มีสามวิธีที่เราต้องแทนที่เพื่อให้สอดคล้องกับคำจำกัดความของสิ่งนี้บน Seebar ให้เปลี่ยน Listener

และ NRC จะช่วยเราในเรื่องนี้

และอย่ากังวลมากเกินไป

อีกครั้ง ไวยากรณ์ทำให้เกิดความสับสน

รายละเอียดที่นี่คือเรากำลังกำหนดคลาสนิรนามซึ่งใช้อินเทอร์เฟซนี้

ดังนั้น หากฉันไปที่คำจำกัดความที่นี่ คุณจะเห็นว่านี่คืออินเทอร์เฟซสาธารณะ ซึ่งมีสามวิธีที่เราได้แก้ไขแล้ว

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

และที่จริงแล้ว เราไม่สนใจจริงๆ เกี่ยวกับการแตะเพื่อเริ่มติดตาม หรือเมื่อแตะหยุดการติดตาม

ดังนั้นฉันจะลบค่าธรรมเนียมทั้งสองที่นี่ และปล่อยให้มันว่างเปล่าในการใช้งาน

ก่อนที่เราจะอัปเดต UI ให้เพิ่มคำสั่งบันทึกใน Android ก่อนเพื่อให้ทราบได้ง่ายขึ้นว่าเกิดอะไรขึ้น

ดังนั้นฉันจะเข้าสู่ระบบ i อย่างถูกต้อง และนี่คือวิธีที่ใช้พารามิเตอร์สองตัว

อันแรกคือ string ซึ่งฉันจะเรียก tack ฉันจะอธิบายทีหลัง

และอันที่สองก็เป็นสตริงด้วย ซึ่งเป็นข้อความหรือคำสั่งบันทึก

และฉันจะบอกว่าความคืบหน้ามีการเปลี่ยนแปลง ซึ่งเป็นชื่อวิธีการพร้อมกับความคืบหน้าซึ่งเป็นค่าปัจจุบันของแถบค้นหา

มากำหนดแท็กนี้กัน ฉันจะขึ้นไปบนสุดของคลาสและกำหนดแท็ก const Val ส่วนตัว

และหลักการที่นี่คือเมื่อใดก็ตามที่คุณมีการบันทึกใดๆ แท็กมักจะเป็นชื่อคลาส

เอาล่ะ มาลองดูกัน

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

เปิด logcat แล้วสิ

เปิดโปรแกรมจำลอง

และบันทึกที่เราสนใจคือบันทึกจากแอปพลิเคชันของเราเท่านั้น ซึ่งสงบ สงบ rk Pandey Tippi และเรายังสนใจเฉพาะบันทึกระดับข้อมูลเท่านั้น เพราะนั่นคือสิ่งที่ log.io แสดงถึงบันทึกระดับข้อมูล

เรายังสนใจเฉพาะบันทึกซึ่งมีแท็กเฉพาะนี้ ซึ่งเป็นกิจกรรมหลัก

มาเพิ่มกิจกรรมหลักเป็นตัวกรองกันเถอะ

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

ดังนั้นหากเราไปถึงจุดสูงสุด เราจะเห็น 30 อย่างที่เราคาดไว้ และถ้าเรากลับมาจนสุดทาง เราก็จะกลายเป็นศูนย์

ตอนนี้เรามาอัปเดต UI กัน

โดยเฉพาะอย่างยิ่ง เราต้องการอัปเดตป้ายกำกับเปอร์เซ็นต์ทิปทีวีเพื่อระบุความคืบหน้าในปัจจุบันของแถบค้นหา

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

แต่จริงๆ แล้ว เราต้องการแสดงความคืบหน้าเป็นสตริง ไม่ใช่ int

และเราต้องการเชื่อมเครื่องหมายเปอร์เซ็นต์หลังจากนั้นด้วย

เราจะบอกว่าความก้าวหน้าของเครื่องหมายดอลลาร์ ซึ่งเป็นวิธีที่เราทำการแก้ไขสตริงใน kotlin

คล้ายกับที่เราทำในคำสั่งบันทึก แล้วเพิ่มเครื่องหมายเปอร์เซ็นต์ต่อท้าย

มาลองกันเลย

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

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

ในการแก้ไขปัญหานั้น ให้กำหนดค่าคงที่อีกหนึ่งค่า ซึ่งเราจะเรียกว่า initial tip present

ดังนั้นเราจะมีเคล็ดลับเริ่มต้นส่วนตัวของ Val และเราจะตั้งค่าให้เท่ากับ 15

So initially, the default tip is going to be 15%.

So with that diviner the constant before we do anything in the listener, great in the onCreate method, will they seek bar tip dot progress is equal to initial tip percent.

And we also want to update the label appropriately.

So we'll say TV tip percent label dot text is equal to initial tip percent, with the percent sign after.

Now when we run the app, we should see instead of the blank 2% label, we should see 15% like we do and the progress bar indicator is exactly in the middle of the width of the whole seat bar.

Next, similar to how we are able to react to changes in the seat bar, we also want to be able to react to changes In the edit text, so there's a analogous method on the ET base mount we'll call add text change listener.

And the syntax is similar, we pass in an object here, which is an anonymous class is an implementation of the text watcher.

And we'll have Enter to help us once again, there are some methods that we have to override.

So I'm going to tap on that red light bulb and implement the members three, override all them.

And then similar to before, the only thing that we care about is after text change, I'm going to go ahead and delete the body of implementation here.

Just to get a better understanding of what's happening here.

Again, let's add a log statement after text changed.

dollar sign ups.

Alright, let's try it.

So dollar sign s is the parameter passed in.

And that is actually what the user is typing at that moment.

Run this, let's open up logcat once again.

Alright, so like before, if I modify the seek bar, you can see that it is changing appropriately.

And then if I add the value into the edit text, you can see 800 it is being updated appropriately in log.

Two quick notes.

First, I sometimes see students will get tripped up when they invoke functions in kotlin.

The MSG that you're seeing when we call log into it is a hint from energy about what that parameter represents.

So if you actually type MSG, that will lead to a compile error.

So let's make sure you don't do this.

Second, I want to demystify what the object keyword means.

So the object expressions like we're using twice so far, are examples of how to create anonymous classes, which are one time use classes that are commonly used to implement interfaces.

So we have both text watcher and on seekbar change listener as interfaces defined by the Android system.

And these methods that we're overriding will automatically be invoked for us when the user takes the appropriate action on the underlying edit text or seekbar.

So now we have all the ingredients in place to actually make this app functional.

Whenever the Edit Text changes, I'm going to call a method called compute, tip, and total.

And this is actually what will take the values from the edit text and seekbar and then update the tip and total amount appropriately.

So this method doesn't exist yet.

But again, let's leverage the utility of Android Studio and have to create this function for us inside of main activity.

And there are a couple things that have to happen in this method.

First, we want to get the value of the basic tip present.

Second, we'd like to compute the tip in total.

And third, we need to update the UI to show those values.

So to get the value of the basic tip, that's pretty straightforward, we just look at the edit text at base amount, grab the text, and then call to string on it.

And then on a string, we know it's going to be a currency like a decimal, so we'll call to double on it, in order to turn it into a number that we can work with.

And we'll call this base amount.

And then similarly, for the 2%, we want to get the value of the progress on the seat bar, this attribute called progress, and that'll be saved in a variable that I'm going to call tip percent.

Quite Next, we want to compute the tip and total amount.

So the tip amount is going to be the base amount, times the tip percent divided by 100.

So for example, if the base amount is $100, I went for $100 meal, and the tip percent is 20, then I expect the tip amount to be $20.

So that'd be 20 divided by 100 is 20% times 100.

And that gives me $20.

So that'll be tip amount.

And then we have the total amount, and the total amount is simply going to be the base amount, plus the tip amount.

Okay, finally, we need to update the UI.

And again, this turns out to be pretty straightforward, because we have a reference to the two text views which show the tip and total amount, which is TV tip amount, and we're going to set the text attribute there to be tip amount.

And this is going to throw an error because tip amount is a number it's a double right, but we actually require something called a car sequence.

And to give it a car sequence, we can just call to string on this.

And then similarly, we call we need to say TV total amount is that the text attribute here to be the total amount to string.

And this should be a plus sign.

Wait, this is the whole brain of our application.

So if we run this, then what we're doing is anytime that the edit text value has changed, we're going to call this method and we should be updating the UI To have the correct amount for the tip and total amount, right, so we have 15%.

For the tip, if I add in $100 here, then you do see immediately we get the correct tip and total computation.

And we would like to have the same logic get executed if I change the seat bar, the 2%.

And that turns out to be really easy, because we've abstracted all the logic away into this method.

So I'm going to call compute tip and total, right here in on progress changed.

Alright, so if you try this now, we should have a pretty functional app.

So similar to before, if I put in 100.

Here, we do correctly compute 115.

And if I change the percent, you can see it does appropriately updated.

Alright, so this is working actually pretty well.

But there are two things that I think are incorrect or could be improved.

But just take a moment right now think about what are two improvements that you could do to the app that we have right now try playing around with it, see if you can identify any issues.

Okay, so the first improvement that we can make is actually a bug.

So notice what will happen now if I Backspace on the base amount, so that there's nothing there, so you can see the app actually crashed.

So if we look at logcat, let's take a look at what actually was the error.

So I'm going to scroll up to the very top of the stack trace.

And you can see here we have a number format exception.

This is the important part, there's an empty string.

And and the stack trace tells us exactly where the issue happened is a main activity line 58.

And so the issue that's happening is that when the edit text has an empty value, then it doesn't make sense to try and convert an empty string into a double.

The very first thing we shouldn't be doing here is actually checking if at base amount done dot txt, if that is empty, then we need to do an earlier turn.

Additionally, we should be clearing out the values of the TV tip and total amount.

Because if the edit text is empty, that means there's nothing to tap on.

And we should be showing nothing for those two textures, then we call return, so that none of the rest of the function will get executed.

The second improvement we'll make is about formatting the output of the tip and total amount.

So it's not that noticeable when we enter in 100 for the base amount.

But if we add in 100.9, then you can see the total amount becomes very long and unwieldy.

Because we're dealing with currency, we should really be mandating that there are exactly two decimal points in both a tip and total amount.

And the way we'll do that is right here, instead of just calling to string, we want to format the string before we put it into the TextView.

So the way we do that is by using this format method.

So we define the format like this percent.to F, which means we only want two numbers after after the decimal point dot format.

And we pass in the tip amount.

And then similarly for the total amount, a percent dot two f format.

Let's try it.

For hopefully now, in this scenario, we should actually end up with 116.04 instead of this very long decimal that had happened 100 right away, you can see instead of only having one decimal point now we have two.

And the true test is when I type in 100.9.

Now, the display of this is way better, we have 116.04 rather than that huge decimal which becomes unreadable.

So at this point, we have a very functional app, what we've done is gotten references to the relevant views on layout, and then added listeners to the seekbar into the Edit Text because there's no Submit button.

Anytime there's any change in the seekbar or the edit text, we are dynamically computing the tip and total amount and updating the views appropriately in this compute tip a total amount.

So in the next video, what I want to show you is some style improvements along with a way to personalize it and add a really cool animation.

So I'll see you in the next one.

At this point, we're done with the implementation of our tip calculator.

In this video, our goal is to add some color animation and personalization into the app.

So we'll start off with the footer at the bottom.

A lot of apps or websites have this where it says you know made with love in California or made with love by this person.

So we're gonna start off by adding a text at the bottom of the screen.

So let's go into enter studio, open up the activity main dot XML and scroll down to the bottom and we're going to drag out one TextView here.

Let's give it an ID of TV footer.

And then the text will be made with love by raw and of course you can personalize however you want to constrain it.

We're going to have this horizontally be in the center of the screen.

So we're gonna add a left and right Straight to make it centered, and then we're gonna make it 32 dP from the bottom of the screen.

I also want to add a couple different style tweaks here.

First is all caps, I want to make everything here capitalized.

And I want to change the font to be sans serif, condensed, slight.

And then finally, I want to make this a little bit larger text, appearance, medium weight.

And finally, I want to change the love word with the emoji.

And you can either add this to your keyboard, or another way to do this is if you Google for heart emoji, then the first result that comes up, gives me an option here to copy and paste the emoji.

paste that in.

And it looks a little bit weird in the preview, but it does show up properly when you render it in the design.

And if we check it out in the app.

Awesome, that looks pretty good.

The next thing I like to do is a bit the color scheme.

So we move away from these default status bar color color primary in this background white.

So let me explain where these colors are coming from.

There's one very important file that must exist in every single Android app.

And that's called the Android manifest file.

So if we open that up, then this file describes all the different components of your application, the permissions, for example, if your app needs internet permission, and much more.

And the important line for us is right here on line 11, where we're describing the theme of our application, and this is a file that automatically gets created for us when we create the empty project.

So I'm going to jump to the definition here.

And you'll see you have two different files here, one for normal theme and one for the night theme.

And the one that we're currently looking at is normal, I'm gonna open that up.

And this is where we're getting the colors for the default application that we have.

So in order to update the colors, we're going to have to define new colors and then replace them here, we can take a look at where this file lives by hitting this option, select Open File, and we can see that it lives inside of resources, values, and themes directory.

And the colors are also defined inside of colors XML in the values directory.

And each of the colors is defined as a hexadecimal value, purple, 500, and so on.

So our job is let's figure out what colors we want, and then add them here.

And then we'll reference them inside of the themes XML file.

So in order to figure out what colors you want, there's a couple different options, I'll show you what I typically do if you go to color.adobe.com.

There's this really nice tool where you figure out what kind of color scheme you want.

So there's a couple different options here, you can pick the color harmony rule, analogous monochrome chromatic triad, and so on.

Once you're happy with something, then you can scroll down and grab the hexadecimal values here.

So I did this exercise already.

And here are the colors I came up with, I'm going to have one which is called primary blue, darker blue and background blue.

So let's go ahead into the colors XML and define these for the first one is going to be called primary blue now has this value.

The next one is background blue, or the next one's a darker blue.

And then finally, we have background blue.

So now in themes XML, I updated the color primary to be primary blue.

And then I updated the primary variant to be darker blue, and that's gonna be the color of the status bar.

And then finally, in order to have a background color on the whole app, I'm going to add one more attribute here, which is called background color, Android color background.

And that is going to be the background blue that we have.

Let's try it.

Awesome, that looks great.

So we're getting very close now, to the desired end state, we have the footer, and we have the customized color.

The last thing I want to talk about is this animation on the tip description.

And here's actually what this looks like.

As the user is scrubbing, we will dynamically update the color of that word that's used to describe the current tip percentage, and it'll go from Red if it's a very bad tip to a really bright green if it's really good tip.

Not only that, but we're also going to be changing that word or that adjective used to describe the tip percentage.

So it gives the user some really nice interactive feedback about what kind of tip they're leaving.

Alright, so the first thing we'll do is just added text you need the seek bar and increase the vertical distance between these two texts.

So close out these other editor windows because we don't need to look at them again.

In activity main.

What we'll do is first increase the distance between the 24% which is the 2% label and the TV tip label.

Let's increase the margin here to be 56 Next, let's drag out one more text you.

And we'll call this TV tip description.

And then the text should be empty, because that will depend on the initial tip percent, which is set programmatically.

But to get a better sense of what this might look like, we are going to use a tools namespace and to say acceptable here.

That looks good.

And now we need to position this horizontally and vertically.

So vertically, it's going to be right below the seek bar tip bar, and we'll add a margin here of maybe eight dp.

And then we want these two to be horizontally aligned.

So horizontal centers, great.

And you can see how it added the left and right constraints.

So it'll be right in the middle.

And you can see the error also went away.

So now back in MainActivity, we need to get a reference to that TextView.

So let's say the ID here was TV tip description.

So when I say TV tip description, get a reference to it here.

And every time the C part is changed, that is where we have the potential now, to update the language on that text, you want to have one more method here called update tip description.

And let's have Enter to help us to create this because this method doesn't exist yet.

And one thing we'll do actually is as a parameter into the update tips, description method, I'd like to pass in the progress and progress.

And again, energy video can now help us to add this as a parameter into the function that we have defined.

The tap that red light bulb, and have Enter to help us to add the parameter and all I did here is added a parameter.

And instead of calling it progress, I'm going to call it tip percent.

And it's I've typed in.

So now the idea is that based on the value of tip percent, we'd like to be able to say TV tip description dot txt, and we'd like to be able to set it to be something like good.

And of course, this good will change based on the value.

And the construct in kotlin.

To be able to decide a value of something based on a set of conditionals is called when which is similar to a switch in Java.

So I'm going to save our tip description is equal to when and then depending on the value of 2% will take certain action.

So if tip description, if 10% is between zero and nine, then the string should be poor.

If it's between 10 and 14, we'll call it acceptable 15 and 19, it'll be good.

And when it's between 20 and 24.

It'll be great.

And there should be one extra period in here.

And finally, anything else meaning that the value is above 24 then we will say amazing.

And so now instead of using good here, we will say tip description.

And finally before we test this out one more thing I want to do is at the very beginning, when we are setting up our screen, which is you know in the onCreate method, as soon as we get all the references to each of the views, we also would like to call that method update tip description right here with the initial tip percent just so that language is always going to be in sync with what we start out with.

Let's try it.

So now hopefully we should see a text you right underneath the seekbar and the text on in that text you should change according to what we have selected through the seekbar.

Okay, this looks promising already because initially the 2% is 15, which means we fall into this branch of the wine statement and that means that the value should be good.

That's good.

And then if we bring it down to zero, we get poor and if we go all the way up, we should get amazing which we do.

One quick thing want to do is back in activity main.

I want to set the font weight of this to be bold.

The textile should be bold to make it stand out a little bit more.

Finally, the last thing I want to show is this interactive color animation where if the user picks a very good tip we show bright green and if the user picks a bad dip, then we show a red color indicating something went wrong.

Coming back into Android Studio in minute tivity kotlin update tip description is where we're going to add the logic for updating the color based on the tip percent.

The question is how do we dynamically compute a color based Based on an integer, the way we'll do this is through a concept called interpolation, which is actually a fancy word for something which is conceptually quite simple.

If I tell you I'm running 100 miles, and I'm 75% of the way done, then you would tell me that I'm roughly at the 75 mile mark.

And what you're doing in your head is linear interpolation, you're assuming I'm going at a constant speed starting at zero ending at 100.

Therefore, I'm at 75 miles, the same thing is exactly applying here.

Every color can be represented as integer.

So if I'm tipping 20%, then we're two thirds of the way between the very worst color and the very best color, which are two integers.

And all we need to do is some simple math in order to compute what exactly that color value is, for the tip description.

The first thing we'll do is define the color for the worst invest tip.

So open up colors, XML, and let's add in color words tip color, best tip and I picked a red and green color like we talked about, we're going to paste these values in for color worse and color best.

So we have these defined.

And now our job is simply to do some math at zero, we should show worst tip at 30, we should show the best tip and everything else is some value in between.

and this turns out to be so common that Android actually has something called a RGB evaluator to help with this, where we represent colors as integer values.

A stands for alpha, RGB is red, green, blue, and it will help compute the color for us.

So coming back into main activity, we're going to define a color.

And that will be coming from argb evaluator dot evaluate.

And then this takes in three parameters.

One is the fraction of where are we on this progress bar between zero and 32nd is a start value, which is the very worst color and the end value is the best color.

So the fraction is simply going to be the tip percent, which is the perimeter pass 10 divided by the maximum amount of tip which is 30.

And that's going to be seapark tip dot max.

Next, we need to get the very worst color.

And the way we'll do that is context compat dot get color pass in this which is referring to the context and then the actual color that we just defined in the colors XML, which is color first.

And then finally, we're going to provide the best color here.

One issue you'll notice is that there's a type mismatch, we require a float, but we found integer.

So by default, because both the numerator and denominator are integers, we're gonna do some sort of truncation, which we don't want.

So the way to handle this is to cast one of the numerator or denominator to a float value.

And that will resolve that.

So now we have this color, all we need to do is set the color on the tip description text, set text color, with the color.

And finally before before we try this, we need to cast the result of the evaluate function call to be an integer, because we know the values we're computing between are integers, so the color should be an int.

And now we should be able to compile and run this just fine.

So two things should happen now.

One is we should bold the text.

And second, there should be a color applied immediately.

And based on what present we pick, it should adapt as well.

Right, this looks good.

So initially, we have a color right in between the green and red.

And if I go all the way down to zero, you can see how it changes to red.

And if I scrub upward to the best tip, which is 30, you can see how it slowly transforms from red to green.

I like that a lot just because it feels much more interactive and dynamic now compared to what we had before.

Alright, so let's give it one last try.

We're going to put in $9 here for the bill.

And then as I scrub, you can see how everything updates appropriately.

If I Backspace, there's no crash, I can enter in another amount.

And everything works just as we expect.

Awesome.

So if this is your first ever entered app, that's amazing.

Congratulations.

Let me know in a comment.

The reason I really liked the tip calculator, there's so many ways you can extend this basic project that we have to make it more interesting.

So a couple ideas I had number one, you could split the bill by n people.

So you could imagine that you go out to dinner with the number of people you add in three or four and then you should divide that total amount by three or four in order to make it easy for everyone to pay a certain amount.

Second, you could add a button or some sort of component which allows the user to round the final amount up or down.

So there's no need to deal with change.

And of course, there's a lot more that you could do in terms of design or color updates.

So what I recommend now is complete any number of extensions, other ones that we talked about, or something that you came up with on your own, and then you can more or less publish exactly what you have on the Play Store.

I won't walk through that here, but I'll leave a video in the description where I talk about how to do that and I hope that you use This tip calculator as a starting point in your journey as an Android developer and you build many more apps in the future.

If you enjoyed this, please drop a like and comment.

We'd love to hear from you.

Thanks so much for watching and I will see you in the next one.

Bye