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

OnePlus 5T 開封の儀:派手さはないもののメタルボディが気持ちいい
夜明け前 【あなたのホーム画面見せてください 2018】
夏アウトドアに最適なiFeccoの小型軽量Bluetoothスピーカーレビュー
Android One X2 を購入しました-1年前のスマホですがAndroid 9 Pieも来てるのですよ
【あなたのホーム画面見せてください 2018】応募全31作品のまとめ
48MP AIカメラと画面内指紋センサーを搭載したUMIDIGI Xが間もなくやって来る!保護フィルムから判明
耳にすっぽり入れてスッキリ完全コードレス!片耳タイプのBluetoothイヤホン ZNT N1
専用ペン付きスマホ LG Q Stylus を購入しました!外観を写真でチェック!
格安SIM (MVNO) の速度測定:2019年2月 その1 NifMoの今後にちょっと期待したい
AIで驚異的なバッテリーライフ!Android 9 Pie搭載のフラッグシップキラー UMIDIGI F1
UMIDIGI A3 の公式アンボックス動画が公開!安く手に入る11.11プロモーションはあと3日
Tronsmart T6 レビュー:コンパクトながら360°全方位に広がる重低音が身体に響いてGood
文字拡大メモ:スライダーで文字の大きさをビヨンビヨン変えられるメモアプリ
格安SIMの通信速度比較【2019年5月その2】nuroモバイルau回線はそこそこ、b-mobileとDTI SIMの爆速が続く
Honor 8X Max レビュー:大きい、大きいけどこれは確かにスマホである