Swift codebase UI 스크롤뷰가 있는 화면 하단에 버튼 고정하기

하단의 예매하기 버튼은 스크롤시 움직이면 안되고 항상 바닥에 있어야 해요

그걸 고려했다면 처음에 버튼부터 만들었을 것 같은데 저는 스크롤뷰부터 만들어서 이미짠 코드를 수정해야했습니다

let bottomView = UIView()
let buyTicketButton = UIButton()

 

버튼이 꽉차게 있는게 아니라서 뷰를 밑에 깔고 그 위에 버튼을 그려볼게요

생성 먼저!

 

view.addSubview(bottomView)
bottomView.addSubview(buyTicketButton)
view.addSubview(scrollView)

addSubvuew 를 넣을 때는 위에서부터 순서대로 작성하는데요

포토샵의 레이어 처럼 하나씩 쌓아 올린다? 라고 보면 될 것 같아요

 

우선 버튼 밑에 깔리는 바탕뷰를 view 에다가 넣고 버튼은 바탕뷰 위에 올려줍니다

스크롤뷰도 view 에다가 넣어줘요!

 

bottomView.snp.makeConstraints { make in
    make.leading.trailing.equalToSuperview()
    make.bottom.equalTo(view)
    make.height.equalTo(100)
}

buyTicketButton.snp.makeConstraints { make in
    make.centerY.centerX.equalToSuperview()
    make.leading.equalToSuperview().offset(16)
    make.trailing.equalToSuperview().offset(-16)
    make.height.equalTo(70)
}

scrollView.snp.makeConstraints { make in
    make.top.left.right.equalTo(view)
    make.bottom.equalTo(bottomView.snp.top)
}

오토레이아웃 잡는게 관건인데

먼저 버튼 밑에 깔리는 바닥뷰를 잡아줍니다

leading, trailing, bottom 를 view 끝까지 잡아주고 높이만 설정해 줍니다

 

그리고 그 위에 버튼을 올려줍니다

바닥뷰의 정가운데 오도록 잡아줬고 양 옆은 16으로 잡아줬어요

높이는 70!

 

그리고!!!!!!

버튼의 바닥뷰를 잡아 준거 위쪽에 스크롤뷰를 넣어줍니다 

top 이랑 양옆은 view 에 잡아주고 바닥을 버튼의 바닥뷰의 top 에 잡아줍니다

 

 

bottomView.backgroundColor = .cyan

buyTicketButton.backgroundColor = .blue
buyTicketButton.setTitle("예매하기", for: .normal)
buyTicketButton.layer.cornerRadius = 5

속성은 이렇게 해줬어요

일단 눈에 띄는 색으로 알록달록 ㅎㅎ

버트는 같이 스크롤 안되고 잘 붙어 있슴다

이제 기획한 ui 대로 예쁘게 바꿔볼게요

그리고 데이터 연결도 해야함!