Android【KLWP】シンプルな音楽プレーヤーのオブジェクトを作成

KLWPに慣れてくると作りたくなるのが、音楽プレーヤーが操作できるオブジェクト。ひとつひとつのパーツを個別にできるので、最終的なデザインは思いのまま。難しく感じるかもしれませんが、作ってみると意外とそうでもないことに気づくので、いろいろなデザインにチャレンジしてみてください。


KLWP Live Wallpaper Maker
KLWP Live Wallpaper Maker
開発元:Kustom Industries
無料
posted with アプリーチ


ウィジェットによくあるタイプのように以下のパーツを作成し、好きなように配置するだけでオリジナルデザインのオブジェクトを完成させることができます。もちろん必要なパーツだけでもOKです。

・タイトル名
・アーティスト名
・再生/停止ボタン
・前曲ボタン
・次曲ボタン
・カバーアート



KLWPではこの他に再生経過時間がわかるパーツや音量調整ボタンなども作成できるので、ウィジェットのようなコントロール部分だけでなく、音楽プレーヤーのアプリ内で表示されるような画面全体を使った表現も可能。なので、KLWPのひとつの画面を擬似音楽プレーヤーにすることもできちゃいます。


それでは、上記6点のパーツの作り方の説明です。
今回は説明のためパーツを個別にしていますが、グループ化していくつかに分けた方が後々調整しやすくなりますよ。


タイトル名

「テキスト」のアイテムを追加し、演算子エディタに以下を記述します。

演算子エディタ:$mi(title)$


アーティスト名 

「テキスト」のアイテムを追加し、演算子エディタに以下を記述します。

演算子エディタ:$mi(artist)$



再生 &  停止ボタン

このパーツは停止中は再生ボタンが表示、再生中は停止ボタンが表示されるように演算子を使って作成します。また、タップ操作が加わるのでその設定も行います。

「アイコンフォント」の「Material:(デフォルトの★でOK)」を追加し、アイコンに演算子を以下のように記述します。この時、アイコンの項目に演算子を記述できるようにしてください。
(アイコン項目にチェック → 画面右上の計算機アイコンをタップ)

演算子エディタ:
$if(mi(state)=playing,stop,play_arrow)$

※演算子の赤字部分には表示させるアイコン名を記述
(上記の場合は、再生中は「stop」、停止中は「play_arrow」を表示)  


次に、アイコンへのタップ操作を有効にするため、「タッチ」のページに以下の内容で追加します。

一回タップ:音楽操作
音楽:再生 / 停止



前曲ボタン

アイコンフォントの「MaterialSkip_previous」を追加し、タップ操作を有効にするため「タッチ」のページに以下の内容で追加します。

一回タップ:音楽操作
音楽:前の曲へ



次曲ボタン

アイコンフォントの「MaterialSkip_next」を追加し、タップ操作を有効にするため「タッチ」のページに以下の内容で追加します。

一回タップ:音楽操作
音楽:次の曲へ



カバーアート

「図形」アイテムを追加し、「FX」のページでテクスチャの項目を「ビットマップ」にします。さらにビットマップの項目に演算子を記述できるようにします。
(ビットマップ項目にチェック → 画面右上の計算機アイコンをタップ)

演算子エディタに以下を記述します。

演算子エディタ:$mi(cover)$




以上6点のパーツがあればウィジェットによくあるタイプの簡単なものが作れます。
今回はアイコンに「Material」を使いましたが、「Fontawesome」や「Entypo」にも音楽関連のアイコンがあります。そちらを使う際はアイコン名を間違わないように注意してください。また、表示するアイコンは演算子で指定するので、アイテム追加の際に選択したアイコンは無視されます。