iOS/UIKIT

테이블 뷰의 섹션 타이틀에 폰트 설정하기 (위치)

밤새는 탐험가89 2024. 9. 26. 12:18
    func tableView(_ tableView: UITableView,viewForHeaderInSection section: Int) -> UIView? {
       
        let label = UILabel()
        label.text = "\(sections[section])"
        label.font = UIFont(name: "HakgyoansimBunpilR", size: 16)
        label.textColor = .label
        label.backgroundColor = .clear
        label.textAlignment = .left
        
        return label
    }

 

 

 

 

테이블 섹션별 타이틀의 위치를 변경하고 싶다면?

 

func tableView(_ tableView: UITableView,viewForHeaderInSection section: Int) -> UIView? {
        
        let headerView = UIView()

        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "\(sections[section])"
        label.font = UIFont(name: "HakgyoansimBunpilR", size: 16)
        label.textColor = .label
        label.backgroundColor = .clear
        label.textAlignment = .left
        
        headerView.addSubview(label)
        
        let moreButton = UIButton(type: .system)
        moreButton.translatesAutoresizingMaskIntoConstraints = false
        moreButton.setTitle("더 보기", for: .normal)
        moreButton.titleLabel?.font = UIFont(name: "HakgyoansimBunpilR", size: 16)
        moreButton.setTitleColor(.label, for: .normal)
        moreButton.addTarget(self, action: #selector(moreButtonTapped(_:)), for: .touchUpInside)
        
        headerView.addSubview(moreButton)
        
        NSLayoutConstraint.activate([
            label.leadingAnchor.constraint(equalTo: headerView.leadingAnchor, constant: 10),
            label.topAnchor.constraint(equalTo: headerView.topAnchor),
            
            // 더보기 버튼의 제약조건
            moreButton.trailingAnchor.constraint(equalTo: headerView.trailingAnchor, constant: -10),
            moreButton.topAnchor.constraint(equalTo: headerView.topAnchor, constant: -5),
        ])
        
        return headerView
    }

 

🔥 headerView에 대해 

UITableView의 viewForHeaderInSection에서 반환되는 headerView의 경우, 기본적으로  heightForHeaderInSection에서 반환하는 값에 따라 헤더 뷰의 높이가 결정됩니다.

 

즉, headerView의 크기는 테이블 뷰가 자체적으로 높이를 설정하지만, **가로 길이 (width)**는 테이블 뷰의 너비와 동일하게 자동으로 맞춰집니다.

 

따라서 headerView의 **너비(width)**는 자동으로 테이블 뷰의 너비에 맞춰지고, **높이(height)**는tableView(_:heightForHeaderInSection:) 메서드에서 정의한 값으로 설정됩니다.