สารบัญ:
- เสบียง
- ขั้นตอนที่ 1: การออกแบบประสบการณ์ผู้ใช้
- ขั้นตอนที่ 2: Fragment Manager และ 3 หน้าจอ
- ขั้นตอนที่ 3: เค้าโครงหน้าจอแอพและบทนำ
- ขั้นตอนที่ 4: การกำหนดโลโก้และบอล Syles
- ขั้นตอนที่ 5: คำอธิบายภาพเคลื่อนไหว
วีดีโอ: แอพ Android ตอนที่ 1: หน้าจอเริ่มต้นโดยใช้ Fragments/Kotlin: 5 ขั้นตอน
2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:03
สวัสดีอีกครั้ง, เป็นไปได้มากว่าคุณมีเวลาว่างที่บ้านเนื่องจากโควิด19 และคุณสามารถกลับไปดูหัวข้อที่คุณอยากเรียนรู้ในอดีตได้
การพัฒนาแอพ Android เป็นหนึ่งในนั้นสำหรับฉัน และฉันตัดสินใจลองอีกครั้งเมื่อไม่กี่สัปดาห์ก่อน
การเขียนโปรแกรมใน Kotlin ช่วยลดความพยายามในการเขียนโค้ดลงได้อย่างแน่นอนและช่วยให้ได้ผลลัพธ์ในเวลาอันสั้น มันเยี่ยมมาก!
ในชุดบทช่วยสอนนี้ ฉันจะอธิบายวิธีพัฒนา Tennis Score Tracker แอพนี้สามารถใช้ได้เมื่อคุณเล่นกับเพื่อนและ/หรือครอบครัว (คุณสามารถมอบแท็บเล็ตให้ลูกของคุณและทำให้เขา/เธอยุ่ง:)) แอพนี้อิงตามตัวอย่าง Kotlin Counter
กวดวิชามีส่วนต่อไปนี้:
ส่วนที่ 1: Splash Screen โดยใช้ Fragments (เราอยู่ที่นี่แล้ว)
ส่วนที่ 2: การกำหนดค่าการจับคู่ - Properties
ส่วนที่ 3: ตัวติดตามคะแนนการแข่งขัน
แนวคิดหลักคือการแบ่งแอปออกเป็น 3 หน้าจอที่แตกต่างกัน แต่ละหน้าจอจะเรียกหน้าจอถัดไป เมื่อเสร็จแล้วหรือเมื่อผู้ใช้กดปุ่มตามลำดับ
ในส่วนแรกนี้ ผมจะอธิบายวิธีสร้างหน้าจอแนะนำ -> ตรวจสอบวิดีโอด้านบน
เสบียง
คุณลักษณะของ Android ที่ใช้ในส่วนนี้:
- ชิ้นส่วน
- แอนิเมชั่น
- การสั่นสะเทือน
- เครื่องเล่นสื่อ
- ผู้ฟัง
เครื่องมือที่จำเป็น:
- Android Studio
- Kotlin 1.3.61
- API ระดับ 28
ทรัพย์สินที่จำเป็น
ไฟล์เสียงบี๊บ
ขั้นตอนที่ 1: การออกแบบประสบการณ์ผู้ใช้
มาอธิบายคุณสมบัติของหน้าจอ Intro กัน
- เราอยากได้แบบเต็มจอเป็นสีขาว
- เราต้องการให้หน้าจออยู่ในโหมดแนวนอนเสมอ
- เราต้องการสีข้อความโลโก้ของเราเป็นสีเทา
- เราต้องการสีลูกบอลของเราในโทนสีเขียว
- เราต้องการให้ข้อความโลโก้ของเราจางลง
- เราต้องการลูกเทนนิสเคลื่อนที่ในหน้าจอ (ลูกเด้ง)
- เราต้องการเล่นเสียงทุกครั้งที่ลูกบอลสัมผัสพื้นผิว
- เราต้องการกระตุ้นการสั่นของโทรศัพท์เมื่อมีการเล่นเสียง
- เราต้องการให้ระยะเวลาอินโทรน้อยกว่า 4 วินาที
ขั้นตอนที่ 2: Fragment Manager และ 3 หน้าจอ
มาย้อนนึกถึงแนวคิดหลักของแอพของเรากันเถอะ เราต้องการมี 3 หน้าจอ (บทนำ คุณสมบัติ และคะแนนการแข่งขัน) สำหรับสิ่งนี้เราจะใช้ Fragments ดังนั้นเราจึงต้องการ 3 อันสำหรับแต่ละหน้าจอ อ้างถึงข้อมูลโค้ดแรก
ในอันที่สอง เราจะพบว่าเราเรียกแฟรกเมนต์แรกของเราได้อย่างไร Splash Fragment เป็นส่วนที่ใช้สำหรับ Intro ของเรา
ขั้นตอนที่ 3: เค้าโครงหน้าจอแอพและบทนำ
- เพื่อแก้ไขตำแหน่งของหน้าจอและละเว้นการหมุนของโทรศัพท์ เราจำเป็นต้องเพิ่มโค้ดต่อไปนี้ รูปภาพ 1 ใน AndroidManifest.xml
- ในการลบ Action Bar ออกจากทุกหน้าจอ เราต้องเพิ่มโค้ดต่อไปนี้ รูปภาพ 2 ใน styles.xml
- ในการที่จะดันแบบเต็มหน้าจอในทุกหน้าจอ เราต้องตั้งค่าสถานะบางอย่างดังในรูปที่ 3 โดยใช้ 2 วิธีที่แตกต่างกัน Oncreate() และ onWindowFocusChanged
ขั้นตอนที่ 4: การกำหนดโลโก้และบอล Syles
- เรากำหนดไว้ก่อนข้อความของเราเป็นสีเทา ซึ่งทำได้ภายใต้ไฟล์ styles.xml อ้างถึงภาพที่ 1
- เรากำหนดไว้เช่นกันว่าลูกบอลควรอยู่ในโทนสีเขียว สำหรับสิ่งนี้ เราสร้าง ball.xml ภายใต้โฟลเดอร์ที่ถอนได้ ตรวจสอบ Pic 2
ขั้นตอนที่ 5: คำอธิบายภาพเคลื่อนไหว
ฉันจะอธิบายตรรกะและลำดับของแอนิเมชั่นที่นี่ ฉันคิดว่ามันไม่เหมาะสมที่จะเพิ่มข้อมูลโค้ดที่นี่ คุณควรอ่านโค้ดด้วยตัวเองดีกว่า
แนวคิดของแอนิเมชั่นมีดังนี้:
- หลังจากสร้างชิ้นส่วนแล้ว โลโก้ข้อความจะถูกสร้างขึ้นและเริ่ม
- เมื่ออนิเมชั่นโลโก้ข้อความเสร็จสมบูรณ์ ลูกเทนนิสจะเรียกการเคลื่อนไหวแบบพาราโบลาครั้งแรก
- เมื่อการเคลื่อนไหวพาราโบลาครั้งแรกเสร็จสิ้น เสียงจะเล่นและโทรศัพท์สั่น.. และการเคลื่อนไหวพาราโบลาถัดไปจะเรียก
- เมื่อการเคลื่อนไหวพาราโบลาครั้งสุดท้ายเสร็จสิ้น และเสียง/การสั่นสะเทือนถูกดำเนินการ เราก็มาถึงจุดที่เรียกหน้าจอที่สองของเรา
หมายเหตุ: ฉันไม่ได้สร้างคลาสนามธรรมสำหรับแอนิเมชั่น เพราะฉันต้องการให้โค้ดเรียบๆ… อย่างน้อยก็ทำตามได้ง่ายขึ้นสำหรับฉัน:)
ฉันจะโพสต์ส่วนที่สองของซีรีส์ในวันถัดไป ติดตามฉันหากคุณชอบส่วนนี้ และถ้าไม่ ฉันยินดีที่จะรับคำติชมของคุณ
แนะนำ:
นาฬิกาดิจิตอล LED Dot Matrix - แอพ ESP Matrix สำหรับ Android: 14 ขั้นตอน
Digital Clock LED Dot Matrix - แอพ ESP Matrix สำหรับ Android: บทความนี้ได้รับการสนับสนุนอย่างภาคภูมิใจโดย PCBWAY.PCBWAY สร้าง PCB ต้นแบบคุณภาพสูงสำหรับผู้คนทั่วโลก ลองด้วยตัวคุณเองและรับ 10 PCBs เพียง $5 ที่ PCBWAY ด้วยคุณภาพที่ยอดเยี่ยมมาก ขอบคุณ PCBWAY บอร์ด ESP Matrix ที่ฉันพัฒนา
Mini Drawing Bot - แอพ Android แบบสด - Trignomentry: 18 ขั้นตอน (พร้อมรูปภาพ)
Mini Drawing Bot - แอพ Android แบบสด - Trignomentry: ขอบคุณพระเจ้าและพวกคุณทุกคนที่ทำให้โปรเจ็กต์ของฉัน Baby-MIT-Cheetah-Robot ชนะรางวัลที่หนึ่งใน Contest Make it Move ฉันมีความสุขมากเพราะเพื่อนจำนวนมากถามคำถามมากมายในการสนทนาและในข้อความ คำถามสำคัญประการหนึ่งก็คือว่า
บ้านอัจฉริยะด้วย Arduino MKR1000 และ M.I.T. แอพ Android: 4 ขั้นตอน
บ้านอัจฉริยะด้วย Arduino MKR1000 และ M.I.T. แอพ Android: ในบทช่วยสอนนี้ ฉันจะอธิบายวิธีปรับปรุงบ้านอัจฉริยะของคุณด้วยส่วนประกอบเพียงไม่กี่อย่าง หัวใจของการออกแบบบ้านอัจฉริยะนี้คือบอร์ด Arduino MKR1000 ซึ่งควบคุมด้วยแอพที่ออกแบบบนเว็บไซต์การพัฒนาของ M.I.T. (สถาบันแมสซาชูเซตส์
แอพ THINGSPEAK อุณหภูมิและความชื้นโดยใช้ ESP8266: 9 ขั้นตอน
แอพ THINGSPEAK TEMPERATURE และ HUMIDITY โดยใช้ ESP8266: ในขณะที่กำลังแก้ไขอุปกรณ์อิเล็กทรอนิกส์ ฉันมีไอเดียนี้ที่จะสร้างแอพพยากรณ์อากาศบนเว็บ เว็บแอปนี้ใช้เซ็นเซอร์ SHT31 เพื่อรับข้อมูลอุณหภูมิและความชื้นแบบเรียลไทม์ เราได้ปรับใช้โครงการของเราในโมดูล ESP8266 WiFi ออนไลน์หรือออฟไลน์
ARDUINO – BLUETOOTH 12 แอพ CHANELL: 4 ขั้นตอน
ARDUINO – BLUETOOTH 12 CHANELL APPS.: สำหรับการควบคุม Arduino ผ่าน Bluetooth เป็นแอพที่เรียบง่าย พื้นฐานและใช้งานได้ แอพ Arduino Bluetooth Relay 12 Channels รองรับการควบคุมโมดูลรีเลย์ 12 ช่องสัญญาณผ่าน Bluetooth (HC-05, HC-06, HC-07 ect .) โมดูล คุณสามารถใช้เพื่อควบคุม Ar