[iOS/UI] 커스텀 XIB UIView 적용해보기 (UITableView,UICollectionView 포함)

안녕하세요 Foma 입니다!

 

요즘 들어 날씨 띄우기를 공부하고 있는데요.

 

스크롤뷰에 커스텀한 UIView를 넣기 위해서 xib로 따로 레이아웃을 잡아서 만들고 적용했는데요.

 

이 과정을 정리해놓고 공유해드리고 싶어서 글을 적게 되었습니다!

 

바로 시작할게요~

---

Preview

 

제가 만들고싶은 화면 아래와 같습니다.

 

ScrollVIew 위에 커스텀한 UIView를 얹어서 스크롤이 좌우로 되게끔 만드는 것입니다.

 

 

UIView에는 테이블뷰와 컬렉션뷰도 들어가 있습니다.

 먼저 WeatherView라는 UIView Swift 파일과 xib 파일을 만들어줍니다.

 

 

xib 파일을 만드는 법은 new File에서 User Interface에서 View를 골라주시고 생성해주시면 됩니다.

 

---

Xib

 

xib파일에서 원하시는 레이아웃을 설정해주세요!

 

 

저는 다음과 같이 세팅했습니다.

728x90

 

 

주의하실점은 xib파일의 왼쪽 부분에 File's Owner가 보이실거에요.

 

이걸 클릭해주신 뒤에

 

 

Custom Class 이름과 File's Owner Class 이름을 WeatherView로 해주세요!

 

---

WeatherView

 

WeatherView에 모두 연결해주고 아래와 같이 초기화를 해줍니다.

class WeatherView: UIView {

    //MARK:IBOutlets
    
    @IBOutlet weak var cityLabel: UILabel!
    @IBOutlet weak var dataLabel: UILabel!
    @IBOutlet weak var tempLabel: UILabel!
    @IBOutlet weak var weatherInfoLabel: UILabel!
    @IBOutlet weak var weeklyTableView: UITableView!
    @IBOutlet weak var hourlyInfoCollectionView: UICollectionView!
    @IBOutlet weak var hourlyCollectionView: UICollectionView!
    
    //MARK:LifeCycle
    
    override init(frame: CGRect) {
        super.init(frame: frame)

    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
      
    }

---

WeatherViewController

 

이 UIView를 띄우기 위한 WeatherViewController를 만들어주세요!

 

 

viewDidLoad()에 아래와 같이 코드를 붙여넣어줍니다.

 

저는 scrollView에 addSubView 하는거라 scrollView로 했는데 view에 적용하실분들은 scrollView만 view로 바꿔주시면 됩니다.

    override func viewDidLoad() {
        super.viewDidLoad()
        
        guard let weatherView = Bundle.main.loadNibNamed("WeatherView", owner: self, options: nil)?.first as? WeatherView else { return}
        weatherView.frame = CGRect(x: 0, y: 0, width: scrollView.bounds.width, height: scrollView.bounds.height)
        scrollView.addSubview(weatherView)
        
        //view에 넣을땐 아래와 같이 해주시면 됩니다.
//        weatherView.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height)
//        self.view.addSubview(weatherView)
    }

---

Bonus

 

위와 같이 UIView에 컬렉션뷰와 테이블뷰를 띄우기 위해선

 

다음과 같이 세팅을 해주셔야합니다.

 

원하시는 tableView or CollectionView를

 

register(UINib(nibName:테이블뷰셀이름,bundle:Bundle.main),forCellReuseIdentifie:셀아이덴티피어)로 해줍니다.

 

그리고 반드시 테이블뷰 or 컬렉션뷰의 dataSource를 self로 해주세요

 

class WeatherView: UIView {

    //MARK:IBOutlets
    
    @IBOutlet weak var cityLabel: UILabel!
    @IBOutlet weak var dataLabel: UILabel!
    @IBOutlet weak var tempLabel: UILabel!
    @IBOutlet weak var weatherInfoLabel: UILabel!
    @IBOutlet weak var weeklyTableView: UITableView!
    @IBOutlet weak var hourlyInfoCollectionView: UICollectionView!
    @IBOutlet weak var hourlyCollectionView: UICollectionView!
    
    //MARK:LifeCycle
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
      
    }
    
    
    func setupTableView() {
        weeklyTableView.register(UINib(nibName: "WeeklyTableViewCell", bundle: Bundle.main), forCellReuseIdentifier: "Cell")
        weeklyTableView.dataSource = self
    }
    
    func setupCollectionView(){
        hourlyCollectionView.register(UINib(nibName: "HourlyCollectionViewCell", bundle: Bundle.main), forCellWithReuseIdentifier: "Cell")
        hourlyCollectionView.dataSource = self
        
        hourlyInfoCollectionView.register(UINib(nibName: "HourlyInfoCollectionViewCell", bundle: Bundle.main), forCellWithReuseIdentifier: "Cell")
        hourlyInfoCollectionView.dataSource = self
    }

그리곤 다시 WeatherViewController로 이동해서 

 

아래와 같이 만들어준 함수를 실행시켜줍니다.

 

---

WeatherViewController

 

        guard let weatherView = Bundle.main.loadNibNamed("WeatherView", owner: self, options: nil)?.first as? WeatherView else { return}
        weatherView.frame = CGRect(x: 0, y: 0, width: scrollView.bounds.width, height: scrollView.bounds.height)
        weatherView.setupTableView()
        weatherView.setupCollectionView()
        scrollView.addSubview(weatherView)

 

이렇게 실행하면 아래와 같은 화면이 정상적으로 뜨는걸 볼 수 있을거에요!

 

---

P.S

처음에 WeatherView의 override init에서 WeatherViewController에서 하는 과정들을 넣었다.

 

그런데 계속 required init에서 fatalError가 나고 그냥 fatalError를 빼버리고 하니깐 tableView에서 에러가 나고 그랬다.

 

결국 ViewController에서 loadnibNamed를 해주고 tableView,collectionView register 함수를 실행시켜주니 에러가 해결됐다.