LoginSignup
4
3

More than 3 years have passed since last update.

XibファイルのButtonを配置してActionさせる方法 addTarget

Last updated at Posted at 2020-11-24

Xibで書いたらViewControllerに紐付けできない!!どうしようと悩んでいて解決したのでメモります。

ファイル構成

青いViewの読み込みしたいファイルがsampleHomeView.Swift sampleHomeView.xib
ViewControllerのファイルがsampleViewController.swift sampleView.Xibです。
この4つファイルで説明します。
スクリーンショット 2020-11-25 1.19.53.png

解説

こちらを参考にXibをViewに読み込ませてみてください!
       ↓↓↓↓↓↓↓↓↓↓
Xibファイルで作ったUIをViewに読み込む方法

読み込ませたらsampleHomeView.xibにUIButtonを置きましょう。
スクリーンショット 2020-11-25 1.33.59.png

Buttonを置いたら、sampleHomeView.swiftに紐付けしていきます!注意⚠️Outletです。
スクリーンショット 2020-11-25 1.36.21.png
その次にsampleViewController.xibで紐付けをします!
TypeをUIViewではなく、読み込ませているsampleHomeViewに設定します。
スクリーンショット 2020-11-25 0.49.15.png

XibファイルからViewControllerに引っ張って紐付けすることができないので違う方法で紐付けます!

sampleHomeViewと書くとプロパティーで先ほど紐付けしたボタンが
sampleViewControllerの中でsampleButtonが呼べるようになります。

for 今回はタップした時に呼ばれます。

@objc funcの中に処理を書きます。

Xibでやる場合はIBActionではないんですね〜!!
コードはこんな感じです。

sampleViewController.swift
import UIKit

class sampleViewController: UIViewController {

    @IBOutlet weak var sampleHomeView: sampleHomeView!
    @IBOutlet weak var sampleView: sampleHomeView!

    override func viewDidLoad() {
        super.viewDidLoad()

        sampleHomeView.sampleButton.addTarget(self, action: #selector(sampleViewController.tapSampleButton(sender:)), for: .touchUpInside)
    }

    @objc func tapSampleButton(sender:Any) {
        sampleView.backgroundColor = UIColor.red
    }

}


ちなみにsampleHomeView.swiftのコードはこんな感じ

sampleHomeView.swift
import UIKit

class sampleHomeView: UIView {

    @IBOutlet weak var sampleButton: UIButton!

    override init(frame: CGRect) {
        super.init(frame: frame)
        loadView()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        loadView()
    }

    private func loadView() {
        let className = String(describing: type(of: self))
        let view: UIView = Bundle.main.loadNibNamed(className, owner: self, options: nil)?.first as? UIView ?? UIView()
        view.frame = bounds
        addSubview(view)
    }
}


今回ではボタンを押すと背景色が赤になるというようになっています。
スクリーンショット 2020-11-25 1.58.11.png
このようにXibファイルでButtonを使ってみました!!
以上、XibファイルのButtonを配置してActionさせる方法でした。

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3