株式会社八角研究所 > AppWidgetでWidgetを作る

エンジニア募集中！

独立心旺盛で、新しい技術で新しいWebサービスを作りたいと思っているけれど、ひとりでやることに限界を感じているフリーのエンジニアの方。あなたの期待にこたえられる仲間と環境を、八角研究所なら提供できると思います。社員としてではない関わり方も、あるかもしれません。

この会社の特徴を知る

岡田英久が語る未来を知る

このカテゴリの記事はまだ投稿されていません

株式会社八角研究所の雰囲気を知る

「少年、Nullについて想う」

など 3 記事

株式会社八角研究所の技術・仕事を知る

「jQuery の In Place Editor プラグインを作ってみた」

など 24 記事

AppWidgetでWidgetを作る

by tomato

Tags: Androidアプリ作りたい Android

AppWidgetとは

Widgetを作るためのフレームワークで、好きな機能を実装して、ホームスクリーンに表示されるWidgetである。（※Android SDK 1.5から可能）

「Google　Search」AppWidget

MusicPlayer　Widgetを作ってみよう

MusicPlayer　Widget

MusicPlayer Widget

SDCardからミュージックファイル（.mp3）を読み込む
playボタンを押すと、該当表示されているミュージックを再生する
nextボタンを押すと、次のミュージックを再生する
playボタンでミュージックの再生、一時停止することができる

AppWidgetのレイアウト

res/layout/my_musicer.xmlで二つのImageButton（play_button、next_button）とTextView（music_name）が定義される。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:background="@drawable/background">
	<ImageButton android:id="@+id/play_button"
		android:layout_marginTop="20px"
		android:layout_marginLeft="15px"
		android:layout_width="40px"
		android:layout_height="40px"
		android:src="@drawable/play"
		android:background="@drawable/btnbg"/>
	<TextView android:id="@+id/music_name"
		android:width="200px"
		android:layout_marginTop="20px"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:textColor="@android:color/darker_gray"
		android:padding="5dp"
		android:textSize="20dp"
		android:gravity="center"
		android:singleLine="true"/>
	<ImageButton android:id="@+id/next_button"
		android:layout_marginTop="20px"
		android:layout_marginRight="15px"
		android:layout_width="40px"
		android:layout_height="40px"
		android:src="@drawable/next"
		android:background="@drawable/btnbg"/>
</LinearLayout>

AppWidgetの特徴

res/xml/musicer_widget.xml

<?xml version="1.0" encoding="UTF-8"?>
<appwidget -provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="294dp"
    android:minHeight="72dp"
    android:updatePeriodMillis="0"
    android:initialLayout="@layout/my_musicer"> 
</appwidget>

ここでは、AppWidgetの

幅
高さ
更新間隔
参照するレイアウト

などをxmlで定義する。

AppWidgetの処理

まず、MyMusicerProviderクラスを作る。

MyMusicerProviderはAppWidgetProviderクラスを継承して、onUpdate()とonReceive()メソッドをオーバーライドしなければならない。

public class MyMusicerProvider extends AppWidgetProvider {
	@Override
	public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] 		appWidgetIds) {
             ....
	}
	@Override
	public void onReceive(Context context, Intent intent) {
             ....
	}
}

次に、onUpdate()メソッドを実装する。

....
	// Widget更新処理を呼ぶ
	final int length = appWidgetIds.length;
	for(int i = 0; i < length; i++) {
		int appWidgetId = appWidgetIds[i];
		updateAppWidget(context, appWidgetManager, appWidgetId);
	}
....

このメソッドはAppWidgetが更新されると呼ばれる。Widgetに一意なIDが振られ、引数のappWidgetIdsに格納される。同じWidgetが複数個配置されても、すべてのWidgetに更新処理を行う必要がある。

void updateAppWidget(Context context, AppWidgetManager appWidgetManager,int appWidgetId) {
	// Widgetのレイアウトを取得
	RemoteViews rv = new RemoteViews(context.getPackageName(),R.layout.my_musicer);
	Intent intentPlay = new Intent(PLAY_ACTION);
	Intent intentNext = new Intent(NEXT_ACTION);
	PendingIntent pendingIntentPlay = PendingIntent.getBroadcast(context, 0,intentPlay, 0);
	PendingIntent pendingIntentNext = PendingIntent.getBroadcast(context, 0,intentNext, 0);
	rv.setOnClickPendingIntent(R.id.play_button, pendingIntentPlay);
	rv.setOnClickPendingIntent(R.id.next_button, pendingIntentNext);
	rv.setCharSequence(R.id.music_name, "setText", player.getSongName());
	player.setRv(rv);
	player.setAppWidgetManager(appWidgetManager);
	player.setAppWidgetId(appWidgetId);
	// Widget更新
	appWidgetManager.updateAppWidget(appWidgetId, rv);
}

AppWidgetのレイアウトはViewではなくて、RemoteViewsで取得する。4行～9行はplayボタンとnextボタンのonClickイベントを自作のIntentでPendingIntentに発送して、setOnClickPendingIntent()メソッドでWidgetに設定する。10行目は、ミュージック名をWidgetのmusic_nameというTextViewに設定する。15行目のupdateAppWidget()メソッドを行わないと、Widgetの見た目が変わらない。

最後は、onReceive()メソッドを実装する。

	final String action = intent.getAction();
	super.onReceive(context, intent);

	if (action.equals(PLAY_ACTION)){
		player.playOnClick();
	}else if(action.equals(NEXT_ACTION)){
		player.nextOnClick();
	}

このメソッドはWidget自身のIntentを受けることである。IntentのgetAction()メソッドでAction名が取得できる。取得したAction名が自作のIntent名と同じ場合のみ、MusicPlayerクラスのplayOnClick()或いはnextOnClick()メソッドが呼ばれる。

MusicPlayerクラスの中でMediaPlayオブジェクトを使ってミュージックの再生、一時停止などの処理を行う。

まず、SDCardからミュージックファイルを取得する。

	private List getSongs(){

		if (songs.size() == 0){
			File home = new File("/sdcard/");
			if (home.listFiles(new Mp3Filter()).length > 0) {
				for (File file : home.listFiles(new Mp3Filter())) {
					songs.add(file.getName());
				}
				currentPosition = 0;
			}
		}

		return songs;
	}

該当ミュージックを再生する。

	private void playSong() {
		try {
			mp.reset();
			mp.setDataSource(MEDIA_PATH + songs.get(currentPosition));
			mp.prepare();
			mp.start();

			mp.setOnCompletionListener(new OnCompletionListener() {
				public void onCompletion(MediaPlayer arg0) {
					nextSong();
				}
			});

		} catch (IOException e) {
		}
	}

次のミュージックを再生する。

	private void nextSong() {
		if (++currentPosition >= songs.size()) {
			currentPosition = 0;
		}
		playSong();
	}

receiverを追記

AndroidManifest.xml

    <application android:icon="@drawable/icon" android:label="@string/app_name">
		<receiver android:name=".MyMusicerProvider" >
    		<intent-filter>
        		<action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
        		<action android:name="appwidget.mymusicer.action.play">
        		<action android:name="appwidget.mymusicer.action.next">
        	</intent-filter>
        	<meta-data android:name="android.appwidget.provider"
        		android:resource="@xml/musicer_widget" />
		</receiver>
    </application>

applicationタグ内にreceiverタグを追加して、名前はMyMusicerProviderで定義する。receiverタグ内に、まずintentタグを追加して、APPWIDGET_UPDATEアクションと自作のplayボタン、nextボタンのアクションを定義する。次にmeta タグを追加して、resourceにmusicer_widget.xmlを指定する。