Home

Install Flutter on Mac OS

Flutter คือ อะไร ? ลองไปดูที่นี่ครับ https://flutter.io

แปลง่ายๆ มันคือ Hybrid Native App เขียนครั้งเดียว ได้ทั้งแอนดรอย์ และ iOS แล้ว ดีกว่า Hybrid อย่างไร ? ไม่ได้ใช้ WebView แบบ Ionic, Cordova, Phonegap นะ จะใช้ การ Compile Object คล้ายๆ java , Objective C , Kotlin หรือ Swift และ เอา ไบน่ารีโค้ดไปรันใน Device ครับ แน่นอน Perferment ใกล้ Native ข้อเสีย ละ ? Curve การเรียนรู้สู้ เพราะเขียนด้วน ภาษา Dart 

ลงได้ทั้ง 3 Platform วันนี่ มาสเตอร์ ลงด้วย mac OS

Read more: Install Flutter on Mac OS

Redraw Design UI form Xd adobe to xml Layout Android

หลังจากที่เราได้ Export รูปภาพ จาก การออกแบบ Xd ของ adobe ได้แล้ว

 มาสเตอร์ Copy 

ใน res และ Paste ทั้งหมดที่ได้ไปที่นี่ครับ

Paste ให้ครบทุกไฟร์

เรามาโค้ด บนแอนดรอยด์ กัน มาสเตอร์ สร้าง xml เปล่าๆ แบบนี้

และ โค้ด แบบนี่ ไปที่ ไฟร์ fragment_main.xml

 

 

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/margin"
        android:orientation="vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/logo" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/email"
            android:hint="@string/email"
            android:inputType="textEmailAddress" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/password"
            android:hint="@string/password"
            android:inputType="textPassword" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/button_white"
            android:text="Login"
            android:textColor="@color/colorWhite"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="8dp"
            android:text="New Register"
            android:textColor="@color/colorAccent"
            android:textSize="18sp"
            android:textStyle="bold" />


    </LinearLayout>

</RelativeLayout>

 

 

ส่วนของ  Wallpaper มาสเตอร์ จะแปะไว้ที่ activity_main.xml

ลบ TextView ออกและ ใสโค้ดพวกนี่ครับ

 

ต่อไป มาสเตอร์ สร้าง คลาส สำหรับ Fragment โดยการ สร้าง package ก่อน

และ คลาส MainFragment.java

 

ตั่งชื่อแบบนี่เลย

ได้มาละ Class ของเรา

เอาคลาสเปล่าๆ ของเราไป extends Fragment เลือก Support Library นะครับ และ Override onCreateView พิมพ์ View ที่มาจาก fragment_main

กลับมาที่ คลาสหลัก MainActivity.java

มาสเตอร์ Replace Fragment

ทดสอบในเครื่องจริง

เย้ ได้มาละ ไม่ยากนะครับ ขอบคุณ ภาพจาก คอร์สสอนแอนดรอย์ ส่วนตัวครับ 

 

 

 

 

 

 

 

 

 

 

 

 

Export Image From Adobe Xd and Nine Patch

หลังจากที่เราออกแบบ 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 ครับ

Read more: Export Image From Adobe Xd and Nine Patch

Design UI Login Layout Android on XD Adobe

โจทย์เป็นอย่างนี่ ? เราจะออกแบบ Layout สำหรับ ระบบ การทำ Login มีส่วนของการสมัครสมาชิค แบบนี้

มาสเตอร์ จะใช้ XD adobe  ในการออกแบบ ใครยังไม่ติดตั่งไปติดตั่งให้เรียบร้อย http://androidthai.in.th/android-article/88-install-adobe-xd

เปิดออกมาเลยครับ

Read more: Design UI Login Layout Android on XD Adobe