เรามาสร้าง Widget บน Android กัน

เรามาสร้าง Widget บน Android กัน

ช่วงนี้ผมนั่งหาเว็บตัวเองใน google แล้วก็พบสิ่งที่ผมคิดจริงๆ มันก็คือการขโมยบนความผมไปลงในเว็บอื่นนั้นเองใครจะเอาบทความผมไปลงที่ไหนอย่างไรผมก็ใช่จะว่าอะไรมากมายแต่ขอ อ้างอิงกันบ้างนะครับ

เอาละเรามาต่อของเรากันนี้ดีกว่าครั้งนี้ผมจะพูดถึงการเขียน Widget เล็กๆๆที่มีใช้ใน Android ทั่วไป โดย Widget ที่จะสร้างครั้งนี้เป็น Widget ที่แสดงข้อความง่ายเพื่อว่าใครจะเอาไปต่อยอดสร้าง Widget เท่ห์ๆใช้กัน

ขั้นแรกเราก็สร้าง Project Android ขึ้นมาแบบเดิมก่อน

android widget

widget android

 

ขั้นแรกให้ทำการแก้ไขไฟล์ตามนี้ครับ โดยเปิดไฟล์ที่ชื่อว่า AndroidManifest.xml ซึ่งสังเกตให้ดีนะครับว่ามันจะมี tag package อยู่ให้กำหนดตาม package ของโปรเจ็คที่เราสร้างขึ้นนะครับตามกรณีที่ไม่ได้ทำตามตัวอย่างนี้

[sourcecode language=”xml”]













[/sourcecode]

ต่อจากนั้นเราก็ไปกหนดหน้าตาของ Widget เราเลยโดยให้ทำการแข่งขัน main.xml ใน res/layout ครับ โดยผมให้ทำการแสดงข้อความเป็น app_name ครับโดยมีการจัด layout ตามนี้

[sourcecode language=”xml”]




[/sourcecode]

ต่อมาให้ทำการเพื่มข้อมูลแบบ string ใน strings.xml โดยเพิ่ม widget_name เป็นชื่อที่เราต้องการหรือจะตามตัวอย่างก็เป็น THWidget โดยมีโค้ดดังนี้

[sourcecode language=”xml”]



Hello World, ThWidget!
ThWidget
THWidget

[/sourcecode]

ต่อจากนั้นให้ทำการสร้าง directory ใน res มีชื่อว่า xml จากนั้นให้สร้างไฟล์ xml ที่ชื่อว่า widget.xml ซึ่งเอาไว้เก็บลายละเอียดของ Widget นั้นเองมีโค้ดตามนี้

[sourcecode language=”xml”]


[/sourcecode]

ต่อจากนั้นก็ให้ทำการสร้าง directory drawable ไว้ใน res อีกจากนั้นให้ทำการก็อปภาพพื้นหลังของ widget ไปวางเพราะ widget ของเราต้องมีการใช้ภาพเพื่อทำเป็นพื้นหลังซึ่งสามารถดาวโหลดจากโค้ดที่แจกได้ครับ

ไฟล์ภาพชื่อว่า widget_bg.9.png นะครับ

สุดท้ายให้เราทำการแก้ไขโค้ดหลักคือ ThWidget.java นั้นเองโดยมีการเปลี่ยนการ import และการสืบทอดนิดหน่อยเองนะครับมีโค้ดดังนี้ครับ

[sourcecode language=”java”]

package org.thaicoding.widget;

import android.appwidget.AppWidgetProvider;

public class ThWidget extends AppWidgetProvider {
/** Called when the activity is first created. */

}

[/sourcecode]

จะเห็นว่ามีการเปลี่ยนชุดคำสั่งการ import และมีการสืบทอดจาก AppWidgetProvider แทนจากนั้นเราก็รันโปรแกรมผ่านตัวจำลองดูครับ เมื่อรันแล้วจะไม่มีอะไรเกิดขึ้น ให้เราไปที่ตัวจำลองแล้วคลิกที่ปุ่ม ?menu แล้วเลือก add – – > widget

android widget

เมื่อเลือก Widget แล้วเข้าไปจะพบชื่อโปรแกรมที่เรากำหนดค่าในไฟล์ strings.xml นั้นเอง

เมื่อคลิกแล้วก็จะมี Widget ดังภาพครับ

จะเห็นว่าเป็นการแสดงที่เรากำหนดใน main.xml นั้นเองให้มีค่าเท่ากับ app_name จะตัวอย่างนี้จะเห็นว่าเราจะลำบากครั้งแรกในการพัฒนา Widget ใน android มาก เพราะต้องกำหนดค่า XML ให้ดีครับยังไงก็ลองศึกษา xml ด้วยนะครับสำหรับคนที่ยังไม่ค่อยเข้าใจ xml ?ลืมไปถ้าเราจะเอา Widget ออกให้ทำการคลิกค้างไว้ที่ตัว Widget ที่จเอาออกแล้วมันจะขึ้นถังขยะให้เราลากไปทิ้งได้เลย * – *

Download SourceCode

Leave a Reply

Your email address will not be published. Required fields are marked *