前回ウィジェットの設定をしたヘッダー部のウィジェット上で使うモジュールをひとつずつ作っていきます。
モジュールにはいろいろな機能を持ったものが用意されていて、それらを組み合わせてひとつのウィジェットを作ります。
一通り作ってみて理解すれば本当に多彩なホーム画面が作れるようになりますよ！

ヘッダで使っているモジュールを種類ごとに解説していきます。

※モジュールのタップ機能は有料版のZooperにしかありません。
しかしながら無料版でも似たような動作ができるようにすることは可能ですので、無料版使用時はとりあえずモジュールのタップ機能は読み飛ばして大丈夫です。
タップ時にフォルダを開きたい場合も同様です。

目次

□　矩形 モジュール

四角形や線を描いたりするためのモジュール。画像を用意しなくても単純な四角や線ならこちらを使いましょう。

ヘッダでは区切りの縦線を5本分。（区切り）
上段の背景を暗くするための矩形。（上部シャドウ）
ウィジェット下部の線。（下部金ライン）
下記にあるプログレスバーのフレア（周辺ぼかし）用の矩形。（センターラインフレア）

以上6モジュール。

区切り×5

垂直方向に細く短い線を作ります。

モジュール名　区切り
基準位置　中央
Xオフセット　47
Yオフセット　20
色　#9e4a4a4a
幅　2
高さ　50

この設定で一つ作成し、コピーしました。
コピーの設定はXオフセットだけ変えていきます。

コピーのそれぞれのXオフセットの値は
120,-9,-89,-50です。
実際に作るものにあわせて微調整しましょう。

上部シャドウ

元ネタに合わせて上段を暗くします。

モジュール名　上部シャドウ
基準位置　中央
Xオフセット　0
Yオフセット　-30
色　#8a000000
幅　360
高さ　45

下部金ライン

同様に。

モジュール名　下部金ライン
基準位置　中央
Xオフセット　0
Yオフセット　44
色　#ffffcb00
幅　360
高さ　1

センターラインフレア

こちらは下記に出てくるプログレスバーの背景として使うものになります。

モジュール名　センターラインフレア
基準位置　中央
Xオフセット　0
Yオフセット　-7
色　#341aadaf
幅　360
高さ　5

今回はここまで。次回はいよいよ数式を作って動的に変化するリッチテキストモジュールを作っていきます。