"ประสบการณ์เป็นครูที่ดีที่สุด"
แอบลองเขียน Watch Face เมื่อกูเกิ้ลเปิดให้นักพัฒนาทั่วไปทำหน้าปัดนาฬิกาบน Android Wear เองได้แล้ว
11 Dec 2014 03:51   [9306 views]

เมื่อชั่วโมงที่แล้ว ในขณะที่ชาวไทยกำลังนอนอยู่ ก็มี Geek นกฮูกตัวหนึ่ง ยังคงนั่งทำงานอยู่งกๆๆๆๆ

รู้สึกง่วงๆ กำลังจะไปนอน ...

... ดันเผลอไปกดอ่านบล็อกของ Android Developer ... แค่นั้นแหละ ยาวววววว

เพราะเมื่อสักครู่นี้ กูเกิ้ลเพิ่งปล่อย Watch Face API หรือภาษาคนก็คือชุดคำสั่งที่เปิดให้นักพัฒนาทั่วไปสามารถสร้างหน้าปัดนาฬิกาบน Android Wear หรือที่เรียกว่า Watch Face ได้แล้ว ! (หลังจากพูดไว้มานานมากว่าจะปล่อย)

ก็เลยตื่นเต้นๆ เปิด Android Studio มาลองโค้ดเล่นซะเลย =)

ก่อนอื่นก็ต้องอัพเดต SDK บน SDK Manager ซะก่อน โดยเจ้า Watch Face API นี้ไม่ได้อยู่ใน Android 4.4W.2 อย่างที่คิดไว้ตอนแรก แต่ดันไปอยู่ใน API Level 21 หรือ Android 5.0.1 ซะอย่างนั้น ต้องอัพเดตและลงเพิ่มทั้งหมดสามตัวด้วยกันได้แก่ SDK Platform, Samples for SDK และ Android Wear Intel x86 Atom System Image

หลังจากได้มันมาในมือแล้ว ก็ลองไป Import Project จาก Sample นามว่า WatchFace เพื่อดูโค้ดตัวอย่างแล้วลองรันกันเล้ย (ชีวิตบน Android Studio ช่างสุขสบาย)

โครงสร้างแอพฯก็ประกอบด้วยโมดูลสองตัวด้วยกันได้แก่ Application ซึ่งเป็นโมดูลสำหรับแอพฯบนมือถือ ทำงานบน API Level 18 (Android 4.3.1) เป็นต้นไป ส่วนอีกโมดูลนึงคือ Wearable ซึ่งเป็นโมดูลที่จะไปทำงานบน Wearable ทำงานบน API Level 21 (Android 5.0.1) เป็นต้นไป

พูดง่ายๆคือแอพฯที่ต้องการติดต่อกับ Android Wear จะทำงานได้บนมือถือที่รัน Android 4.3 ขึ้นไปเท่านั้น ส่วนบน Android Wear ก็ต้องเป็นตัวที่อัพเดตเฟิร์มแวร์ใหม่เป็น Android 5.0.1 แล้วเท่านั้น (ในเอกสารบอกว่าจะเริ่มทยอยอัพเดตให้ Android Wear ในตลาดตั้งแต่สัปดาห์หน้าเป็นต้นไป)

ทางด้านโค้ดดิ้ง Watch Face แต่ละตัวถูกสร้างขึ้นในรูปแบบของ Service

<service    android:name=".DigitalWatchFaceService"    android:label="@string/digital_name"    android:allowEmbedded="true"    android:taskAffinity=""    android:permission="android.permission.BIND_WALLPAPER" >    <meta-data        android:name="android.service.wallpaper"        android:resource="@xml/watch_face" />    <meta-data        android:name="com.google.android.wearable.watchface.preview"        android:resource="@drawable/preview_digital" />    <meta-data        android:name="com.google.android.clockwork.home.preview_circular"        android:resource="@drawable/preview_digital_circular" />    <meta-data        android:name="com.google.android.wearable.watchface.companionConfigurationAction"        android:value="com.example.android.wearable.watchface.CONFIG_DIGITAL" />    <meta-data        android:name="com.google.android.wearable.watchface.wearableConfigurationAction"        android:value="com.example.android.wearable.watchface.CONFIG_DIGITAL" />    <intent-filter>        <action android:name="android.service.wallpaper.WallpaperService" />        <category android:name="com.google.android.wearable.watchface.category.WATCH_FACE" />    </intent-filter></service>

ทุกอย่างเป็นที่ Meta สามารถกำหนดได้ตรงนี้ ไม่ว่าจะเป็นรูปสำหรับพรีวิวจนถึง Activity ที่ใช้ Config Watch Face นั้นๆ (แต่ต้องมีเชื่อมกับ Activity นิดหน่อย ไม่พูดถึงละกัน เล่าให้ฟังแบบคร่าวๆ)

ดังนั้นถามว่าแอพฯนึงสามารถสร้าง Watch Face ได้กี่ตัว? คำตอบคือ "ไม่จำกัด" นะครับ เพราะเราสามารถสร้าง Service ขึ้นมากี่ตัวก็ได้นั่นเอง อย่างตัวอย่าง WatchFace นี้ก็มีติดมาราวๆ 5-6 หน้าปัดเลย

