チュートリアル

KLWPでバッテリー残量バーにくっついていく吹き出し型の残量数値を作る

20160928-klwp-1

KLWPではプログレスなどを使って簡単にバッテリー残量を示すバーを表示させることができます。その残量に応じて表示位置が変わる、バーの位置に合わせて動く吹き出しと残量数値を作ってみます。
基本的にGlaejaやZooper Widgetで作った場合と同じ考え方で作ることができます。これまでそういったアプリで作ったことがあれば、難なく作れるでしょう。

1.普通にバッテリーバーを作る

20160928-klwp-220160928-klwp-3

まずは普通にプログレスを使ってバッテリーバーを作ります。
今回は位置を中央、サイズを360にしました。この数値は自分の場合に合わせて自由に変更できますが、基準となる数字なので大事です。

2.矢印部分を作る

20160928-klwp-420160928-klwp-5

吹き出しの矢印部分を作ります。「図形」を使い、「三角形」にして90度回転させれば吹き出しの下部分になります。
位置はプログレスと同じく「中央」にし、バーと重ならないようにYオフセットを調整します。今回はプログレスバーの高さが30だったのでそのままYオフセットも-30にしています。

このままだと三角形の位置は真ん中に固定されているので、バッテリー残量に従って動くようにします。

20160928-klwp-620160928-klwp-7

Xオフセットの右端にあるチェックボックスをタップし、上に現れた計算機マークをタップします。これでXオフセットに単なる数値ではなく自分で式を書いて変化させることができます。Xオフセットのところに表示された計算機マークをタップして式の入力に進みましょう。

20160928-klwp-820160928-klwp-9

式には以下のように入力します。

$(bi(level)*3.6)-180)$

bi(level)*3.6は、プログレスバーのサイズが360なので、100%で360動く、つまり現在の残量パーセント数値に3.6をかけた分だけ動かすということです。そしてもともとの位置がプログレスバーの中央、つまり端から180動いているのでその分(180)を引いています。

これで三角の頂点がプログレスバーの位置と合いました。

3.吹き出し本体を作る

20160928-klwp-1020160928-klwp-11

吹き出し本体となる四角の部分は、先程作った三角形をコピーして「長方形」に直して使います。大きさや角を調整し、Yオフセットもずらせば、Xオフセットはそのままで大丈夫です。
これで吹き出しができました。

4.テキスト部分を作る

20160928-klwp-1220160928-klwp-13

バッテリー残量の数値を表示するのも基本的には同じです。テキストでバッテリー残量を表示させ、位置でXオフセットに先ほどと同じ式を入力、Yオフセットはうまく吹き出しの上にくるように調整すればOKです。

これで完成です。簡単ですね。

まとめ

20160928-klwp-14

いかがだったでしょうか。かなり簡単に作れたと思います。これが表示位置を中央から変更したり、サイズを変えるとまた数値が変わってきますが、多少の調整で大丈夫だと思います。

ただ、これをグループ化の中で行おうとすると面倒になってきます。基本的な考えは同じなのですが、グループ化の中だと位置がX/Yオフセットから余白へと変わります。このあたりがKLWPの理解にしくいところになるのですが、しかたありませんね。


KLWPの使い方についてはこちらのページにてまとめています。使い方に困ったときなど、こちらのページも参考にしてください。

Random Posts

ファーウェイが新製品発表会を9月24日に開催!YouTubeにてライブ配信
Unihertz Titanは日本国内から発送!配送先住所の登録が完了してるか確認を
Yahoo!きせかえならRakuten Miniでも壁紙変更が可能
Androidスマホのホーム画面を使いやすく&カッコよくカスタマイズしよう!
KDDI、「INFOBAR xv ミニクッション」が当たるキャンペーンを開催
HUAWEI P40 lite 5G 購入:これが最近のファーウェイかとガッカリした開封とファーストインプレッション
キャッシュレス還元で支払いに変化はあったのか?最も利用してるキャッシュレスは?【MMD研究所調査】
楽天モバイル、DMMより「DMM mobile」と「DMM光」を9月に承継!
プライム会員限定、Amazon Music Unlimited 無料体験に登録すると500ポイントもらえる!
ファーウェイ、8インチタブレット「HUAWEI MediaPad M5 lite」を5/17発売!
今話題のRakuten Miniが2週連続の1位!週間SIMフリースマホ実売TOP10【BCNランキング 6/1~6/7】
LINEモバイル、景品表示法に違反する行為(優良誤認)で消費者庁より措置命令
ドコモ、Galaxy S8 SC-02J / Galaxy S8+ SC-03JにAndroid 9 PieへのOSアップデートを配信開始
プライム会員限定、Amazon Music Unlimited 無料体験で500ポイントとEcho端末40% OFFクーポンがもらえる!
OCN モバイル ONEが7周年!利用者向けプレゼントとTwitterキャンペーンを開催!