Android Developer

เขียนแอพ Android สร้าง Animation เวลาเปลี่ยนหน้าด้วย Intent

การเปลี่ยนหน้าของ Android ด้วย Intent Activity นั้นบางทีเราต้องการ Animation เลื่อนหน้าจอจากขวาไปซ้าย หรือซ้ายไปขวา ให้ดูน่าสนใจเราสามารถทำได้ดังนี้

ให้เราสร้าง New Project ขึ้นมาใหม่ตั้งชื่อว่า IntentAnimation กำหนดรูปแบบเป็น Blank Activity ครับ

Screen Shot 2558-12-29 at 9.02.03 PM

สร้าง New Project มาใหม่

Screen Shot 2558-12-29 at 9.02.31 PM

เลือก Blank Activity

เมื่อพร้อมแล้วให้ออกแบบหน้าจอของแอพพลิเคชันของเราด้วย Button Widget แก้ไขไฟล์ content_main.xml ตามนี้

จะได้หน้าจอแอพพลิเคชันหน้าตาแบบนี้

Screen Shot 2558-12-29 at 9.29.41 PM

คลิกขวาที่ โฟลเดอร์ res บน Project ของเรา ทำการเปิดไปที่ Explorer  บน PC หรือ Finder บน Mac

Screen Shot 2558-12-29 at 9.30.14 PM

เปิดบน Finder

Screen Shot 2558-12-29 at 9.30.53 PM

ทำการสร้าง Folder ขึ้นมาชื่อว่า “anim” เสร็จแล้วกลับมาที่ Project ของเราจะพบว่า res จะมี package folder ชื่อ “anim” ปรากฏขึ้นมาให้สร้างไฟล์ XML ใหม่ 4 ไฟล์คือ

Screen Shot 2558-12-29 at 9.33.48 PM

แต่ละไฟล์จะมีโครงสร้างดังนี้

ต่อมาให้สร้าง Class ใหม่ขึ้นมาใน Project

Screen Shot 2558-12-29 at 9.33.24 PM

ตั้งชื่อว่า RootActivity.java ใส่ code ดังนี้

ให้เราไปแก้ไข MainActivity.java ในส่วนของ extends Class ครับ (ระวังเรื่อง ToolBar ให้ทำ setter ซะ)

ทำการสร้างหน้า Activity ปลายทางสักหน้า

Screen Shot 2558-12-29 at 9.58.43 PM

ตัวอย่างผมออกแบบหน้าของผมเล่นๆ มา 1 หน้า

Screen Shot 2558-12-29 at 10.16.14 PM

ทำการทดสอบดู

Screen Shot 2558-12-30 at 9.53.56 AM

เปิดโปรแกรม Genymotion ขึ้นมา

Screen Shot 2558-12-30 at 9.56.47 AM

ทำการ run ตัวแอพพลิเคชันของเราแล้วกดที่ปุ่ม Change View

Screen Shot 2558-12-30 at 9.57.01 AM

สังเกต แอนิเมชันการเปลี่ยนหน้าของแอพพลิเคชันของเรา

วีดิโอสาธิตก็มีนะครับ

จะเห็นว่าเกิดการเปลี่ยนหน้าแบบ แอนิเมชัน Swipe ซ้ายขวาแล้ว ง่ายไหมครับ ดาวน์โหลด source code ที่:

https://github.com/banyapondpu/IntentAnimation

Tags

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน