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

KWGTのテーマ特集:ミニマル系ホーム画面にもピッタリなクールでカッコいいテーマ5種
nuroモバイルのソフトバンク回線版が提供開始!速度も十分出ていそう!?
Decoka アクティブノイズキャンセリングイヤホン DK100 レビュー:この価格でしっかりノイキャン
Essential Phone PH-1のホーム画面や設定画面をチェック
おいでやす京都【ホーム画面定期コンテスト】
UMi Z レビュー:Zの名は伊達じゃない!Helio X27搭載のハイスペック機は久々に出会った「使える」中華端末
ペルソナ5のアニメにXperiaが登場!描写は精巧で、ちゃんと協力としてクレジットされている
もっと簡単!adbコマンドを使えるようにする方法-ダウンロードして解凍してパスを通すだけでOK
祝!orefolder.netは6周年を迎えました。プレゼント企画なのです!
シンプル、そして気分だけでも指紋認証付きのホーム画面に【ホーム画面企画2016】
コレクションケースを使ってショップ風にスマホを収納してみたらいい感じ
撮影した写真が勝手にGoogleマップに投稿される? 確認すべき設定と通知オフの方法
KLWPのテーマ特集:ドットビューにX型、マテリアルデザインなど雑多なテーマ6種 (2017.07.08)
HUAWEI nova 3 をどこで買えばいいのか、MVNOやオンラインショップの価格をチェック
Googleの天気の通知が頻繁過ぎてウザいので表示させないようにする方法