PebbleTime 開発 - bounds と frame

前回までは、サンプルコードを元にデジタル時計を作ってみました。

Layer、TextLayer や BitmapLayer を使用して自分だけの Watchface を作ることができました。

今回は、それらの表示位置を変更する方法を紹介します。

bounds と frame

レイヤーの位置は、bounds と frame で制御します。

たとえば、Layer を作成するときは layer_create を使用しますが、その第1引数は GRect frame です。 また、 layer_set_bounds や layer_set_frame といったAPIで bounds と frame を設定可能です。

それぞれ、簡単に言うと以下のような感じです。

項目	説明
bounds	コンテンツ（テキストや画像）を表示する位置。
frame	レイヤーを表示する位置（親レイヤーに対する位置）と表示サイズ。

と言われてもよくわからないと思うので、後で具体的に設定値と表示を見せます。

GRect

bounds も frame もどちらも GRect 型の変数です。

GRect 型は以下の様な構成となっています。

メンバ変数		説明
origin	x	基準点の x 座標（ピクセル単位で、一番左が 0 です）
y	基準点の y 座標（ピクセル単位で、一番上で 0 です）
size	w	横幅（ピクセル単位）
h	高さ（ピクセル単位）

ちなみに、GRect 型の変数を初期化する方法は大きく2種類あります。

/* 愚直に初期化する方法 */
GRect rect = (GRect){
        .origin = {.x = 0, .y = 0},
        .size = {.w = 144, .h = 168}
    };

/* 初期化マクロを使用する方法 */
GRect rect = GRect(0, 0, 144, 168);

公式のサンプルでも、両方使用しているので、好きな方で初期化してください。

表示例

では、百聞は一見に如かず。 具体例をお見せします。

凡例

左端に表示

今まで見てきたやつです。

コンテンツを普通に表示し、レイヤー位置を左端に設定しています。

ちなみに、frame のサイズは bounds より大きくても、表示は変わりません。 逆に frame のサイズが小さいと、その分だけが表示されます。

コンテンツを右下にずらす

bounds.origin を (10, 10) に設定しました。 これは「コンテンツの基準点を (10, 10) に設定する」ことを意味します。 それにより全体が右下に移動しています。

ちなみに、bounds のサイズは表示には影響しないので、コンテンツより小さくしてもコンテンツ全体が表示されます。

コンテンツを左上にずらす

bounds.origin を (-10, -10) に設定しました。 これは「コンテンツの基準点を (-10, -10) に設定する」ことを意味します。 それにより全体が左上に移動しています。

表示位置を右下にずらす

frame.origin を (10, 10) に設定しました。 これは「レイヤーの基準点を (10, 10) に設定する」ことを意味します。

ここで注目してほしいのは、bounds の値です。
bounds.origin は (0, 0) です。
つまり、コンテンツ全体を表示するときは、表示位置に限らず bounds.origin は (0, 0) となります。

コンテンツを右下にずらし、表示位置も右下にずらす

コンテンツを左上にずらし、表示位置は右下にずらす

まとめ

今回は、レイヤーの表示位置に関わる bounds と frame について説明しまし。

といっても、あまり説明しませんでしたが、表示例を見ればおおよそ分かると思います。

なれるまでは混乱するかもしれませんが、あまり複雑な設定をする機会は無いと思います。 以下の理解で殆どの場合は大丈夫です。

• 表示位置は frame.origin で設定する
• frame.size はコンテンツを同じ大きさに設定する
• bounds は変更しなくてOK

さて。

文字も画像も表示できるようになりましたが、時刻を表示するフォントが面白くないですよね。

というわけで、次回はフォントの変更方法とカスタムフォントの表示方法を紹介します。
カスタムフォントを使えるようになると、画像よりも表現能力が高まりますよ。

---

PebbleTime は、公式サイトでプレオーダーを受付中です。 2015-07-23 現在で $199.00 です。

getpebble.com

---

Amazon.co.jp に並行輸入品が出てますね。 ただ、正直高いです。 公式サイトで買うことをおすすめします。

Pebble Time スマートウォッチ 腕時計 (レッド) [並行輸入品]

---

こちらは古い白黒のやつ。 見た目の違いで2種類あります（性能は同じ）。

Pebble Steel (Brushed Stainless)

Pebble Smartwatch for iPhone and Android ( ブラック / レッド ) 並行輸入品