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

C90新刊 「Androidのホーム画面をカスタマイズする本6」 のお知らせ
【今日のホーム画面】好きな絵を邪魔せずそれでいて自分に使いやすく工夫した寝起きホーム画面
耳にすっぽり入れてスッキリ完全コードレス!片耳タイプのBluetoothイヤホン ZNT N1
Ulefone Gemini レビュー:ダブルカメラのボケは独特で、多機能なホームキーなど全体的にそこそこ
質問に答えるとあなたにピッタリのホーム画面をGoogleが提案してくれる#myAndroid Taste Test
ZenFone 3で撮った写真:基本的にオートでも充分にきれいな写真は撮れる
Android版PC? デュアルOSタブレット CHUWI Vi10 Plusを一週間使用してのレビュー
画面の端を丸くしてステータスバーとナビゲーションバーからホーム画面を分離させる
TV Eye【ホーム画面定期コンテスト】
Starry night:ホーム画面は星の海に還る【ホーム画面企画2016】
Amazonでベストセラー1位のマウス「Qtuo 2.4G ワイヤレスマウス」レビュー。898円で6ボタン+DPI変更可能なマウスが手に入る!
LINEモバイル「友だち招待」スタート!招待URLからの登録で登録事務手数料が最大無料に!
Hypno Clock Live Wallpaper : 自由に色をカスタマイズできる機械式時計のライブ壁紙
CPU Monitor : ウィジェットでCPUやRAMの状態をリアルタイム表示してくれるアプリ
2017年に常用し始めた便利なアプリたち