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

Swift : 1st week

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

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

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

f:id:marikooota:20160806113310p:plain

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

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

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

f:id:marikooota:20160806121518p:plain

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という文字に変わります。

f:id:marikooota:20160806184839p:plain

画像を綺麗に配置する

AutoLayout

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

Constraints(制約)を追加する

上下左右の制約を追加できます。
を押した後数値を入力し、Add Constraintsを押すと制約を追加できます。 f:id:marikooota:20160806205900p:plain

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

f:id:marikooota:20160806220501p:plain

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


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

f:id:marikooota:20160809083134p:plain

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

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

f:id:marikooota:20160809083652p:plain


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

f:id:marikooota:20160804210629p:plain

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

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

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

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

f:id:marikooota:20160806221928p:plain

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

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

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

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

f:id:marikooota:20160807015050p:plain

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.実行します

  • 初期表示

f:id:marikooota:20160807022552p:plain

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

f:id:marikooota:20160807022726p:plain

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

f:id:marikooota:20160807022750p:plain

最後にUIGestureRecognizerクラスのまとめ

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

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

<番外編>
StoryboardがAny Anyの場合、iPhone6iPhone6 Plusなど画面サイズが異なる場合でも対応するようなレイアウトにできます。 f:id:marikooota:20160804205429p:plain

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

f:id:marikooota:20160804205010p:plain

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

f:id:marikooota:20160807130818p:plain

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