未経験がswiftでiOSアプリ開発に挑戦する「UIパーツの配置」

Kaichiと申します。

未経験からxcode・swiftでiOSアプリ開発の学習をしています。

学習の記録をアウトプットする記事になります。

今回は「UIパーツの配置」についてアウトプットしていきます。

UIパーツの配置

1. UIパーツを画面ビューに配置する。

xcodeの画面右上にある＋ボタンをクリック

すると下のような表示が出てきます。

これが各UIパーツの一覧です。

この中から使いたいUIパーツをcontroloを押しながらドラッグ＆ドロップでビューに配置します。

（画像はLabelというUIパーツとButtonというUIパーツを配置）

 

まだ学習始めたてでそんなにUIパーツを使っていませんが、基本的なものをいくつかピックアップしました。

■Label

テキストを表示する。サイズや文字色、背景色など設定できる。

■Button

文字通りボタン。タップされた時に何かしらのアクションを起こす。 

■TextField

テキストボックス。タップすると文字を入力できる。

■ImageView

画像を配置できる。ImageViewというUIパーツを配置してそのImageViewに表示する画像を選択する。

もちろんこれら以外にまだまだたくさんありますが、学習初めて最初に触れたのはこれらでした。

2. ソースコードを表示

まずstoryboardと並列してソースコードを表示します。

①の線が何本か引いてあるアイコンをクリックすると下に表示が出てきますので、②のAssistantをクリックします。

そうすると、右側（もしくは下側）にソースコードが表示されます。

これはViewController、つまり先ほどLabelやButtonを配置した画面の表示や動作を管理するコードになります。 ソースコードを開くと、すでに下のようなコードが記述されています。  

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view.

    }

}

順々に解説します。

import UIKit

については、UIKitを使いますよと宣言しているコードになります。 UIKitとはまさに先ほど貼り付けたLabelやButtonなどのUIパーツのことで、Appleがすでに用意しているUIパーツのライブラリです。このUIKitをimportすることでUIパーツが機能するようになります。

class ViewController: UIViewController

こちらはUIViewControllerを継承したViewControllerというクラスの宣言です。 UIViewControllerというのもUIパーツの一つです。Appleが用意しているViewController用のライブラリの機能が設定されています。 これによりViewControllerはUIViewControllerを継承、つまりUIViewControllerの機能が付与されることになります。

override func viewDidLoad() {

        super.viewDidLoad()

}

こちらは画面が表示された時に呼び出される関数になります。viewDidLoadというのが画面が表示されたという意味になります。 このViewController上のビューが表示されたときに動作する処理、つまり初期状態で動作する処理をこの中に書いていきます。

基本的にこれらのコードをベースに色々と処理を書いていきます。

3. UIパーツをコード化

先ほど配置したUIパーツをクリックし、controlを押しながらドラッグ＆ドロップでソースコード上まで引っ張ります。 ドラッグ＆ドロップすると下のような表示が出ます。

このName欄にUIパーツの名前を入れます。この名前はUIパーツの変数名としてソースコード上で扱っていきます。

名前を入力して右下のConnectを押すとソースコード上に下のようなコードが出現します。

@IBOutlet weak var label: UILabel!

こちらはUIパーツのLabelを「label」という名前でコード化したものになります。 @IBOutletとは簡単にいうと、先ほど配置したLabelというオブジェクトにプログラムからアクセスするという意味らしいです。（すいません深く調べてません...） こちらのコードを簡単に要約するとlabelという変数はUIKitの一つであるUILabelの機能を持っていて画面上のLabelに紐づいているということになります。

これにより、labelという変数で画面上に配置したUILabelを扱うことができます。UILabelには textなど様々な要素を持っていて、label内のtextに文字列を代入することで画面に表示されているUILabelの文字列を自由に設定できたりします。

またButtonを同じようにドラッグ＆ドロップすると

  @IBAction func button(_ sender: Any) {
    }

というコードが出現します。 こちらは頭に@IBActionとついておりますが、@IBOutletと違い何かしらアクションするUIパーツにつけられます。 Buttonはタップすることで何かしらのアクションを起こす要素になりますので@IBActionとなります。 またfunc buttonと関数宣言をしており、buttonが押された時の処理をその中に書いていくことになります。

このようにして、UIパーツをコードに落とし込むことでUIパーツにユーザーが何かアクションをした時の処理を設定していくことができます。

だいぶ長くなってしまいました。 今回はここまでにします。