23.08.24 연락처 앱 오로지 코드로 만들어보기
2023. 8. 24. 20:56ㆍ카테고리 없음
우선 코드를 쓰는방법과 view를 만드는 방법에대해서 공부를 해본 후 일일히 기능에대해서 주석을 달았다. 👇
//
// ViewController.swift
// autolayout
//
// Created by t2023-m0088 on 2023/08/24.
//
import UIKit
class ViewController: UIViewController {
// 클로저로 뷰를 설정
var mySecondView : UIView = {
// mySecondView는 UIView형태야 =
let view = UIView()
// view를 UIView 라고 정의하자!
view.backgroundColor = .systemMint
view.layer.cornerRadius = 16
view.translatesAutoresizingMaskIntoConstraints = false
view.clipsToBounds = true
return view
// 위에서 설정해준 도형모양의 값을 리턴으로 출력하자! 그럼 아래에서 mySecondView를 사용하면 이 설정값들이 포함된 도형이 나오겠지?
}()
var myThirdView : UIView = {
let view = UIView()
view.backgroundColor = .systemBrown
view.layer.cornerRadius = 16
view.translatesAutoresizingMaskIntoConstraints = false
view.clipsToBounds = true
return view
}()
var myCircleView : MyCircleView = {
let circleView = MyCircleView()
circleView.backgroundColor = .systemGray
circleView.translatesAutoresizingMaskIntoConstraints = false
return circleView
}()
override func viewDidLoad() {
super.viewDidLoad()
let myFirstView = UIView()
myFirstView.translatesAutoresizingMaskIntoConstraints = false
// 오토 리사이징 할거냐 = false *코드로 레이아웃 짤땐 무조건 해야함
myFirstView.backgroundColor = .systemPink
self.view.addSubview(myFirstView)
// myFirstView = UIView 이므로 , 10번째줄에있는 뷰컨트롤러 자신 ( self ) 에게 하위 view ( 분홍색 사각형 ) 을 addSubview로 추가해줌.
myFirstView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
// 추가된UIView의 X축 앵커를 제단하겠다 (무슨기준?) self(ViewController)가 가진 view의 센터를 기준으로, isActive(활성화) 한다.= true
myFirstView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 80).isActive = true
// 추가된UIView의 위쪽 마진을 제단하겠다 (무슨기준?) self(ViewController)가 가진 view의 천장을 기준으로 , 200만큼(constant) , isActive(활성화) 한다. = true
myFirstView.widthAnchor.constraint(equalToConstant: 200).isActive = true
// UIView의 가로길이를 제단할게 크기는 : 300 isActive(활성화) 할게
myFirstView.heightAnchor.constraint(equalToConstant: 200).isActive = true
// UIView의 세로길이를 제단할게 크기는 : 300 isActive(활성화) 할게
myFirstView.layer.cornerRadius = 30
// UIView의 벽면 둥글기는 = 30으로 할게.
self.view.addSubview(mySecondView)
self.view.addSubview(myThirdView)
self.view.addSubview(myCircleView)
// 최상위 view에다가 서브view인 (...UIView)를 삽입할게.
NSLayoutConstraint.activate([
// 위 코드로 아래의 UIConstraint 설정들을 한번에 모아서 isactive를 빼고 간단하게 표현 할 수 있어⬆️
myThirdView.widthAnchor.constraint(equalToConstant: 100),
myThirdView.heightAnchor.constraint(equalToConstant: 100),
myThirdView.leadingAnchor.constraint(equalTo: myFirstView.leadingAnchor, constant: 50),
myThirdView.topAnchor.constraint(equalTo: myFirstView.bottomAnchor, constant: 150)
])
myCircleView.widthAnchor.constraint(equalTo: myThirdView.widthAnchor, multiplier: 1.5).isActive = true
myCircleView.heightAnchor.constraint(equalTo: myThirdView.heightAnchor, multiplier: 1.5).isActive = true
myCircleView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
myCircleView.topAnchor.constraint(equalTo: myThirdView.bottomAnchor, constant: 20).isActive = true
mySecondView.widthAnchor.constraint(equalToConstant: 100).isActive = true
mySecondView.heightAnchor.constraint(equalToConstant: 100).isActive = true
mySecondView.leadingAnchor.constraint(equalTo: myFirstView.leadingAnchor, constant: 50).isActive = true
//위에서 값을 준 함수( 도형 )의 왼쪽 마진을 제단할게 (무슨기준?) 아까만든 도형의 왼쪽벽을 기준으로, 떨어뜨려 : 50만큼 isActive(활성화) 할게
mySecondView.topAnchor.constraint(equalTo: myFirstView.bottomAnchor, constant: 20).isActive = true
//위에서 값을 준 함수( 도형 )의 위쪽 마진을 제단할게 (무슨기준?) 아까만든 도형의 아래쪽 벽을 기준으로, 떨어뜨려 : 20만큼 isActive(활성화) 할게
}
}
//👇 오른쪽에 프리뷰로써 작업화면 실시간 띄워놓는 방법. ( SWiFTUI 를 이용함 )
#if DEBUG
import SwiftUI
struct ViewControllerRepresentable: UIViewControllerRepresentable{
// update
func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
}
@available(iOS 13.0, *)
func makeUIViewController(context: Context) -> UIViewController {
ViewController()
}
// makeui
}
struct ViewController_Previews: PreviewProvider{
static var previews: some View{
ViewControllerRepresentable()
.previewDisplayName("아이폰 14")
}
}
#endif
그다음 공부한 내용을 참고해가며 연락처의 기본 UI 코드를 작성하였다.👇
//
// ViewController.swift
// PhoneNumber
//
// Created by t2023-m0088 on 2023/08/23.
//
import UIKit
class ViewController: UIViewController {
var header : UILabel = {
let view = UILabel()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
var search : UISearchBar = {
let view = UISearchBar()
view.backgroundColor = .systemGray
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
var myCardImage : UIImageView = {
let view = UIImageView()
view.layer.cornerRadius = 40
view.translatesAutoresizingMaskIntoConstraints = false
view.image = UIImage(named: "christ")
view.clipsToBounds = true
return view
}()
var myCard : UILabel = {
let view = UILabel()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(header)
self.view.addSubview(search)
self.view.addSubview(myCardImage)
self.view.addSubview(myCard)
self.view.backgroundColor = .white
header.heightAnchor.constraint(equalToConstant: 80).isActive = true
header.widthAnchor.constraint(equalToConstant: 350).isActive = true
header.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
header.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 80).isActive = true
header.text = "연락처"
header.textColor = .darkGray
header.font = UIFont.systemFont(ofSize: 30, weight: .bold)
search.heightAnchor.constraint(equalToConstant: 60).isActive = true
search.widthAnchor.constraint(equalToConstant: 350).isActive = true
search.topAnchor.constraint(equalTo: header.bottomAnchor, constant: 0).isActive = true
search.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
search.text = "검색"
myCardImage.heightAnchor.constraint(equalToConstant: 80).isActive = true
myCardImage.widthAnchor.constraint(equalToConstant: 80).isActive = true
myCardImage.topAnchor.constraint(equalTo: search.bottomAnchor, constant: 10).isActive = true
myCardImage.leadingAnchor.constraint(equalTo: header.leadingAnchor).isActive = true
myCardImage.contentMode = .scaleAspectFill
myCard.heightAnchor.constraint(equalToConstant: 100).isActive = true
myCard.widthAnchor.constraint(equalToConstant: 200).isActive = true
myCard.text = "내 카드"
myCard.textColor = .darkGray
myCard.leftAnchor.constraint(equalTo: myCardImage.rightAnchor, constant: 15).isActive = true
myCard.topAnchor.constraint(equalTo: search.bottomAnchor, constant: 0).isActive = true
myCard.font = UIFont.systemFont(ofSize: 16)
// let sectionList = ["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"]
//
// func sectionIndexTitles(for tableView: UITableView) -> [String]? {
// return sectionList
// }
//
}
}
#if DEBUG
import SwiftUI
struct ViewControllerRepresentable: UIViewControllerRepresentable{
// update
func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
}
@available(iOS 13.0, *)
func makeUIViewController(context: Context) -> UIViewController {
ViewController()
}
// makeui
}
struct ViewController_Previews: PreviewProvider{
static var previews: some View{
ViewControllerRepresentable()
.previewDisplayName("아이폰 14")
}
}
#endif
역시나 스토리보드보다 코드로구현하는것이 훨씬 복잡하고 시간도 오래걸렸다 !...
그러나 코드를 잘 써서 나쁠게없기때문에 코드로 나머지부분도 구현해보려고한다.