Swiftでアプリの画面を作ろう！ ～Objecive-Cとの比較で学ぶ

Objecive-CユーザーのためのSwift入門 第4回

　本連載では、Objective-Cの基本的なプログラムが出来る読者を対象に、Swiftを使ってアプリを開発する際の基本的な事柄を解説します。Objective-CもSwiftもC言語を母体としたプログラム言語なので両者に共通する概念は非常に多いです。Objective-CとSwiftとの最低限度の違いを踏まえつつ、Swiftでのアプリ開発にシフトして行けるような内容を、サンプルを交えながら解説します。今回は、アプリの画面を作成する方法について説明します。

はじめに

　前回までにSwiftの基本的な文法とクラスの使い方について説明しました。連載第4回では、実際にアプリの画面を作成する方法について説明します。

　対象読者をObjective-Cが分かる方としている関係上、Objective-C自体の言語仕様やXcodeの使い方については解説を割愛する場合があることをご了承ください。同様にSwift自体の説明も必ずしも十分でない場合があります。そのような場合は末尾の参考文献等を参照してください。

対象読者

　本記事は、次の方を対象にしています。

• Objective-Cの基本的なプログラムが出来る方
• Xcodeを使える方

画面の構成

　iOSアプリの開発は、簡単に言うと画面の上に画像やテキストなどのコンテンツを配置して進めます。画面の上に配置して表示するという基幹のクラスはUIViewクラスです。そして画面上に配置されるコンテンツは全てUIViewクラスの派生クラスです。

ビューの位置関係

　iOSアプリでは、画面の左上の頂点を(0, 0)として画面内の位置関係を考えます。画面上に配置するコンテンツは、次の3つの構造体で位置とサイズを管理します。

画面内の位置とサイズを管理する構造体

名前	概要	生成する関数
GGPoint	画面内の位置を管理する構造体	CGPointMake(横位置, 縦位置)
CGSize	サイズを管理する構造体	CGSizeMake(横幅, 縦幅)
CGRect	位置とサイズの両方を管理する構造体	CGRectMake(横位置, 縦位置, 横幅, 縦幅)

　3つの構造体の関係は次の図の通りです。

画面上の位置関係を示す構造体の関係

　具体的な利用の例については、次節のサンプルで確認できます。また、画面上の位置関係も画面全体から見る場合とローカルの位置から見る場合の2通りで扱えるプロパティが用意されています。

位置関係を扱うプロパティ

名前	概要
frame	親となるビューから見た際の座標系の位置とサイズ
bounds	自分自身のローカル座標系の位置とサイズ

位置関係を扱うプロパティ

　今回のサンプルで利用するクラス／ファイルは次の通りです。

サンプルで利用するSwiftのファイル

名前	役割	サンプル内の該当するファイル
AppDelegate	アプリを管理する最上位のクラス	AppDelegate.swift
ビューコントローラー	画面を管理するクラス	ViewController.swift
xlib	InterfaceBuiderで生成した画面のUI	SampleViewController.xib