[흡구오디] 스크롤뷰 구현하기 | 지도뷰 + 스크롤뷰 조합

안녕하세요

 

이제 detailView 만들 차례!

 

DetailView 설명

디테일 뷰는 상단에 전 화면에서 찍은 좌표에 마커가 있는 지도가 고정되어 있고,

아래에는 스크롤 뷰로 해당 장소에 대한 설명들을 적을 수 있는 화면이다.

 

 

이렇게 네비게이션 바 아래에 크기 200으로 뱌치해줬다.

코드는 이러함 

NSLayoutConstraint.activate([
	  // 이럴게 내비 바 바로 아래에 고정!
      mapView.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor),
      mapView.leadingAnchor.constraint(equalTo: leadingAnchor),
      mapView.trailingAnchor.constraint(equalTo: trailingAnchor),
      mapView.heightAnchor.constraint(equalToConstant: 200) // 원하는 높이 고정
    ])

 

(또 다시 억겁의 시간이 흐름...🙀)

 

스크롤뷰 구현

 

//
//  DetailView.swift
//  SmokingAreaOdi
//
//  Created by 이상지 on 7/17/25.
//
import NMapsMap
import UIKit

final class DetailView: UIView {
  
  // MARK: - properties
  
  
  private let mapView = NMFMapView()
  private let addButton = UIButton()
  private let scrollView = UIScrollView()
  private let contentView = UIView()
  
  private let smokingAreaName = UILabel()
  
  //...중략
  
  
  // MARK: - UI
  
  
  private func setupUI() {
    //... 중략
    
    setupScroll()
    addContent()
  }
  
  // MARK: - Marker
//... 중략
  
  
  // MARK: - Scroll
  
  func setupScroll() {
    self.addSubview(scrollView)
    
    self.backgroundColor = .white
    
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
      scrollView.topAnchor.constraint(equalTo: mapView.bottomAnchor),
      scrollView.bottomAnchor.constraint(equalTo: bottomAnchor),
      scrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
      scrollView.leadingAnchor.constraint(equalTo: leadingAnchor)
    ])
    
    scrollView.addSubview(contentView)
    
    contentView.translatesAutoresizingMaskIntoConstraints = false
    
    contentView.backgroundColor = .red
    
    NSLayoutConstraint.activate([
      contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
      contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
      contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
      contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
      contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
    ])
  }
  
  func addContent() {
    let nameLabel = UILabel()
    nameLabel.text = "이름 (필수)"
    nameLabel.font = .boldSystemFont(ofSize: 16)
    
    let nameTextField = UITextField()
    nameTextField.borderStyle = .roundedRect
    nameTextField.placeholder = "흡연구역 이름 입력"
    
    contentView.addSubview(nameLabel)
    contentView.addSubview(nameTextField)
    
    nameLabel.translatesAutoresizingMaskIntoConstraints = false
    nameTextField.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
      nameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 20),
      nameLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
      nameLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20),
      
      nameTextField.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 8),
      nameTextField.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor),
      nameTextField.trailingAnchor.constraint(equalTo: nameLabel.trailingAnchor),
      nameTextField.heightAnchor.constraint(equalToConstant: 40)
    ])
    
    nameTextField.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -20).isActive = true

  }
}

 

여기까지함..!

 

물론 지피티가 많이 도와줌

 

이제 하는 방법 익혔으니까 내가 만들어보기!

 

현재까지의 화면은 이렇다

 

구역 파악하려고 일부로 색상 넣었음

 

오늘 진짜 열공함...

넘 힘드르 오늘은 여기까지 끝!!!

 

과연 내가 스크롤뷰를 잘 구성할 수 있을지 ㅎ