トピックス プログラム、シミュレーション

インデントで見栄えよく

投稿日:

iPhone用アプリ作成の続きです。

資料はこちら → iPhoneアプリ作成その2

p.1 Xcodeのプロジェクトを立ち上げ、①画面の左上のProject navigatorクリック→ ContentView.swiftクリック→ Auto Editor Optionクリック→ Canvasプレビュー画面を表示させ、②画面上のファイル名の右隣をクリックすると候補のiPhoneの機種名が表示しますので、 選定してクリックするとプレビュー画面にiPhoneの画面が表示されます。③プレビュー画面の下方にある拡大縮小のアイコンで大きさを調整してください。

p.2  ④赤枠部分は削除します。⑤Textの前にカーソルを置き、「command」+「A」でコードの全てを選択し(青くなる)、「control」+「I(アイ)」を押すと、インデントが適正な位置に調整されます。このやり方は覚えておきましょう。

p.3 ⑥Selectableボタンクリックし、⑦プレビューかコードにある「Hellow world」のいずれかクリックします。⑧右上のAttibutes inspectorをクリック、⑨Hellow, Swift!に書き換える

p.4 ⑩ Selectableボタンクリック、⑪FontをLarge Titleにすると文字が大きくなります。⑫カーソルをここに置き、「shift」+「command」+「L」を同時に押すと、ライブラリが表示されます。⑬左上に「button」を書き込み検索して、「Button」をダブルクリックします。⑭プレビュー画面に「Button」が表示され、コードにも追記されます。

p.5 ⑮一行追加→カーソルをここに置き「shift」+「command」+「L」を同時に押すと、ライブラリが表示されます。⑯「vstack」で検索→ vertical Stackをダブルクリックします。⑰Vstackが表示し、「Content」はダブルクリックで消去します。⑱赤枠部のコードを「command」+「H」で切り取って、「Vstack{」の後にペーストします。⑲青い「Button」をダブルクリックで消去し、⑳「切り替えボタン」と書き込みます。ボタン内のテキストが「切り替えボタン」と変わりました。

p.6 ㉑Add Modiferに「background」と入力し、ダブルクリックするとコード内に「background(View)」と表示され、ボタンの背景が㉒デフォルトの「blue」になりました。㉓「background(View)」の「view」を消して「Color.blue」と書き換えます。㉔Add Modiferに「fore」と入力し、「Foreground Color」ダブルクリックするとコードに表示されますが、デフォルトの青色です。㉖blueをWhiteに書き換えます。㉗右欄のPaddingのところで4箇所にチェックを入れると文字間がデフォルト値に広がります。㉘赤枠のコードを追記→ Text内を「outputText」に置き換えます。㉙1行空けます。

p.7 ㉚空いた行に「out」と書き込み、「outputText」をダブルクリックすると、コード内に「outputText」が表示されます。㉛続けて「=“Hi, Swift!”」を追記します。 「VStack」の中にTextとButtonをまとめるようにコードを書くルールになっているそうです。

動作する前までコードを作成しました。さあ動くでしょうか?

-トピックス, プログラム、シミュレーション

Copyright© 進化するガラクタ , 2024 All Rights Reserved Powered by STINGER.