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

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

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

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

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

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

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="org.thaicoding.widget"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon"
            android:label="@string/app_name">
        <!-- Broadcast Receiver that will process AppWidget updates -->
        <receiver android:name=".Widget"
                android:label="@string/widget_name">
            <intent-filter>
                <action android:name=
                    "android.appwidget.action.APPWIDGET_UPDATE" />
            </intent-filter>
            <meta-data android:name="android.appwidget.provider"
                android:resource="@xml/widget" />
        </receiver>
    </application>
    <uses-sdk android:minSdkVersion="3" android:targetSdkVersion="8" />
</manifest> 

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/widget_bg"
    >
<TextView
	android:id="@+id/text"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="@string/app_name"
    android:textSize="18sp"
    android:gravity="center"
    android:textColor="@android:color/black"
    />
</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, ThWidget!</string>
    <string name="app_name">ThWidget</string>
    <string name="widget_name">THWidget</string>
</resources>

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

<?xml version="1.0" encoding="UTF-8"?>
<appwidget-provider
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:minWidth="146dip"
	android:minHeight="72dip"
	android:updatePeriodMillis="1800000"
	android:initialLayout="@layout/main"
	/>

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

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

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

package org.thaicoding.widget;

import android.appwidget.AppWidgetProvider;

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

}

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

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

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

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

Download SourceCode