CODEWITHSUNDEEP
iosswiftuitableviewswift4
KevinB
KevinB

Reputation: 2484

Swift - tableView with a background color for the top

I don't really know how to describe my problem so here is a video:

enter image description here

I have a tableViewController and I would like that the orange color to be red a the top and white at the bottom. I tried to change the background color (in orange) and it's not what I could like...

Do you know if it's possible to do that, given that sometimes, the text in the red section can be really short, and we can see both the top and the bottom part of the tableViewController

Upvotes: 0

Views: 1839

Answers (2)

HMHero
HMHero

Reputation: 2343

Add a red view to the same parent view of the table view and set position to be at the top of tableview. its width should be tablview view's width and height should initially be 0. Using scroll view delegate and set the red view's height to max(-scrollView.contentOffset.y, 0). Set the table view background color to white.

Upvotes: 2

Alex Kolovatov
Alex Kolovatov

Reputation: 879

Here is the code example. Change it for your view controller.

import UIKit

class ViewController: UIViewController {

// Count your number of cells from your array. 3 its just example.
private let numberOfRedCells: CGFloat = 3
private let cellHeight: CGFloat = 50

var defaultOffSet: CGPoint?
var defaultHeightConstraint: NSLayoutConstraint!

lazy var tableView: UITableView = {
    let tableView  = UITableView(frame: self.view.frame)
    // Important. Clear backgroundColor.
    tableView.backgroundColor = .clear
    tableView.separatorStyle = .none
    tableView.dataSource = self
    tableView.delegate = self
    return tableView
}()

lazy var redView: UIView = {
    let rv = UIView()
    rv.backgroundColor = .red
    return rv
}()

override func viewDidLoad() {
    super.viewDidLoad()


    tableView.register(UITableViewCell.self, forCellReuseIdentifier: NSStringFromClass(UITableViewCell.self))

    view.addSubview(redView)
    setupConstraints()
    view.addSubview(tableView)
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    defaultOffSet = tableView.contentOffset
}

private func setupConstraints() {
    redView.translatesAutoresizingMaskIntoConstraints = false
    let top = NSLayoutConstraint(item: redView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1, constant: 0)
    let left = NSLayoutConstraint(item: redView, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1, constant: 0)
    let right = NSLayoutConstraint(item: redView, attribute: .right, relatedBy: .equal, toItem: view, attribute: .right, multiplier: 1, constant: 0)
    let bottom = NSLayoutConstraint(item: redView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: 0)
    view.addConstraints([top, left, right, bottom])
}

}

extension ViewController: UITableViewDataSource {

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 8
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: NSStringFromClass(UITableViewCell.self), for: indexPath)
    // Your red type cells, equals 3 just for example
    if indexPath.row < 3 {
        cell.backgroundColor = .red
        cell.textLabel?.text = "Input your text here"
    } else {
        // Your white type cells
        cell.backgroundColor = .white
        cell.textLabel?.text = "Your information"
    }

    return cell
}

}

extension ViewController: UITableViewDelegate {

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return cellHeight
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let contentYoffset = scrollView.contentOffset.y + 20 // 20 - statusBar height

    if contentYoffset > 0 {
        self.redView.frame.size.height = 20
    } else {
        self.redView.frame.size.height = cellHeight * numberOfRedCells - contentYoffset
    }
}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    tableView.deselectRow(at: indexPath, animated: true)
}

}

Here is what I've got. enter link description here

Upvotes: 1

Related Questions