App:Library:Squareline:docs:docs:tutorials:new app

Tutorial 2 - Create a new application

原文	訳
With this tutorial, you can learn how to create a new project, a screen or a widget.	このチュートリアルでは、新しいプロジェクト、画面、またはウィジェットを作成する方法を学習できます。

Creating a new project

Having the software launched, a Launcher window will pop up. You should choose Create menu. Here you can find the Simulator and the purchased Boards, as well. By choosing a **Board**, the program will automatically set the resolution and the color depth for the project and it will also add the drivers needed. By choosing Simulator, you can set both the resolution and the color depth. The maximum resolution of your project can be 2048 x 2048 pixels. The default resolution setting is 280x320 pixels. Having set everything, you should select the name and the path of your project, then you have nothing else to do but to click on CREATE NEW PROJECT button.

ソフトウェアを起動すると、ランチャー ウィンドウがポップアップします。 [メニューの作成] を選択する必要があります。 ここでは、シミュレーターと購入したボードも見つけることができます。 **ボード**を選択すると、プログラムはプロジェクトの解像度と色深度を自動的に設定し、必要なドライバーも追加します。 シミュレーターを選択すると、解像度と色深度の両方を設定できます。 プロジェクトの最大解像度は 2048 x 2048 ピクセルです。 デフォルトの解像度設定は 280x320 ピクセルです。 すべてを設定したら、プロジェクトの名前とパスを選択する必要があります。その後は、CREATE NEW PROJECT ボタンをクリックする以外に何もする必要はありません。

Create a button

After creating a project, a Screen will be automatically added. On the Widget Panel, please click on the Button widget or you can also drag it on the Screen. Its position should be set on the following values: X=0, Y=80. Then you can add a Label widget to the Screen. Its position should be set on the following values: X=0, Y=0. Click on STYLE SETTINS / STYLE (MAIN) / Text / Text Align on the Inspector Panel and set it to center. By doing this, the text will be aligned to center inside the text box. Click on Text align section and choose Montserrat 16 font. The height of the text box should be set to 20 px in the Transform section. Change the text in the Text section to Next. Then, click and hold the left mouse button on Label in the Hierarchy Panel and drag it on the list to Button until the item on the list moves to the right. It means the selected item will be under Button in the hierarchy. Now you can release the left mouse button. By doing so, the text aligns automatically to the center of the button, copying its style. That's why the color of the text changes to white.

プロジェクトを作成すると、画面が自動的に追加されます。 ウィジェット パネルで、ボタン ウィジェットをクリックするか、画面にドラッグすることもできます。その位置は次の値に設定する必要があります: X=0、Y=80。 次に、Label ウィジェットを Screen に追加できます。その位置は次の値に設定する必要があります: X=0、Y=0。 インスペクタ パネルの STYLE SETTINS / STYLE (MAIN) / Text / Text Align をクリックし、中央に設定します。これにより、テキストはテキスト ボックスの中央に配置されます。 Text align セクションをクリックし、Montserrat 16 フォントを選択します。 テキスト ボックスの高さは、[変換] セクションで 20 ピクセルに設定する必要があります。 [テキスト] セクションのテキストを [次へ] に変更します。 次に、階層パネルのラベル上でマウスの左ボタンをクリックして押したまま、リスト上のアイテムが右に移動するまで、リスト上でボタンにドラッグします。これは、選択されたアイテムが階層内のボタンの下にあることを意味します。これで、マウスの左ボタンを離すことができます。これにより、テキストは自動的にボタンの中央に配置され、スタイルがコピーされます。そのため、テキストの色が白に変わります。

Add an image asset

Choose the Asset Panel then click on the ADD FILE INTO ASSETS button. Add the downloaded image to the appearing file browser to make it show in the Asset Panel. Drag the image to the screen from the Asset Panel. Since most recent widgets always go to the top, drag the image above the button. Now you can see the previously created button.

アセット パネルを選択し、[ADD FILE INTO ASSETS] ボタンをクリックします。 ダウンロードした画像を表示されるファイル ブラウザーに追加して、アセット パネルに表示します。 画像をアセット パネルから画面にドラッグします。 最新のウィジェットは常に一番上に表示されるため、画像をボタンの上にドラッグします。 これで、以前に作成したボタンが表示されます。

Add new screen

Click on the Screen widget on Widget Panel to add a new screen to the project. It shows up next to the previous screen with a green color on the Hierarchy Panel signalling that we are editing the new screen. Add a new image just like you did it before. Select the button on the first screen on the Hierarchy Panel. Having selected it, three icons appear in the list. Click on the last one which is for duplicating. Drag the new button under the image added to the other screen. Now the button appears on the new screen. Change the Label of the button to Back. Select the button and change Align from Center to Top Left. Then change its position to X=20, Y=20. Now the button on the second screen appears in the top left corner.

ウィジェット パネルの画面ウィジェットをクリックして、新しい画面をプロジェクトに追加します。 前の画面の横に表示され、階層パネルに緑色で表示され、新しい画面を編集していることを示します。 以前と同じように、新しい画像を追加します。 階層パネルの最初の画面で ボタンを選択します。 選択すると、3 つのアイコンがリストに表示されます。 複製する最後のものをクリックします。 別の画面に追加された画像の下に新しいボタンをドラッグします。 これで、ボタンが新しい画面に表示されます。 ボタンのラベルを Back に変更します。 ボタンを選択し、[配置] を [中央] から [左上] に変更します。 次に、その位置を X=20、Y=20 に変更します。 これで、2 番目の画面のボタンが左上隅に表示されます。

戻る : Previous