Home / Developer  / Android Developer  / เขียนแอพ Android การใช้ CardView ร่วมกับ UI

เขียนแอพ Android การใช้ CardView ร่วมกับ UI

หลังจากที่เราได้ศึกษาการใช้งาน Material Design ออกแบบ UI ของ Android ไปแล้วคราวนี้เราก็จะมาลองใช้งาน CardView บน Android ของเราครับว่ามันจะสวยงามแค่ไหน

บทความที่ควรศึกษาก่อนหน้านี้ เขียนแอพ Android การปรับ UI ด้วย Material Design

หรือหมวดหมู่สำหรับนักพัฒนาแอพพลิเคชันบน Android

http://www.daydev.com/category/developer/android-developer

สร้าง Project ใหม่หรือเปิด Project เดิมจากบทความ “เขียนแอพ Android การปรับ UI ด้วย Material Design” ขึ้นมาเขียนต่อก็ได้ครับ

รอบนี้เราจะมาสร้าง CardView กัน สำหรับ CardView เป็นแบบไหนนั้น ให้เราคิดซะว่ามันคือรูปแบบการออกแบบ Layout ทั้งบนเว็บ และแอพพลิเคชันที่กำลังเป็นเทรนด์ ณ เวลานี้คือรูปแบบ Solid Shape หรืออยู่ในการออกแบบของ Material Design ครับ

ตัวอย่าง

ตัวอย่าง

ให้เราเริ่มต้นต่อเนื่องหลังจากปรับหน้า UI เราเสร็จเป็น Material Design เป็นที่เรียบร้อย

Screen Shot 2558-09-05 at 2.19.07 PM

ให้เราเปิดไฟล์ build.gradle ใน Gradle Script ขึ้นมาครับ

Screen Shot 2558-09-05 at 2.11.07 PM

เพิ่มส่วนของ CardView ลงไปใน build.gradle ตามนี้ครับ (ตรวจสอบเรื่องเวอร์ชันเล็กน้อยว่า 23,22,21 หรือเปล่าเลือกเอาตามสะดวก)

ในตัวอย่างคือ cardview-v7:21.0.+ ครับ ( ที่ผมเลือกใช้นะ)

ทีนี้ผมจะใช้ภาพประกอบ Profile สักหน่อยก็ไปหาภาพของหมอฟันนักดวลปืนในตำนานอย่าง Doc Holliday จากหนังเรื่อง Tumbstone ที่รับบทโดย Val Kilmer มาใช้ซะหน่อย

doc

เปิด res->drawable คลิกขวาเปิดด้วย Explorer หรือ Finder ก็แล้วแต่เอาภาพไปวางลงในนั้นครับ

Screen Shot 2558-09-05 at 8.29.39 PM

ไปที่ไฟล์ activity_main.xml ครับ เพิ่มส่วนของ CardView ลงไป ให้เราทำการแก้ไข RelativeLayout เป็น TableLayout แต่ก็ยังมีการ Include toolbar.xml จากบทเรียนก่อนทิ้งไว้อยู่ครับ

เมื่อเปลี่ยนแล้วจะเป็นแบบนี้ครับ

preview ดูหน่อยดีกว่า

Screen Shot 2558-09-05 at 8.42.12 PM

เขียน Code ทดสอบส่วนของ Tool Bar ให้มันทำงานอะไรบ้างอย่างเพิ่มดูเล็กน้อยดีกว่า เปิด MainActivity.java ครับ

Import ส่วนนี้เข้าไป

แก้ไขส่วนของ Class MainActivity

ประกาศเรียกใช้ toolbar.xml ผ่านส่วนของ ToolBar ใน v7

ทำการทดสอบกันดูหน่อย

Screenshot_2015-09-05-21-09-29

เรียบร้อยครับ 😀

จะลองปรับแต่งเล่นๆ แบบนี้ก็ได้นะครับ

Screen Shot 2558-09-05 at 9.23.35 PM

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.