バッテリー残量ウィジェットの作り方 (4/4)

~ デザインの改良 ~

前へ   1  2  3  4   次へ
前回で、バッテリー残量ウィジェットは完成しました。確かに、バッテリー残量は表示されていますが、デザインがシンプルです。そこで今回は、参考までにデザインを改良してみます。

17.前回までのバッテリー残量ウィジェット

バッテリー残量ウィジェット完成

左の数字です。確かにバッテリー残量ウィジェットには違いありません。これはこれで、超シンプルで良いかも知れませんが、ちょっと面白みにかけます。

18.ウィジェットの改造手順

ちょっと改良して、ウィジェットの背景に、バッテリー残量を表す画像を表示してみます。今回の手順はこんな感じです。

(1)背景を表示する
(2)文字を調節する
(3)イメージを切り替える

それでは1つ1つ実行していきます。

19.背景を表示する

まず、画像を用意します。こんな画像にしました。

バッテリー残量ウィジェット背景
[ SampleBatteryWidget ]
    [ src ]
    [ gen ]
    [ Android 1.5 ]
    [ assets ]
    [ res ]
        [ drawable ]
            icon.png
            image.png
        [ layout ]
        [ values ]
        [ xml ]
    AndroidManifest.xml
    default.properties
    proguard.cfg

次に、このイメージをウィジェットに表示します。これは、main.xmlにImageViewを追加すことで可能です。

main.xml

<?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"
    >
<ImageView
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:src="@drawable/image"
    />
<TextView  
    android:id="@+id/TextView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
</LinearLayout>

これで画像が表示されるはずです。実行してみます。

バッテリー残量ウィジェット背景のみ

確かに画像が表示されました。でも文字が消えてしまいました。これは、文字の上に画像が表示されたためではなく、文字がウィジェットの表示領域外に追い出されてしまったためです。これを解決するために、ImageViewとTextViewを並べるのではなく、重ねて配置します。具体的には、LinearLayoutをRelativeLayoutに変えるだけです。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ImageView
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:src="@drawable/image"
    />
<TextView  
    android:id="@+id/TextView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
</RelativeLayout>

これで文字と画像が重なって表示されるはずです。実行してみます。

バッテリー残量ウィジェット背景のみ

バッチリです。

20.文字を調節する

このままでは、文字が端っこすぎる・・・というか、はみ出てます。真ん中に表示してみます。それと、大きさなども調整してみます。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ImageView
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:src="@drawable/image"
    />
<TextView  
    android:id="@+id/TextView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    android:gravity="center"
    android:textSize="24px"
    android:textStyle="bold"
    android:textColor="#ffffffff"
    />
</RelativeLayout>

これで、真ん中に、白く、太く、大きく表示されるはずです。

バッテリー残量ウィジェット背景のみ

ん?縦が真ん中ではありません。TextViewの縦サイズがwrap_contentになっているのが原因のようです。fill_parentに変更します。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ImageView
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:src="@drawable/image"
    />
<TextView  
    android:id="@+id/TextView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="@string/hello"
    android:gravity="center"
    android:textSize="24px"
    android:textStyle="bold"
    android:textColor="#ffffffff"
    />
</RelativeLayout>

これで、ど真ん中に表示されるはずです。実行してみます。

バッテリー残量ウィジェット背景のみ

よし!バッチリです。

21.イメージを切り替える

ウィジェットのプログラムから、バッテリー残量に応じて、背景イメージを切り替えます。

まずは、バッテリー残量に対応した画像を用意します。こんな画像にしました。

バッテリー残量0% バッテリー残量20% バッテリー残量40% バッテリー残量60% バッテリー残量80% バッテリー残量100%
[ SampleBatteryWidget ]
    [ src ]
    [ gen ]
    [ Android 1.5 ]
    [ assets ]
    [ res ]
        [ drawable ]
            icon.png
            image.png
            image0.png
            image20.png
            image40.png
            image60.png
            image80.png
            image100.png
        [ layout ]
        [ values ]
        [ xml ]
    AndroidManifest.xml
    default.properties
    proguard.cfg

次に、ImageViewに名前を付けます。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ImageView
    android:id="@+id/ImageView"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:src="@drawable/image"
    />
<TextView  
    android:id="@+id/TextView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="@string/hello"
    android:gravity="center"
    android:textSize="24px"
    android:textStyle="bold"
    android:textColor="#ffffffff"
    />
</RelativeLayout>

そして、コードからImageViewの名前を指定して、RemoteViews経由で表示します。

SampleBatteryWidget.java

package sample.android.battery.widget;

import android.app.Service;
import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.BroadcastReceiver;
import android.content.ComponentName;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.os.IBinder;
import android.widget.RemoteViews;

public class SampleBatteryWidget extends AppWidgetProvider {
    @Override
    public void onUpdate(Context c, AppWidgetManager awm, int[] awi) {
        Intent in = new Intent(c, WidgetService.class);
        c.startService(in);
    }
    
    public static class WidgetService extends Service {
        @Override
        public void onStart(Intent in, int si) {
            IntentFilter filter = new IntentFilter();
            filter.addAction(Intent.ACTION_BATTERY_CHANGED);
            registerReceiver(batteryReceiver, filter);
        }
        
        @Override
        public IBinder onBind(Intent in) {
            return null;
        }
    }
    
    private static BroadcastReceiver batteryReceiver = new BroadcastReceiver() {
        final int[] IMAGE = {R.drawable.image0,
            R.drawable.image20,
            R.drawable.image40,
            R.drawable.image60,
            R.drawable.image80,
            R.drawable.image100,};
        int scale = 100;
        int level = 0;
        
    @Override
    public void onReceive(Context c, Intent in) {
            String ac = in.getAction();
            if (ac.equals(Intent.ACTION_BATTERY_CHANGED)) {
                level = in.getIntExtra("level", 0);
                scale = in.getIntExtra("scale", 0);
            }
        }
        
        AppWidgetManager awm = AppWidgetManager.getInstance(c);
        ComponentName cn = new ComponentName(c, SampleBatteryWidget.class);
        RemoteViews rv = new RemoteViews(c.getPackageName(), R.layout.main);
        rv.setImageViewResource(R.id.ImageView, IMAGE[(int)(level*100/scale)/20]);
        rv.setTextViewText(R.id.TextView, ""+(int)(level*100/scale));
        awm.updateAppWidget(cn, rv);
    };
}

よし。これでOKなはずです。

21.実行する

完成したので、実行してみます。

バッテリー残量ウィジェット改良完了

OK!バッチリです。これなら使える範囲です。これで、バッテリー残量ウィジェットの作り方を終わります。

前へ   1  2  3  4   次へ