ただ、走るだけ。いつまでも

ただただ走ってます。いつかはサブ3.5。

はじめてのConnectIQプログラミング〜レイアウトを決める。 onLayout()の編集〜

みなさんおつかれさまです。

あまりの暑さに午後からは一日のんびりとガーミンと戯れてました。

一応朝は走りました。

 

yoneba-1717.hatenablog.com

 

ここからは長いので、興味のない方に下までスクロールしていただくのは申し訳ないです。ランニングブログはこちらからw

にほんブログ村 その他スポーツブログ マラソンへ
にほんブログ村 

 

☆★☆

 

Vivoactive3を使ったConnectIQプログラミング。これまでの流れです。いつまで続くんだろう。

【予告編】ガーミンVivoactive3を自分でカスタマイズしたいぞ - ただ、走るだけ。いつまでも

初めてのConnectIQアプリ〜セットアップ編〜 - ただ、走るだけ。いつまでも

初めてのConnectIQアプリ〜サンプルプロジェクトの実行編〜 - ただ、走るだけ。いつまでも

ビルドアップ走から、初めてのConnectIQアプリ〜新規プロジェクトでMonkeyC編〜 - ただ、走るだけ。いつまでも

初めてのConnectIQアプリ〜データフィールド構築compute(info)編〜 - ただ、走るだけ。いつまでも

 

前回、表示する内容を計算したので、それを表示する枠、ガワ?を作ります。

 

1 データフィールドの表示の流れ

まず最初に、データフィールドの表示までの流れをもう一度。

onLayout()で表示レイアウトを決定(今回)-compute()で表示する値を計算(済)-onUpdate()でレイアウトに値をはめ込む。

という流れで表示されます。(まあ、ぶっちゃけ全部onUpdate()でも出来るんですけど、ここでは分けておきましょう。分けておかないとわかんなくなるし。)

onLayout()はレイアウトが初回に表示される時と変更時のみに呼ばれます。ですので、アクティビティのスタート時、データページを変えた時など、画面が書き換えられる時に呼ばれます。

2 リソースコンパイラ

onLayout()の修正に入る前に、リソースを編集します。

表示場所や文字のそろえ方(センタリング、左寄せなど)、フォントの種類などのレイアウト情報は、もちろん、ソースコード内に直接記述できるんですが、後で変更しやすいように、リソース内に記述することが良いらしいです。

リソース自体はxmlファイルになっているので、eclipseテキストエディタで修正するのが簡単です。xmlエディタ使いにくい...

developer.garmin.com

プロジェクトのresourcesフォルダ内のlayouts.xmlファイルがレイアウトリソースになります。これを右クリックでテキストエディタから開きます。

f:id:yoneba_1717:20180714150543p:plain

 

デフォルトのファイルはこんな感じ。これを改造します。

<layouts>

    <!-- A generic, centered layout. -->

    <layout id="MainLayout">

        <drawable class="Background" />

        <label id="label" x="center" y="center" color="Gfx.COLOR_LT_GRAY" justification="Gfx.TEXT_JUSTIFY_CENTER" font="Gfx.FONT_TINY" />

        <label id="value" x="center" y="center" color="Gfx.COLOR_WHITE" justification="Gfx.TEXT_JUSTIFY_CENTER" font="Gfx.FONT_LARGE" />

    </layout>

 

    <!-- Layouts used for the for the four quadrants. -->

    <layout id="TopLeftLayout">

・・・・・・

    </layout>

</layouts>

まず、<!-- Layouts used for the for the four quadrants. -->より下は使いませんので、最終行の</Layouts>を残してザックリと削除します。

次に、今回は値につけるラベルは使わない(自分で作ってるんだから何を表示してるかぐらいは把握しとけよって)ことにしているんで、,id="label"の行を削除します。

id="value"の行は、2つ値を表示するので、コピペで2つにしておきます。idは別々にしておきます。今回はpaceValueとdistanceValueにしました。

