บทความแอนดรอยด์ Java
Export Image From Adobe Xd and Nine Patch
Written by มาสเตอร์ อึ่งหลังจากที่เราออกแบบ UI ของเราเสร็จ แล้ว http://androidthai.in.th/android-article/89-design-ui-login-layout-android-on-xd-adobe แล้วเราจะเอาไปทำงานบนแอนดรอย์ จะทำอย่างไร ? มี สองขั้นตอนครับ
- Export Image ออกมา ก่อน ถ้ารูปที่เรา Export ออกมาจะนำไปทำเป็น Background ต้องทำ Nine Patch ด้วย
- 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 ให้ แอนดรอยด์ ใช้ได้กันครับ