คราวนี้มาดูส่วนของ Service ที่สร้างขึ้นกันบ้าง ทุกอย่างค่อนข้างตรงไปตรงมาคือสร้าง Timer ขึ้นมาเพื่ออัพเดตหน้าจอผ่านคำสั่ง invalidate() ทุกๆ 1 วินาที ในตัวอย่างเค้าใช้ Handler ในการยิง Delay

        /** Handler to update the time once a second in interactive mode. */        final Handler mUpdateTimeHandler = new Handler() {            @Override            public void handleMessage(Message message) {                switch (message.what) {                    case MSG_UPDATE_TIME:                        if (Log.isLoggable(TAG, Log.VERBOSE)) {                            Log.v(TAG, "updating time");                        }                        invalidate();                        if (shouldTimerBeRunning()) {                            long timeMs = System.currentTimeMillis();                            long delayMs = INTERACTIVE_UPDATE_RATE_MS                                    - (timeMs % INTERACTIVE_UPDATE_RATE_MS);                            mUpdateTimeHandler.sendEmptyMessageDelayed(MSG_UPDATE_TIME, delayMs);                        }                        break;                }            }        };

แล้วถามว่าเค้าใช้วิธีไหนในการแสดง Watch Face หละ? คำตอบคือ "วาด" เอาครับ ด้วยคำสั่ง onDraw เลย ใครเคยเขียน Custom View บนแอพฯแอนดรอยด์ ก็ไม่มีอะไรต่างจากนั้นครับ

@Overridepublic void onDraw(Canvas canvas, Rect bounds) {    // ...}

สิ่งที่ต้อง Concern อย่างนึงคือ Android Wear มีทั้งแบบจอกลมและจอเหลี่ยม ดังนั้นต้องออกแบบให้มันวาดแล้วแสดงผลดีทั้งบนจอเหลี่ยมและจอกลมด้วยเน้อ

อย่างไรก็ตาม ต้องรู้ไว้อีกอย่างนึงด้วยว่า Android Wear มีการทำงานอยู่สองโหมดคือ Interactive mode หรือโหมดทำงานปกติ และ Ambient mode หรือ "โหมดประหยัดพลังงาน"

เราต้องเขียนโปรแกรมเพื่อ Support ทั้งสองโหมดด้วย เพราะในโหมด Ambient หน้าจอจะถูกปรับเป็นสีโทนขาวดำ เราต้องทำให้ภาพออกมาแล้วดูออกใน Grayscale ด้วย

ยังไม่พอ บางที Ambient บนจอบางชนิดเช่นพวก OLED จะเป็นโหมดที่แสดงได้แค่ขาวกับดำ ไม่มีสีเทา หรือเรียกว่า Low-Bit อันนี้ก็ต้อง Handle ได้ด้วย

อีกอย่างคือในโหมด Ambient ถ้าเราตั้งเวลาทุกๆ 1 วินาทีอย่างเดิมก็คงไม่ดี เราจึงต้องปรับเวลาให้เป็นอัพเดตหน้าจอทุกๆ 1 นาทีแทน ทางเทคนิคคือปิดการเรียก Handler ทิ้งไป แล้วรอให้คำสั่ง onTimeTick() ซึ่งจะถูกเรียกโดยอัตโนมัติทุก 1 นาที ไปอัพเดตหน้าจออีกทีนึงแทน

คราวนี้มาดูผลการทำงานกัน ตอนกดค้างที่หน้าปัดก็จะขึ้น Watch Face มาให้เลือก

ลองจิ้มเข้าไปดู ... โค้ดง่ายๆแต่ออกมาสวยเลยหละ =)

และเพื่อความหรรษา เราเลยมือซนแอบใส่ Bitmap เข้าไปตัวนึง ... โลโก้บริษัทละกัน เพราะอยากรู้ว่า onDraw มันจะมีข้อจำกัดอะไรรึเปล่า ได้ออกมาเป็นแบบนี้

ทำงานได้ปกติเลยทุกอย่าง เย้!

ดังนั้นก็บอกได้เลยว่า Watch Face API นั้นเปิดอย่างอิสระมาก เราจะทำอะไรก็ได้เลยทีเดียวเชียว แต่อย่าลืมไว้อย่างนึง Android Wear มีแบตน้อยไม่เหมือนมือถือนะ ก็ออกแบบดีๆ ระวังแบตหมดฮวบๆด้วย ผู้ใช้คงไม่แฮปปี้

เท่าที่ลองเล่นถือว่าถ้าเขียนแอนดรอยด์เป็น คงจะมาเขียน Watch Face เป็นได้ไม่ยากเลย อาจจะมีรายละเอียดจุกจิกนิดหน่อยเช่นพวก Ambient Mode แต่ก็ไม่ใช่ปัญหา เอกสารมีบอกไว้ค่อนข้างครบแล้ว ลองไปอ่านกันดูได้คร้าบผมที่ Watch Faces for Android Wear

นอกจากนี้ก็มีข้อมูลเพิ่มเติมอีก 2 ลิงค์ ไปอ่านดูได้จ้า Watch Face API Now Available for Android Wear และ  Creating Custom Watch Faces

จบไปอีก Blog นึง ซนจนไม่ได้นอนอีกละ ...

ว่าแต่อยากได้ Wear มาเล่นบ้างจัง ฮือออออ เขียนโปรแกรมเป็นแต่ไม่มีอุปกรณ์ไว้ลอง เจ็บปวดรวดร้าวและทรมาน ฮืออออออ

 

บทความที่เกี่ยวข้อง

Dec 9, 2014, 03:20
7102 views
มันมาแล้ว Android Studio 1.0 Stable Release ตัวแรกในประวัติศาสตร์ ! ~~~~~~~~
Dec 13, 2014, 14:48
13604 views
[Tips] วิธีง่ายๆในการเพิ่มความเร็วการ Build แอพฯบน Android Studio
0 Comment(s)
Loading