Home / Developer  / Android Developer  / Material Design สำหรับ Android การสร้าง Tab และ Fragment

Material Design สำหรับ Android การสร้าง Tab และ Fragment

การออกแบบ UI บนแอพพลิเคชัน Android ด้วย Material Design ในการเรียกใช้ Tab และการจับการ Swipe ตอนสัมผัสหน้าจอร่วมกับ Fragment เบื้องต้นสำหรับผู้ออกแบบ UIApps

ก่อนจะเข้าบทเรียนนี้แนะนำให้ศึกษาบทเรียนต่อไปนี้ครับ

ถ้าศึกษาเรียบร้อยแล้วเรามาเริ่มบทเรียนนี้กัน จะเป็นการใช้ Android Styles และ Tab แบบ Material Design ครับ

Screen Shot 2558-09-26 at 9.45.27 AM

สร้าง New Project ใหม่เป็น Blank Activity ครับ เสร็จแล้วแก้ไข gradle.app (Build) ต่อไปนี้ครับ

หากมีการ Sync แล้วมีการอัพเด็ตเพิ่มให้อัพเด็ตไปเลย

สร้างไฟล์ colors.xml ใน Folder ชื่อ values ครับ

เลือกสีตามใจชอบครับ แล้วต่อด้วยปรับแก้ไฟล์ dimens.xml

แก้ไขไฟล์ styles.xml ให้เราสร้าง ธีมใหม่เข้าไปครับตั้งชื่อว่า “MyThemeDaydev”

สุดท้ายแก้ไขไฟล์ AndroidManifest.xml

สังเกตจะเห็นว่าแก้ไขแค่ส่วนของ

เท่านั้น แก้ไขเพียงจุดเดียว

Screen Shot 2558-09-26 at 10.44.20 AM

ทดสอบดูก็จะเห็นว่าสวยดี ต่อมาเราจะสร้างหน้า Detail สำหรับใช้ร่วมกับ Tab Bar ครับ ให้เราคลิกสร้าง Blank Fragment Activity ตามนี้ครับ

Screen Shot 2558-09-26 at 10.44.37 AM

ตั้งชื่อว่า OneFragment.java และ fragment_one.xml ซะ

Screen Shot 2558-09-26 at 10.44.52 AM

ใส่ code ครับไฟล์ OneFragment.java ให้แก้ไขเป็นดังนี้

และแก้ไขไฟล์ fragment_one.xml ตามนี้

ทำซ้ำสเต็ปเดิมคือ สร้าง Blank Fragment ใหม่แต่ตั้งชื่อว่า TwoFragment, ThreeFragment

แก้ไขแค่

และไฟล์ fragment_two.xml คือ

ทำแบบเดียวกันกับ ThreeFragment.java และ fragment_three.xml

Screen Shot 2558-09-26 at 10.48.18 AM

นำ Android Design ของ V23.0.1 มาใช้กับ โดยแก้ไขไฟล์ activity_main.xml ดังนี้

เป็นการสร้าง Tabs ขึ้นมาบนรูปแบบของ Material Design ครับ ต่อมาให้ไปแก้ไข MainActivity.java ตามนี้

ประกาศ Header ก่อน

บน OnCreate() แก้เพิ่มดังนี้

สร้าง class เพิ่มคือ

เพิ่มฟังก์ชันเรียกใช้ Fragment View ไปยัดใน Tab item

ภาพรวมไฟล์ MainActivity.java

ทดสอบการทำงาน โดยการ Swipe หน้าจอไปมา หรือแตะที่ Tab ดูเพื่อทดสอบ

Screen Shot 2558-09-26 at 10.26.42 PM Screen Shot 2558-09-26 at 10.26.51 PM Screen Shot 2558-09-26 at 10.26.57 PM

 

 

 

 

 

 

 

 

สนุกไหมล่ะ Material Design สำหรับ Android

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: