チュートリアル

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

CanonカメラからGoogleフォトへWi-Fiで自動転送できるように
ドラクエモンスターズ2が発売記念で30%オフ!その他スクエニ作品もセール中!【アプリセール情報】
Kindle Unlimited、今会員登録すると199円で2ヶ月利用可能に! 3/3まで
Digital WellbeingでTwitterを制限して無駄に過ぎ去る時間を減らして健康的な生活を取り戻したい
Android 11のイースターエッグはAndroid Neko…が微妙にリニューアル
シャープ、AQUOS R2 compact SH-M09とAQUOS zero SH-M10にAndroid 10へのOSアップデートを配信開始
キングジム、着信やメール、LINEの通知をお知らせするスマートボールペン「インフォ」INF10を6月より発売
Honor Band 4 Running Edition レビュー:走るときは靴に装着できるランナー向けのスマートバンド
BIGLOBEモバイルの特典がアップ!Redmi Note 9Sは実質2,560円!
Google Play Points 会員限定 東京ゲームショウ 2019の豪華特典付き入場チケットが当たるキャンペーン
MPOW、23日~24日限定の勤労感謝の日スペシャルセールを開催!
ドコモ、25歳以下のスピードモードと1GB追加オプションを50GBまで無償化!新型コロナウイルス感染症の流行に伴う支援
Amazon Music Unlimited無料体験に登録で500 Amazonポイントプレゼント!
BCNランキング SIMフリースマホ実売台数TOP10 (6/24~30) P30 liteとZenFone Live (L1)がトップに浮上
ドコモショップで Xperia 1 を回線契約なしで購入! スマホ単体で購入可能は本当だった