Swift : 1st week

プロジェクトを作ってみる

Swift学習始めました。
よしやろうと思ったものの、何から手をつけたらいいかが全くわからなかったのでとりあえずプロジェクトを作ってみました

File > New > Project > Single View Application を選択する

ボタンをタップするとラベルの文字が変わるアプリ

1.Story boardにラベルとボタンを配置します。

2.右下のリストから、ButtonとLabelをドラッッグ＆ドロップします。

3.ViewController.swiftにはこのように書く。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    @IBAction func tap(sender: AnyObject) {
        self.label.text = "test"
    }
}

4.storyboardのLabelと@IBOutletを紐付けます。

5.実行ボタンを押して実行します。

6.ButtonをタップするとLabelの文字がtestという文字に変わります。

画像を綺麗に配置する

AutoLayout

iPhoneにはiPhone5やiPhone6、iPhone6 Plusなど、それぞれの端末によって画面のサイズが異なります。 例えば、iPhone6を基準にレイアウトを組んでいるとして、右から○○px、左から○○pxのように指定すると、iPhone6では綺麗に表示されていたのにiPhone Plusでは何だか右よりだなぁということが起きてしまいます。 AutoLayoutでは「制約(Constraint)」という「位置」や「サイズ」に関するルールを設定することで、異なる大きさのiPhone上でも自動的にルールに合ったレイアウトに調整してくれるのような指定をするので、iPhone6やiPhone6 Plusなど、画面サイズが異なる端末でも最適化されたレイアウトにすることを実現できます。

Constraints(制約)を追加する

上下左右の制約を追加できます。
エを押した後数値を入力し、Add Constraintsを押すと制約を追加できます。

例えば、下ピッタリ(余白なし)に配置したい場合は、

このように入力してAdd Constraintsを押します。

---

<補足>
左右をピッタリ(余白なし)に合わせたい場合、下ピッタリの例のように左右に0を入力してAdd Constraintsをしてもこのように意図しない余白ができてしまいます。

この問題を解決するには、Add Constraintsをするときに、「Constraint to margins」のチェックを外します。

すると綺麗な左右余白なしを実現できます。

---

真ん中に配置したい場合は、

Horizontally in ContainerまたはVertically in Containerを指定します。

• Horizontally in Container・・・・ x軸の真ん中に合わせる

• Vertically in Container・・・・・ y軸の真ん中に合わせる

制約を削除したい場合は、

Size inspectorから削除したい制約を選択してDeleteキーを押します。

スクロールして画像を選べるアプリ

むらちゃんと7ちゃんとマロくんの画像をスクロールバーに表示させて、選択したキャラクターに合わせて画面上部に配置した画像が変わるアプリを作ります。

1.むらちゃんと7ちゃんとマロくんの画像を読み込み、Image ViewとScroll ViewをStory board上に配置します。(初期表示で7ちゃんを指定しています)

2.Image ViewとScroll ViewにAuto Layoutを設定します。
今回は画像の下にスクロールバーを表示させるように設定しました。

3.ViewControllerにはこのように書きました。

class ViewController: UIViewController {

    // StoryBoardのScrollViewと紐付ける
    @IBOutlet weak var scrollview: UIScrollView!
　// StoryBoardのImageViewと紐付ける
    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let mura = UIImage(named:"murachan.png");
        let nana = UIImage(named:"7.png");
        let maro = UIImage(named:"maro.png");
        
        let muraImageView = UIImageView(image:mura)
        let nanaImageView = UIImageView(image:nana)
        let maroImageView = UIImageView(image:maro)
        
        // UIScrollViewの1ページ分のサイズ(x,y,width,height)
        scrollview.frame = CGRectMake(0, 0, 200, 300)
        
        // scrollviewの全体のサイズ(x,y)
        scrollview.contentSize = CGSizeMake(240*3.8,0)
        
