Copyright 2018 - Custom text here

หลังจากที่เราออกแบบ UI ของเราเสร็จ แล้ว http://androidthai.in.th/android-article/89-design-ui-login-layout-android-on-xd-adobe แล้วเราจะเอาไปทำงานบนแอนดรอย์ จะทำอย่างไร ? มี สองขั้นตอนครับ

  1. Export Image ออกมา ก่อน ถ้ารูปที่เรา Export ออกมาจะนำไปทำเป็น Background ต้องทำ Nine Patch ด้วย
  2. Redraw ไปเป็น xml ครับ

มาเริ่มบทความแรกก่อน Export Image and Setup Nine Patch Image From Adobe Xd

จาก Xd ครั้งที่แล้ว ทำความเข้าใจกันนิด โปรแกรม Adobe Xd เป็น โปรแกรม ที่ช่วยเปลี่ยน จินตนาการ ออกมาให้จับต้องได้ มันไม่สามารถ Export ไปเป็น xml หรือ html ได้ ด้วยปุ่มเดียวนะครับ เราต้องเอาไป Redraw อีกทีครับ

มาสเตอร์ เริ่มจาก Logo ก่อน เลื่อกรูปที่เราต้องการและ 

File > Export > Selected ครับ

การตั่งชื่อ สำคัญครับ ถ้าจะเอามาทำงานใน แอนดรอยด์ อักษรต้องตัวเล็ก ไม่งั้นคุณจะมีปัญหา R.java Error ครับ ต่อไป png ครับ เลือก Android เน้นที่ mdpi และ คลิก Export

 

โปรแกรม Xd จะพ่น รูปภาพ และ ปรับขนาดภาพ ไปตาม drewable ความละเอียดต่างๆ แบบนี่ครับ

ทำไปทุกภาพ เลยนะครับ ยกเว้น

รูป EditText และ Button รุปพวกนี่จะมีการใส่. Text เข้าไป มาสเตอร์ ไม่ค่อยชอบ ทำรูปภาพแบบ ติดอักษร คืออยากได้แค่กรอบและไปใส่ Text เอง ถูกต้องแล้ว มาสเตอร์ จะเอาไปทำเป็น Background ไม่ได้เอาไปทำเป็น ImageView อย่างนั้น ต้อง Nine Patch คือ คำตอบสุดท้าย ใครจำ Nine Patch ไม่ได้ ไปดูที่นี่ครับ http://androidthai.in.th/android-article/50-nine-patch-on-android

รูปที่มาสเตอร์ จะเอาไปทำเป็น Background มาสเตอร์ จะ Export แบบ Design ครับ และไม่ Save ไว้ใน drawable เพราะ จะต้องนำไปสร้าง Nine Patch ก่อน

มาสเตอร์ สร้าง โฟวเตอร์  forNinePatch และ เอารูปที่จะไป Setup Nine Patch มา Save ไว้ที่นี่

ไปที่นี่เลยครับ https://romannurik.github.io/AndroidAssetStudio/nine-patches.html#&sourceDensity=160&name=example

คลิก Select Image เลือกรูปที่เราจะนำไป Setup Nine Patch

Default Stretch Region มาสเตอร์ จะปรับใหม่ ให้เอา  Currsor ไปเลื่อนเส้นไข่ปลา

กำหนดการแยก ของภาพ

ส่วนของ  Content padding  คื่อส่วนที่เราจะเอา Text ไปใสเราต้องกำหนดว่าจะให้ Text อยู่ตำแหน่งไหน ? 

เข้าใจนะ 

 

Download ลงมาเลยครับ

เราจะโหลด ได้ zip มาให้แตกออก

ได้มาละ รูปภาพที่ Setup เป็น Nine Patch

ให้ ทำการ Copy รูป Nine Patch ที่เราได้มา ไป Paste ที่ drawable ความละเอียด ใคร ความละเอียดมันนะ ครับ 

กลับไปทำ รูปอื่นๆ จนหมด

พอได้ครับ ทุกรูป ที่นี่เราจะไป Redraw ไปเป็น xml ให้ แอนดรอยด์ ใช้ได้กันครับ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

คอร์ส สอนโปรเจ็คแอนดรอยด์ ตัวต่อตัว

คอร์ส เบสิกแอนดรอยด์ สอน ตัวต่อตัว

f t g