Swiftでビューを操作する #Swift

2014年に行われたWWDCで発表されて以来、話題になっているSwift言語を勉強してみたい！iOSアプリを開発してみたい！という方は増えてきていると思います。なので、Swift言語を使ったiOS開発をしてみたいという人向けに参考になる記事を書いていこうと思います！

今回は、iOSアプリ開発の中でも最も使われる基本的なものの一つViewについて解説していきます。

こちらも参考に

Viewとは？

ユーザーに画像やテキスト、図形などのオブジェクトを見せるために使われる要素です。iOS開発では、UIKitというFrameworkを呼び出して使います。

Viewオブジェクトとして以下の物が提供されています。

UIView
UIImageView
UITextView
UITextField
UILabel
UIButton
etc...

これらのオブジェクトを組み合わせていくことで、画面を構成していきます。

ビューの生成

さて、ビューを表示するためにはビューを生成する必要があります。まず、ビューを生成するためにはビューの色とサイズの設定が必要です。ビューのサイズと背景を設定するためには、CGRectとUIColorクラスを使います。

サイズの生成：CGRectMake(x, y, width, height)
色の生成　　：UIColor.whiteColor()
ビューの生成：UIView(frame: rect)

ビューを追加するコードを書いてみます。ここでは、Playgroundを利用した例を挙げます。

view.playground

// サイズを生成 (x, y, width, height): x,yは表示位置
var rect    = CGRectMake(0, 0, 100, 100)
// 色を生成
var bgColor = UIColor.blueColor()

// 生成したサイズを使って、ビューを生成
var view    = UIView(frame: rect)
// ビューの背景に色を設定
view.backgroundColor = bgColor

この手順で、サイズが100x100で背景色がブルーのビューが生成されます。

次に、画像を表示するビューUIImageViewです。example.pngという画像を表示します。

imageview.playground

// イメージオブジェクトを生成
var _image = UIImage(named: "example.png")

// イメージオブジェクトをイメージビューにセット
var imageView = UIImageView(image: _image)

example.pngを表示したビューが生成されます。ImageViewの場合は、デフォルトでイメージのサイズが適用されるのでサイズ指定をしていません。

エフェクトのつけ方

ビューは基本的に、初期状態では装飾や変形等は特にありません。しかし、パラメーターを設定することで角丸やシャドウなどのエフェクトをつけることができます。ビューにエフェクトを掛ける時の多くは、ビューのlayerにパラメータをセットします。

effectView.playground

// 角丸
view.layer.cornerRadius = 2.0 

// シャドウ
View.layer.shadowColor = .blackColor() /* 影の色 */
View.layer.shadowOffset = CGSizeMake(10.0f,10.0f) /* 影の大きさ */
View.layer.shadowOpacity = 0.5 /* 透明度 */
View.layer.shadowRadius = 10.0 /* 影の距離 */

ビューの上に別のビューを表示する

あるビューAの上に別なビューBを表示するためには、ビューAにビューBを必要があります。ビューを追加するためには次のメソッドを使います。

追加

ビューの追加：viewA.addSubview(viewB)

ビューにはタグをつけることができます。あらかじめビューにタグをつけておくことで、タグを利用して特定のビューを取り出すことができます。

削除

１度追加したビューが必要なくなった時は、ビューを削除することができます。ビューを削除するには、以下のメソッドを利用します。

ビューの削除：viewB.removeFromSuperview()

ビューを削除するには、ビューのオブジェクトを維持しておくか、もしくはタグを使ってビューを取得し削除します。削除する例を挙げてみます。

removeView.playground

// 維持しておいたビューを利用する
viewB.removeFromSuperview()

// タグを利用する
var fetchedViewB = viewA.viewWithTag(tagViewB)
fetchedViewB.removeFromSuperview()

上記のようにビューを削除することができます。