登録画面のようなフルスクリーンではないViewの設置方法について紹介します！！
[Step1]NavigationControllerを設置する
カーソルをViewController上部の四角枠一番左の丸いマークの部分に合わせてツールバー（上に表示のある部分（Xcode,File,Edit,View,））のEditor→EmedIn→NavigationControllerを選択するとNavigationControllerが表示される
[Step2]ViewControllerにボタンを配置する
右上「+」のツールボックス中からButtonを選択してNavigationBarに設置をする
こんな感じでできてるはず！！
[Step3]RegistViewを登録しよう
Buttonのときと同様に「+」の中からViewを選択してFirestResponderとExsitの間にセットする
するとViewControllerの上部に新しいViewが作成できたと思う
大きさを合わせる場合にはサイドバーを開いてモノサシのアイコンをタップしWidthとHeightを合わせることで調節ができる
※このときにRegistViewのBackgroundColorをうす緑に設定している
こんな感じになるはず！！
[Step4]ViewとButtonを紐付けしよう
ViewController.swiftとMain.soryboardを一つの画面で開く
カーソルをButtonに合わせた状態でControlキーを押しながらコードの上に落とす名前はshowRegistViewとしてActionで設定をする
同様に付け加えたRegistViewをコードと紐付ける
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)
上のようなコードを書くと追加できる！！
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)を設置します。
今回はOutletとActionの両方をセットすることがポイントです！！
※Buttonには制約（RegistView内で位置を決定させる）を持たせないと表示されない！！
Viewを消すためには以下のようなコードを書くと消せます！！
ついでにボタンを丸角にしています！！
//消したいView.removeFromSuperview()
registView.removeFromSuperview()
上のようなコードを書くと消去できる！！
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()
}
}
こんな感じに表示できていれば完成！！