Zooper Widgetスキン : 丸囲みの週間カレンダー balloon calendar

|
20150802-1

昔、UI系のサイトなどをチェックして、気に入ったものをブックマークしていたことがありました。いつかそれをGlaejaやZooper Widgetで再現してやろう、と。

そしてずっとブックマークにあったものの1つがこれです。
UltraUI | UI Design Inspiration | Bloodnote for iPhone by PiotrBajtala (@bajti81)

iPhoneのアプリなのかな?ただ現在そのアプリのスクショでは私が気に入ってた画面上部のカレンダー部分が確認できません。

まぁいいや。とりあえず作ってみましょう。今回はZooper Widgetを使いました。

背景部分

20150802-220150802-3

まずは背景となる部分をRect3つで作ります。
3つめのRectは本体をウィジェットの範囲から外に出し、その影だけを表示させています。これにより、ステータスバーから影が落ちているようなものになります。

20150802-4

日付が乗る●をRectで描画します。うまい間隔になるように配置します。これだけでRectが7個…。
この部分は動いたりしない部分なので、使える人はグラフィック系のソフトで作ったり、Glaejaで同じようなのを作って画像化するなどしたほうがいいかもしれませんね。

日付をSeriesで入れよう!

こういった日付や曜日が連続で表示されるというのはZooper WidgetならSeriesで可能なので便利です。このために今回はZooper Widgetを選んだんです。

20150802-5

が…どうにも間隔が合いません。
スペースとか調整しても、どうにも納得行くようにはできません。

1日ずつ表示していく

20150802-620150802-7

シカたないので1日ずつ書いていくことにしました。
リッチテキストを使い、フォントはBebas Neueを使っています。

[c=#ffdfdac7]#Ddd#[/c]
[s=16] [/s][s=14]#DEEE#[/s][s=16] [/s]

2行目の曜日部分は[s=14]#DEEE#[/s]とBBcodeを使ってフォントサイズを変更しています。
その前後に2つの[s=16] [/s]がありますが、これは行間調整用です。日付と曜日の行間をもっと開けたかったのですが、Zooper Widgetは行間調整できないので、曜日部分よりも大きなフォントサイズで空白を表示して行間を広げています。

前後の日付を表示

20150802-820150802-9

日付と曜日をコピペして前後の日付部分を作ります。今回はx方向に44ずつ等間隔にずらして行くことにしました。

Zooper Widgetでは現在の1日後の日付を表示するには以下のように記述します。

#D+1440dd#

この+1440というのは1440分後を示します。なので#D+10HH:mm#とすれば10分後の時刻を表示できます。これを使って1日後、2日後…というように表示していきます。

完成

20150802-11

一度作った後に位置の微調整などを行って完成です。モジュール数が増えてくると、このあたりの数値の調整が非常に面倒ですね。

スキンファイル

今回もスキンファイルを公開します。気になる方は使ってみてください。

glaeja-iconballoon calendar
制作: orefolder
価格: 無料

ダウンロード

Random Posts

orefolder的に2018年を振り返る-スマホ/格安SIM/ホーム画面カスタマイズ
楽天モバイルのau回線がスタートしたのでさっそく契約!実店舗で即日開通だったけど…
Mi Pad 4を購入しました:8インチの手頃なサイズで十分なスペックを持ったタブレット
格安SIMの高速通信オンオフをクイック設定パネルから切り替える方法 (mineo・UQ mobile・OCN)
小さいは正義!旅行の時に持ち出したいAUKEYの超小型2ポートUSB充電器 PA-U32
BIGLOBEモバイル タイプAを契約-速度測定の結果はある意味で予想外
ドヤ感満載! 海外ユーザー風ホーム【ホーム画面定期コンテスト】
Galaxy S8:新しいホームボタンは、見えなくてもそこにある-押し込む感覚もバッチリ
フラッグシップキラーUMIDIGI F1がキックオフセール199ドルという価格で発売開始!
【アンケート】Androidスマホの日本語入力(キーボード)アプリなに使ってますか?
KLWP/KWGTでYahoo!天気のRSSを使って天気情報を表示する方法
すかいらーくグループでフリーWi-Fiが使えるようになったのでガストで試してみた
おいでやす京都【ホーム画面定期コンテスト】
フォントで楽しむ天気予報 (天気ウィジェット):日本語テキスト表示の天気ウィジェット
KLWPのテーマ特集:複数のテーマを含んだプリセットパック 5アプリ49テーマ (2018.04.15)