スクリーンパーツの作成

スクリーン パーツでデザインを作成

プレビュー

このトピックではプロジェクトのスクリーンへのナビゲーションを持つスクリーンパーツをデザインします。デザインを開始する前に 2 つのスクリーンを持つプロジェクトを準備してください。この例では、製品ページおよびブログ ページのスクリーンを含むプロジェクトを使用します。

概要

以下は主な手順です。

  1. スクリーンパーツの作成
  2. (オプション) スクリーンパーツのプロパティを編集
  3. プロジェクトのスクリーンへのナビゲーションを追加

詳細手順

(a-1) 1.スクリーンパーツの作成

スクリーンパーツを作成するには、スクリーンの要素をスクリーンパーツに変換するか、新しいスクリーンパーツのデザインを作成して要素を追加します。

スクリーンの要素をスクリーンパーツに変換するには:

  1. 要素をスクリーンに追加します。
    この例では、タイトル、円、およびアイコンを持つロゴを作成します。その他のタイトルおよび長方形を追加します。

  2. 追加した要素を選択し、プロパティ パネルスクリーンパーツへ変換 操作を選択します。
    スクリーンをデザインするとき、スクリーンの部分をプロジェクトのその他のスクリーンに再利用する予定がある場合、このオプションは便利です。また、マスターとして使用するスクリーンパーツの作成で便利です。

要素をスクリーンパーツに変換するとき、Indigo Studio はスクリーンパーツ ドキュメントを作成し、背景で開きます。つまり、スクリーン デザイナーを閉じないでスクリーンパーツ インスタンスを作成できます。また、Indigo Studio は新しいスクリーンパーツを ツールボックススクリーンパーツ タブに追加します。プロジェクトのすべてのスクリーンで、このスクリーンパーツは使用可能です。

ツールボックスの Screenparts タブからスクリーンパーツをドラッグまたはダブル クリックすると、スクリーンに追加されます。

新しいスクリーンパーツ デザインを作成するには、プロジェクトのホーム画面で 新規 ボタンを使用し、スクリーンパーツ オプションを選択し、スクリーンパーツに要素を追加できます。その他のオプションの詳細については、「新しいデザインの作成」トピックを参照してください。

(a-2) 2.(オプション) スクリーンパーツのプロパティを編集

スクリーンパーツ デザイナーでスクリーンパーツのサイズ、背景色、および境界線を定義します。

スクリーンパーツをサイズ変更するには、スクリーンと同じようにキャンバスをサイズ変更します。

(a-3) 3.プロジェクトのスクリーンへのナビゲーションを追加

  1. スクリーンパーツ デザイナーに移動します。

    これはスクリーンパーツのソースです。ここの変更はプロジェクトスクリーンのすべてのスクリーンパーツ インスタンスに適用します。

  2. Blog のタイトルを選択し、インタラクションの追加 をクリックします。

  3. [移動] ボタンをクリックします。

  4. [プロジェクトのスクリーン] ボタンをクリックします。

  5. スクリーン ピッカー からブログ ページを選択します。

    その他のタイトルにナビゲーション インタラクションを追加できます。その後、ナビゲーション ヘッダーの準備ができました。

スクリーン デザイナーからスクリーンパーツに変換する要素がナビゲーション インタラクションを含む場合、作成したスクリーンパーツもナビゲーションを含みます。

関連トピック