        // UIImageViewのサイズと位置を決める(x,y,width,height)
        muraImageView.frame = CGRectMake(100, 0, 175, 240)
        nanaImageView.frame = CGRectMake(340, 0, 175, 240)
        maroImageView.frame = CGRectMake(580, 0, 175, 240)

        // ImageViewにアクションをつけれるようにする
        muraImageView.userInteractionEnabled = true
        nanaImageView.userInteractionEnabled = true
        maroImageView.userInteractionEnabled = true
        
        // UIGestureRecognizerクラスを使うとアクションをつけることができる
        // 関数を呼び出す
        let tapRecognizerMura = UITapGestureRecognizer(target: self, action: #selector(ViewController.imageTapMura))
        muraImageView.addGestureRecognizer(tapRecognizerMura)
        let tapRecognizerNana = UITapGestureRecognizer(target: self, action: #selector(ViewController.imageTapNana))
        nanaImageView.addGestureRecognizer(tapRecognizerNana)
        let tapRecognizerMaro = UITapGestureRecognizer(target: self, action: #selector(ViewController.imageTapMaro))
        maroImageView.addGestureRecognizer(tapRecognizerMaro)
        
        // UIImageViewをScrollViewに追加
        scrollview.addSubview(muraImageView)
        scrollview.addSubview(nanaImageView)
        scrollview.addSubview(maroImageView)
        
        // 1ページ単位でスクロールさせる
        scrollview.pagingEnabled = true
    }
    
    // 画像を設定し直す関数
    func imageTapMura() {
        let mura = UIImage(named:"murachan.png");
        imageView.image = mura
    }
    func imageTapNana() {
        let nana = UIImage(named:"7.png");
        imageView.image = nana
    }
    func imageTapMaro() {
        let maro = UIImage(named:"maro.png");
        imageView.image = maro
    }


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


}

※とりあえず画像が変わるようにするところまでをやりたかったので、コードの可読性は低いです。

UIGestureRecognizerクラスを使うとiPhoneの特殊なアクションを検知することができます。
今回はタップしたら画像が変わるアプリを作りたかったので、
UITapGestureRecognizerを使いました。
タップすると関数が呼ばれて、画像が差し替わります。

4.実行します

• 初期表示

• むらちゃんをタップした時

• マロくんをタップした時

最後にUIGestureRecognizerクラスのまとめ

クラス名	説明
UITapGestureRecognizer	タップを設定できる。 タップ数 ー numberOfTapsRequired 指の本数 ー numberOfTouchesRequired を指定できる。
UILongPressGestureRecognizer	長押しを設定できる。 認識されまるの時間 ー minimumPressDuration を指定できる。
UISwipeGestureRecognizer	スワイプを設定できる。 スワイプの方向 ー direction 指の本数 ー numberOfTouchesRequired
UIPanGestureRecognizer	ドラッグを設定できる。 移動する距離 ー translationInView 移動の速さ ー velocityInView を指定できる。
UIRotateGestureRecognizer	回転操作を設定できる。 回転角度 ー roration 速さ ー velocity を指定できる。
UIPinchGestureRecognizer	ピンチ操作※を設定できる。 倍率 ー scale 早さ ー velocity を指定できる。

※ ピンチ操作・・・マルチタッチ操作のうち、2本の指で画面をつまむように動かす操作のこと

<番外編>
StoryboardがAny Anyの場合、iPhone6やiPhone6 Plusなど画面サイズが異なる場合でも対応するようなレイアウトにできます。

もし、実際のiPhone6やiPhone6 Plusなどの倍率でプレビューしたい場合の手順はこんな感じです。
Show the assistant editor を選択する。
Automatic > Previewに変更する。

iPhone 4inchでのプレビュー画面

参考サイト
GestureRecognizerを使ってタッチ操作を検知 : てるてる坊主
[iOS8] SwiftでUIScrollViewを利用して画像をスライド・スクロールさせる - Qiita
今度こそ克服するAutoLayoutの使い方・基礎編～SwiftからはじめるiOSアプリ開発:その5【初心者向けアプリ開発3分tips】 - エンジニアtype