【Custom】KLWPで製作中 - Playストア風ライブUI

公開日: 2014年10月25日 HowTo KLWP ホーム画面 ライブ壁紙


とりあえずここまで。 両サイドにパネルを追加して、展開するとウィジェットが表示されるようにしてみました。
とにかくアニメーションが滑らかなのが気に入っています。さすがLWP。
右側に置いたのは「Scrollable News Widget」です。

Scrollable News Widget - Google Play の Android アプリ

  •  Nova Launcher (Prime)
  •  グリッド 7x4
  •  マージン 上下とも無し
  •  アイコンラベル非表示
  •  スクロール効果 無し
  •  ドック非表示
  •  ウィジェットのパディングを解除
以上の設定を行い、壁紙にKLWPを設定します。

KLWPについてはこちら↓
次のカスタマイズはこれだ!Zooper、Themer、Buzzのようにテーマを適用、レイヤー単位で細かくパーツを自作できる「ライブ壁紙」

Advanced Edit



Zooperのようにパーツ単位で作っていけます。 Zooperとちょっと異なる概念が使われた部分があって苦労したけど、慣れると便利。 あと、パーツの右側にあるチェックボックスを使ってパーツのコピペ(複製)も可能です。 同じパーツを並べる時はこれがすこぶる便利。



追加できるパーツは現状これだけで、一番上の「コンポーネント」から作成済みのものやプリセットされたものを追加できます。
その下は順番に、

「Text」はいわゆるリッチテキストです。様々な情報を拾えるので、バッテリー残量や時刻、日付表示に重宝。
「Shape」はZooperでいう矩形、つまりは図形です。
「Image」は画像ファイルをレイアウトに挿入できます。

「Overlap Group」と「Stack Group」はその名の通りグループ、つまりはフォルダのように使えます。
これがなかなか便利で、「Overlap」のほうは「複数のレイヤーを重ねて1つのグループとする」パーツ。
「Stack」のほうは「複数のレイヤーを並べて1つのグループとする」パーツです。



まずはステータスバー部分を作ります。
パーツは5つ使っており、「background」が帯を表現するもの、そこに「clock」「battery%」「battery text」「day text」を重ねて1つの「Overlap Group」としています。



「background」に指定するパーツは「Shape」で、種類を「Rectangle」にします。レクタングルとは長方形のことです。

ここで気づいたのですが、どうもKLWPはHD解像度向けに最適化されているようで、幅や高さなどに指定できるピクセル数のMAXが720まででした。
つまり端末の解像度とは関係なく、「縦幅1280個、横幅720個のセル」でもって1画面を構成していくようなイメージが必要となるようです。
ちょいややこしいですが自分の端末の解像度を忘れちゃえばいい。とりあえず1280x720の画面を作るぞって思っとけばできます。

なので、「background」の横幅は720になります。高さはお好みで。



続いて「background」パーツの「FX」タブを変更し、「Vertical Gradient」を選択します。これは縦方向にグラデーションをかける設定です。
上端を黒(#FF000000)、下端を透明(#00000000)とします。当然ですが数値はRGBではなくARGBです。
「PAINT」タブで指定した色~「FX」タブで指定した色の間でグラデーションが成立するので、両方の色を指定します。

あとは必要なパーツ(時計やバッテリーなど)を重ねてできあがり。
バッテリーの表示はKLWPだけで作るのは難しかったので、アイコンを作って%表記と重ねています。



ちょっとこだわったこがここ。
サイドメニューを引き出す(ホーム画面の隣のページに移動する)と背景が暗くなるようにしてみました。

KLWPで作ったパーツは「ANIMATION」タブから「どのページに表示するか」「どんなエフェクトで切り替えるか」を指定できます。
ここもちょっとややこしいのですが、とりあえず3枚のページで作ってみるとわかりやすいと思います。

左サイドメニューは「screen 1」に、右サイドメニューは「screen 3」に表示するよう指定します。
そして切換えエフェクトは個別に指定します。

まずパネル部分(白いほう)は、普通にスクロールにしときます。
そして影部分(暗いほう)は、アクションに「Fade」を指定します。

これで「パネルはスライド」で挿入され、「影はフェード」で挿入されます。フェードの速度を弄っておくとより"らしく"なります。(僕は300にしてます、大きくし過ぎるとクラッシュしました)

同じものを右側にも作って、とりあえずここまで。
なお、アニメーションを指定しなかったパーツはページを切換えても消えず、常に表示されたままにできます。

さすがに回転を表現することができないので、アクションバー部分に何を置こうか考え中。あとカレンダー作れないかな。

そんな感じ。

0 件のコメント :

コメントを投稿

いつもご覧いただきありがとうございます。
質問やご意見がありましたらこちらからどうぞ。
返答まで時間がかかる場合があります。