Home
Export Image From Adobe Xd and Nine Patch
หลังจากที่เราออกแบบ 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 ครับ
Design UI Login Layout Android on XD Adobe
โจทย์เป็นอย่างนี่ ? เราจะออกแบบ Layout สำหรับ ระบบ การทำ Login มีส่วนของการสมัครสมาชิค แบบนี้
มาสเตอร์ จะใช้ XD adobe ในการออกแบบ ใครยังไม่ติดตั่งไปติดตั่งให้เรียบร้อย http://androidthai.in.th/android-article/88-install-adobe-xd
เปิดออกมาเลยครับ
Install Adobe XD
โจทย์ เป็นอย่างนี่ อยากได้เครื่องมือที่ช่วยในการ เอาจินตนาการ ออกมาให้จับต้องได้ มาสเตอร์ แนะนำ Adobe XD มาติดตั่งกันก่อน ไปที่นี่ครับ https://www.adobe.com/sea/products/xd.html
ก่อนที่เราจะติดตั่ง XD จะต้อง Sign In ก่อน ถ้าเราไม่มี ให้ SignUp ครับ
Upload Photo to Server by FTP4J
โจทย์เป็นอย่างนี่ เรามีการเลือกรูปภาพละ
ต้องการอัพโหลดรูปภาพนี่ ผ่าน protocal FTP ไปที่ Server
Two Way Binding on Angular
เมื่อบทความที่แล้วเราเรียนรู้เรื่องการทำ OneWay Binding ไปละ ที่นี่ เราจะมาดูการทำ TwoWay Binding กันบ้าง
มาสเตอร์ ประกาศตัวแปร ที่ App Component เป็น String ว่า nameString
ที่ module
มาเตอร์ เพิ่ม FormSModule เข้าไปแบบนี่
One Way Binding on Angular
เป็นการสือสารระหว่างไฟร์ Type Scrip และ html ใน Angular
โจทย์ เป็นอย่างนี่นะ ใน ไฟร์ ts ของมาสเตอร์ จะมีตัวแปรที่ประกาศใน คลาส 3 ตัว คือ preFic, nameApp, nameDoramon เป็น String กำหนดค่าไว้
รูปแบบการนำไปแสดงใน html จะใช้ การ Interpolation แบบนี้
