Android(アンドロイド)特集記事

2014/07/11 Android(アンドロイド)特集記事

Zooper Widgetの使い方、第3回です。

まだまだ基礎的な説明が続き、すでにZooper Widgetを使っている人にはもどかしいかもしれませんが、改めて見直すことで新たな発見もあるかもしれません。記事の最後には今回のまとめで作例も掲載しますので、そちらもぜひご覧ください。


Zooper Widget
価格:無料

AppStore_Badge_JP_135x40


割合を棒グラフで表現する「プログレスバー」

zooper-03-1

今回はモジュールの1つ「プログレスバー」を扱います。
プログレスバーは、何かしらの値の割合を棒グラフで表現するモジュールです。

画像ではバッテリー残量が棒グラフで描画されており、緑の部分がバッテリー残量、そこと白い部分を合わせたものがバッテリー総量となります。全体に対してどれくらいバッテリーが残っているか、視覚的に分かりやすいですね。

プログレスバーの設定

zooper-03-2

今回の設定で重要になるのは「プログレスの最小/最大/値を編集」という項目です。
この項目では、そのバーがどういったものの値を表現するのか、それを設定します。よく使いそうなものはあらかじめ用意されているので、それを選ぶだけでも大丈夫です。

zooper-03-3

このバーは直線だけでなく、「カーブ」で曲げたり、もっと曲げて円にしたり、「Spacing」「Split」を使って点線にすることもできます。

点線はその設定がちょっとわかりにくいのですが、
Spacing…点と点の間のスペースの大きさ
Split…点1つでいくつ分の値を意味するか
となっています。

例えばバッテリーを表すバーを作ったとして、最大値は100です。Splitを5とすると、100÷5で20個の点を使った点線となります。Splitが10なら10個の点となり、1つの点の長さはSplitが5の時よりも大きくなります。
Splitを100にすれば、1%ごとに1つの点を使うことになりますね。

zooper-03-4

「Fill Mode」という項目では、このバーにグラデーションなどを掛けることができます。
グラデーション…元々の色から指定した色までだんだん変わるグラデーションで表示されます。指定した色に完全に変わるのは最大値の時になります。
Fade…バー全体が、値によって色を変化させていきます。
Highlight Current…点線を使った時に、その現在値を表す点の部分だけ色を変えます。

作例

zooper-03-5

プログレスバーを使って、バッテリー残量と日付時間(7月11日14時43分)を表示するスキンを作ってみました。

4つ並んだ円は左から月/日/時/分を表しています。
例えば日を表す2番目の円は、最大値を「その月の日数」を表す「#Dl#」と入力し、「値」に「#Dd#」と入力します。これで現在の日数分が塗られたバーになります。このバーを曲げて円にしています。

ちょっとした工夫を

zooper-03-6

このままでも良かったのですが、もう一工夫してみます。
例えば「月」を表すバーは1月から12月までの12段階でしか変化しません。これをもっと細かく、1分ごとに変化させてみました。

zooper-03-7

それぞれの円の最大/最小/値はこのようになります。
…最大:60 値:#Dm#
…最大:1440 値:#DH#*60+#Dm#
…最大:#Dl#*1440 値:(#Dd#-1)*1440+#DH#*60+#Dm#
…最大:365*1440 値:(#DD#-1)*1440+#DH#*60+#Dm#

1日は24時間、つまり1440分です。そして現在は#DH#で表示される値に60をかけて現在の分(#Dm#)を足したものです。
そうやって、すべての値を分に換算して入力します。これで1分ごとに少しずつ進むプログレスバーができあがりました。(ちなみにうるう年は考えていません。)

完成

zooper-03-9
クリックで拡大します

今回の結果がこのホーム画面です。
さきほどの画像とあまり変わっていないかもしれませんが、そういう細かいところにこだわってこそ、ですよね?

今回は値を棒グラフで表す「プログレスバー」を学びました。
次はZooper Widgetで天気情報を表示させてみます。





Zooper Widget
価格:無料

AppStore_Badge_JP_135x40


QRコード
(Google Playストア検索)
qrcode
アプリ名 Zooper Widget
価格 無料
対応OSAndroid 3.2 以上
バージョン 2.50
デベロッパー名 MYCOLORSCREEN
レビュー日 2014/07/11

関連記事



タグ: , , ,

※お手持ちの端末や環境によりアプリが利用できない場合があります。
※ご紹介したアプリの内容はレビュー時のバージョンのものです。
※記事および画像の無断転用を禁じます。


お気軽に一言お願いします

コメントありがとうございます (1)

 

  1. 名前:名無しのアプリ使いさん : 投稿日:2016/01/18(月) 12:58:19

    参考になりました。一点教えていただきたいのですが、バッテリーを設定したのですが、数値が表示されません。その設定はどのようにしたのでしょうか。

 

Facebook

トップヘ戻る