チュートリアル

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

KLWPではプログレスなどを使って簡単にバッテリー残量を示すバーを表示させることができます。以前、そのバーの位置に合わせて動く吹き出し型の残量数値の作り方を書いたのですが、今度は円形にしたプログレスバーでも同じことをやってみます。

1. 円形のバッテリーバーを作る

まずは「プログレス」を使って円形のバッテリーバーを作ります。「プログレス」はデフォルトでバッテリーバーになっているので、あとは「スタイル」で「円形」を選べば丸くなります。色などは適宜調整してください。

2. グループ化(重ねる)を作成

グループ化(重ねる)を作成し、このあとのアイテムはすべてこの中で作成します。

3. アイコンフォントで吹き出しのツノ部分を作る

グループ化(重ねる)の中に「アイコンフォント」を作ります。セットは「Material」でアイコンは「Network_wifi」です。適当にツノになりそうな三角形っぽいものを選びました。

これを作ったら「位置」で「余白(下)」の数字を大きくしていって、バッテリーバーの円周上に来る位置まで揃えます。

4. 吹き出しの他の部分を作る

ツノ部分のアイコンフォントと同じように「図形」や「テキスト」でほかのパーツを作って吹き出しのようにします。

5. バッテリー残量に合わせて回転させる

グループ化(重ねる)の「レイヤー」タブに移動し、「回転」を「手動」に設定、値を計算式で入力できるようにして、以下のように設定します。

$bi(level)*3.6$

バッテリー残量×3.6です。これなら残量が0で0、50%で180、100%なら360になります。これでバッテリー残量と連動して回転することになります。

6. 完成?

これでとりあえずの完成です。

…でも、数字が回転してしまって読みにくいですって?ならば数字は円周上を回るけど向き自体は回転しないようにしましょう。

7. テキストを回転させない

テキストの設定で「回転」を「手動」に設定、値を計算式で入力できるようにして、以下のように設定します。

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

先程のものと似ていますが、今度は360から引いています。これで逆向きの回転のようなものがかかり、数字は常に回転してないように見えます。

ただ、フォントによっては微妙に場所がずれるので、その当たりは調整が必要です。また、吹き出しの形も角丸四角形だと数字と合わないので上の例では円にしています。

8. 完成

ともあれ、これで完成です。割と簡単にできますね。


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

Random Posts

Pixel 3aが14,000円引き!Googleストアにて在庫限り35,500円のセール!
格安レンタルWi-FiのChat WiFiにて新生活応援キャンペーン!月額5500円→3880円!
TaoTronicsのワイヤレスイヤホン「SoundElite 71」使用レビュー:軽量で高音質なコスパ良イヤホン
格安SIM (MVNO) の速度測定:2020年5月 その1 続く外出自粛の影響、そこにも微妙な変化
Echo Dot + Amazon Music Unlimited 2ヶ月分で2,980円!
Jelly 2が技適の認証を完了!配送先住所の不備者リストも公開されたのでバッカーは確認を!
au、5Gサービスは3月26日スタート!料金プランも発表
ファーウェイ、GPS内蔵のスマートバンド「HUAWEI Band 4 Pro」を1/17発売!税抜8,800円
最低維持費と2年間の総額で見る一番安い格安SIM!予備回線用に7社の料金を比較
UMIDIGI Power 3は11/11、149.99ドルから販売開始! Xiaomi Redmi Note 8キラーとなれるか!?
IIJmio、国内初のeSIM対応データ通信サービスを7/18より開始!月額利用料は6GB/月で1520円
Anker、最大10Wの急速充電できるスリムなワイヤレス充電器Anker PowerWave 7.5 Padを発売開始
BCNランキング SIMフリースマホ実売台数TOP10 (9/16~9/22) ZenFone Max (M1)が10位圏内に浮上
Googleストアにて「Google 22周年記念キャンペーン」が予告
特務機関NERV防災アプリにて月額制サポーターズクラブ開始!