それぞれのvalueの中ですが、xとyは、表示領域内の絶対位置です。centerとかleftとかピクセル値がなどの静的値が書けるそうです。(実際は警告が出るだけで、なんでも書けるっぽい)

colorはフォントの色。justificationは文字揃え。fontは、フォント名です。

今回は、xとyはプログラム内で設定するので無し。色は黒、文字揃えは中央で、上下も中央、フォントはGfx.FONT_NUMBER_HOT(大きいフォント)で行きます。

ちなみに、justificationのCENTERの後ろにある"|"は、"or演算子"です。VCENTER(上下で中央)は、左右の揃え方とこの演算子で使って重ねて指定できます。

他の選択肢はこちらに。

改造結果はこれ。

<layouts>

    <!-- A generic, centered layout. -->

    <layout id="MainLayout">

        <drawable class="Background" />

        <label id="paceValue" color="Gfx.COLOR_BLACK" justification="Gfx.TEXT_JUSTIFY_CENTER | Gfx.TEXT_JUSTIFY_VCENTER" font="Gfx.FONT_NUMBER_HOT" />

        <label id="distanceValue" color="Gfx.COLOR_BLACK" justification="Gfx.TEXT_JUSTIFY_CENTER | Gfx.TEXT_JUSTIFY_VCENTER" font="Gfx.FONT_NUMBER_HOT" />

    </layout>

</layouts>

このxmlファイルですが、コンパイラがモジュール化してくれて、プログラムからは、Rez.というモジュールのプロパティとしてアクセスできます。

3 onLayout()の編集

onLayout(dc)を作り始めます。元からあるソースは使えないので、削除しておきます。まず、先ほどのレイアウトxmlファイルを読み込みます。

View.setLayout(Rez.Layouts.MainLayout(dc));

まあ、これはセオリーと思って書けば良さそうですね。

これで、リソースコンパイラが作ったレイアウトの材料がセットされます。

 

var paceValuelView = View.findDrawableById("paceValue");

var distanceValueView = View.findDrawableById("distanceValue");

次に、セットしたレイアウト(をセットしたViewクラス)から、Drawable(表示可能部品ですかね。)を取り出します。xmlファイルのidでサーチします。

今回は、表示場所をスクリーンの左から1/4と3/4で、上下はちょうど真ん中に表示したいと思ってます。こんな感じ。

f:id:yoneba_1717:20180714162803p:plain

それをセットしておきます。動的値なので、プログラムでセットします。

paceValuelView.setLocation(dc.getWidth()/4, dc.getHeight()/2);

distanceValueView.setLocation(dc.getWidth()*3/4, dc.getHeight()/2);

全体を通しで書くととこんな感じです。短い。

   function onLayout(dc) {

 

        View.setLayout(Rez.Layouts.MainLayout(dc));

        var paceValuelView = View.findDrawableById("paceValue");

        paceValuelView.setLocation(dc.getWidth()/4, dc.getHeight()/2);

        var distanceValueView = View.findDrawableById("distanceValue");

        distanceValueView.setLocation(dc.getWidth()*3/4, dc.getHeight()/2);

 

        return true;

    }

 最後にtrueを返却してます。これ意味あるのか?まあ、サンプルにあったので残しておくか。

これでレイアウトは完成です。静的なレイアウト情報はリソースファイル内に書いておいて、これを読み込む。読み込んだ後に動的なレイアウト情報をセットするって流れっぽいです。

 

しっかし、サンプルとして表示されているプログラムとガーミンのサイトの例文がかなり違ってる。まあ、さすがアメリカ品質。動きゃ良いって感じですね。まあ、実際ここまで動いてるんで良いんですけど。

 

次回はこのレイアウトにペースと距離をセットして表示させます。

 

にほんブログ村 その他スポーツブログ マラソンへ
にほんブログ村