UITableView의 구분선을 화려하게 만들고 싶습니다!

이런 식으로 하고 싶다!





모든 구분선이 같은 색으로 좋다면



모두 동일하고 좋은 경우에는 tableView.separatorColor 로 대응할 수 있습니다.
예를 들어, 다음 예에서 구분선은 빨간색입니다.

swift
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.separatorColor = .red
    }

그럼 각 셀마다 다른 색상을 만들려면 어떻게해야합니까 ...

사용자 정의 셀로 할!



사실, 사용자 정의 셀에서도 구분선의 색상을 개별적으로 변경할 수 없다고 생각합니다.
그래서 스스로 구분선 (같은 UIview ) 을 만드는 것으로 대응합니다.

아래와 같이 셀의 하단에 구분선으로 보이는 UIView 를 배치하여 구분선에 표시합니다.

swift
class CustomTableViewCell: UITableViewCell {
    // 区切り線に見せかける view
    private let separator: UIView = {
        let view = UIView()
        return view
    }()

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        contentView.addSubview(separator)
        // contentView の最下部に高さの値を小さくして配置することで、区切り線に見せかける
        separator.translatesAutoresizingMaskIntoConstraints = false
        separator.heightAnchor.constraint(equalToConstant: 1).isActive = true
        separator.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
        separator.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
        separator.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func setColor(color: UIColor) {
        separator.backgroundColor = color
    }
}

그리고는 TableViewController 안에서…
tableView 의 구분선을 숨깁니다 ( tableView.separatorStyle = .none ).

swift
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.register(CustomTableViewCell.self, forCellReuseIdentifier: "CustomTableViewCell")
        tableView.separatorStyle = .none
    }

커스텀 셀을 사용하도록 한다.

swift
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomTableViewCell") as! CustomTableViewCell
        cell.textLabel?.text = String(indexPath.row + 1)
        cell.setColor(color: colors[indexPath.row]) // 好きな色を設定する
        return cell
    }

이제 마치 화려한 구분선이 생긴 것처럼 보일 수 있습니다!

끝에



이번 예와 같이 구분선을 커스터마이즈하고 싶다는 요망은 적을지도 모릅니다.
그렇지만, 아무래도 그러한 디자인으로 하고 싶지만, 제공되고 있는 프로퍼티에서는 대처할 수 없는 때에는,
스스로 그렇게 보이도록 궁리한다고 하는 선택사항이 머리 속에 있으면, 해결에 한 걸음 다가갈 것인가라고 생각하고 있습니다.

좋은 웹페이지 즐겨찾기