전체 화면이 아닌 화면 만들기 Part1 ~ 화면 설치편 ~

12720 단어 Swift5UIView
등록 화면과 같은 전체 화면이 아닌 View 설치 방법에 대해 소개합니다! !

[Step1]NavigationController 설치



커서를 ViewController 상단의 사각형 프레임 가장 왼쪽의 둥근 마크 부분에 맞추어 툴바(위에 표시가 있는 부분(Xcode,File,Edit,View,))의 Editor→EmedIn→NavigationController를 선택하면 NavigationController가 표시됩니다 하다

[Step2]ViewController에 버튼 배치



오른쪽 상단 "+"의 도구 상자에서 Button을 선택하여 NavigationBar에 설치

이런 느낌으로 되어 있을 것! !


[Step3] RegistView를 등록하자



버튼과 마찬가지로 "+"에서 View를 선택하여 FirestResponder와 Exsit 사이에 설정
그러면 ViewController 상단에 새 View를 만들 수 있다고 생각합니다.
크기를 맞추는 경우에는 사이드바를 열고 모노사시의 아이콘을 탭하고 Width와 Height를 맞추는 것으로 조절할 수 있다
※이 때 RegistView의 BackgroundColor를 황색으로 설정하고 있습니다.

이런 느낌이 될 것! !


[Step4] View와 Button을 연결하자



ViewController.swift와 Main.soryboard를 한 화면에서 열기
커서를 Button에 맞춘 상태에서 Control 키를 누르면서 코드 위에 떨어뜨리는 이름은 showRegistView로 Action으로 설정을 한다.
마찬가지로 추가한 RegistView를 코드와 연결

ViewController.swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBOutlet var registView: UIView!
    @IBAction func showRegistView(_ sender: Any) {
    }

}

다음과 같은 코드를 추가합니다! ! (코멘트 아웃하고 있는 곳이 추가한 부분)
주로 View와 버튼을 설정하고 있습니다.
//    追加したい場所.addSubview(追加したいもの)
      self.view.addSubview(registView)

위와 같은 코드를 작성하면 추가 할 수 있습니다! !

ViewController.swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        setRegistVIew()
    }

//    Viewを追加するメソッドsetRegistView
    func setRegistVIew(){
//        全画面の部分から横と縦の大きさを持ってくる
        let screenFrameX = self.view.frame.width/2
        let screenFrameY = self.view.frame.width/2
//        RegistViewの大きさを設定する(今回は縦横の比率を4:3に設定している)
        let viewX = 300
        let viewY = viewX*4/3
//        RegistViewの位置と大きさをセットする CGRect.init(x:X軸に対して表示するポジション, y: Y軸に対して表示するポジション, width: 横の大きさ, height: 縦の大きさ)
        registView.frame = CGRect.init(x: Int(screenFrameX)-viewX/2, y: Int(screenFrameY), width: viewX, height: viewY)

    }

    @IBOutlet var registView: UIView!
    @IBAction func showRegistView(_ sender: Any) {
//        Viewを追加する
        self.view.addSubview(registView)
    }

}


이런 식으로 Simulation 할 수 있으면 완성! !

적용하자.



표시했다면 RegistView를 지우고 싶네요! !
지우는 방법은 이런 느낌으로 할 수 있습니다! ! RegistView 안에 Button(이름은 saveButton)을 설치합니다.
이번에는 아웃렛과 액션을 모두 설정하는 것이 포인트입니다! !
※Button에는 제약(RegistView내에서 위치를 결정시킨다)를 가지지 않으면 표시되지 않는다! !

View를 지우려면 아래와 같은 코드를 쓰면 지울 수 있습니다! !
드디어 버튼을 둥근 모서리로하고 있습니다! !
//消したいView.removeFromSuperview()
        registView.removeFromSuperview()

위와 같은 코드를 작성하면 지울 수 있습니다! !

ViewController.swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        setRegistVIew()
        setSaveButton()
    }

    func setRegistVIew(){
        let screenFrameX = self.view.frame.width/2
        let screenFrameY = self.view.frame.width/2
        let viewX = 300
        let viewY = viewX*4/3
        registView.frame = CGRect.init(x: Int(screenFrameX)-viewX/2, y: Int(screenFrameY), width: viewX, height: viewY)
    }

    func setSaveButton(){
        saveButton.layer.cornerRadius = 10
        saveButton.tintColor = .white
        saveButton.backgroundColor = .red
    }

    @IBOutlet var registView: UIView!
//OutletでUIButtonを追加
    @IBOutlet weak var saveButton: UIButton!

    @IBAction func showRegistView(_ sender: Any) {
        self.view.addSubview(registView)
    }
//ActionでUIButtonを追加
    @IBAction func saveButton(_ sender: Any) {
//Viewを消す
        registView.removeFromSuperview()
    }


}


이런 느낌으로 표시되어 있으면 완성! !

좋은 웹페이지 즐겨찾기