読者です 読者をやめる 読者になる 読者になる

Swift,Objective-Cプログラミング ~ iOS ~

Objective-C,Swift,Apple Watchなどのプログラミング

【iOS Swift入門 #233】表裏(両面)をもつViewを作る

表裏(両面)をもつViewを作る。

下記動画のようなサンプルを作成する。
表面には「表」と表示されたラベルがあり、
裏面には「裏」と表示されたラベルがあります。

わかりやすくなるように透過を加えて、
逆面が見えるようにしている。

画面をタップすると、表裏が切り替わります。

■サンプル作成
・表と裏の両面をもつUIViewのサブクラスを作成

このクラスのイニシャライザに表に表示するビューと
裏に表示するビューをセットすると両面をもつビューが作成される。

import UIKit

class BothSideView: UIView {
    let frontView: UIView
    let backView: UIView

    init(front: UIView, back: UIView){
        self.frontView = front
        self.backView = back

        super.init(frame: CGRectZero)
    }

    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    /*
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func drawRect(rect: CGRect) {
        // Drawing code
    }
    */

    override func didMoveToSuperview() {
        frontView.frame = bounds
        backView.frame = bounds
    }

    override func layoutSubviews() {

        // 表に表示するビューのセット
        addSubview(frontView)

        // 裏に表示するビューのセット
        addSubview(backView)
        backView.layer.zPosition = -1.0

        // 裏に表示するビューを裏返す
        var transform = CATransform3DIdentity
        transform = CATransform3DRotate(transform, CGFloat(M_PI), 0.0, 1.0, 0.0)
        backView.layer.transform = transform

    }

}

・作成したViewをViewControllerで使う。

import UIKit

class ViewController: UIViewController {
    var bothSideView: BothSideView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        // 表に表示するビュー(UIImageView)
        let frontLabel = UILabel()
        frontLabel.backgroundColor = UIColor.redColor()
        frontLabel.text = "表"
        // 逆面が透けて見えるようにする
        frontLabel.alpha = 0.6

        // 裏に表示するビュー(UILabel)
        let backLabel = UILabel()
        backLabel.backgroundColor = UIColor.purpleColor()
        backLabel.text = "裏"
        // 逆面が透けて見えるようにする
        backLabel.alpha = 0.6
        backLabel.textAlignment = .Left

        // 上記作成した表に表示するビューと裏に表示するビューを合成して、両面のビューを作成
        bothSideView = BothSideView(front: frontLabel, back: backLabel)
        bothSideView.frame = UIScreen.mainScreen().bounds

        view.addSubview(bothSideView)

        let tap = UITapGestureRecognizer(target: self, action: "tapView")
        bothSideView.addGestureRecognizer(tap)
    }

    // 両面のビューを回転する
    func tapView(){
        var transform = bothSideView.layer.sublayerTransform
        transform = CATransform3DRotate(transform, CGFloat(M_PI), 0.0, 1.0, 0.0)

        // bothSideViewの子ビュー(子レイヤー)も裏返す
        bothSideView.layer.sublayerTransform = transform
    }



    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

■実行
実装できたら、デバッグ実行してみる。
上記、動画のようになるはず。

サンプルソースはこちらからダウンロードできます。
SampleBothSideView.zip - Google ドライブ

これに画面回転のアニメーションを加えれば、もっと面白くなる。

 
■おわりに
アニメーションを勉強するなら、英語ではあるが、これだろう。

iOS Core Animation: Advanced Techniques


【参考情報】
iOSアプリ開発未経験の人向け
iOSアプリ開発をはじめたとき最初に買った書籍
【アプリ作成未経験の人向け】
Storyboardを使って画面を作成していく。
手順にしたがって操作していくと、ボタンの作成やWebViewの作成などができる。
アプリって、こんな感じで作るんだというのを体験できる。

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】

・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。

iPhoneアプリ開発塾

iPhoneアプリ開発塾

③中級者、上級者向け

詳解 Swift

詳解 Swift