I am new to Swift and SwiftUI, so I decided to start with building Netflix clone(by Amr)
My problem: I'm doing the same steps as in the tutorial, but instead of a dark theme I'm using a light theme for my app. Now I have these gray lines (on the photophoto). Before the gray color was also behind the headers(trending movies, popular etc), I was able to change the color there. But I can not understand what is this gray bars that remain, in the dark version it is not there and it is just black there. Maybe someone can tell me how to fix it and what it is. It appeared after I added the header text, up to this point there was all white, but I revised all the lines and still do not understand what the problem is. I would be grateful!
some of code that I using for editing home screen
file of Controller
let sectionTitles: [String] = ["Trending Movies", "Popular", "Trending TV", "Upcoming movies", "Top rated"]
override func viewDidLayoutSubviews() {
super .viewDidLayoutSubviews()
homeFeedTable.frame = view.bounds
}
}
extension HomeViewController: UITableViewDelegate, UITableViewDataSource{
func numberOfSections(in tableView: UITableView) -> Int {
return sectionTitles.count
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: CollectionViewTableViewCell.identifier, for: indexPath) as? CollectionViewTableViewCell else{
return UITableViewCell()
}
return cell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 200
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 40
}
//header text appearance
func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
guard let header = view as? UITableViewHeaderFooterView else {return}
header.textLabel?.font = .systemFont(ofSize: 18, weight: .semibold)
header.textLabel?.frame = CGRect(x: header.bounds.origin.x + 20, y: header.bounds.origin.y, width: 100, height: header.bounds.height)
header.contentView.backgroundColor = UIColor.systemBackground //background replacement
header.textLabel?.textColor = .black
header.textLabel?.text = header.textLabel?.text?.lowercased()
}
//displaying names for each section
func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return sectionTitles[section]
}}
file of Views
import UIKit
class CollectionViewTableViewCell: UITableViewCell {
static let identifier = "CollectionViewTableViewCell"
private let collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: 140, height: 200)
layout.scrollDirection = .horizontal
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
return collectionView
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
contentView.backgroundColor = UIColor.systemBackground
contentView.addSubview(collectionView)
collectionView.delegate = self
collectionView.dataSource = self
}
required init?(coder: NSCoder) {
fatalError()
}
override func layoutSubviews() {
super.layoutSubviews()
collectionView.frame = contentView.bounds
}
}
extension CollectionViewTableViewCell: UICollectionViewDelegate, UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
cell.backgroundColor = .green
return cell
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
}
The gray bars you're seeing are likely the default separators for UITableView. You can remove them or customize their appearance to match your light theme. To remove them entirely, you can set the separator style of the UITableView to .none in your HomeViewController.
//Add this line to your viewDidLoad method:
homeFeedTable.separatorStyle = .none
This will remove the gray bars between the sections. If you still want separators but want them to match your light theme, you can customize their appearance by setting the separator color:
homeFeedTable.separatorColor = UIColor.lightGray
//or any other color that matches your light theme, Add this line to your viewDidLoad method as well.
If that did not work try this
func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
guard let header = view as? UITableViewHeaderFooterView else { return }
header.backgroundView?.backgroundColor = UIColor.systemBackground
header.textLabel?.font = .systemFont(ofSize: 18, weight: .semibold)
header.textLabel?.textColor = .black
header.textLabel?.text = header.textLabel?.text?.lowercased()
}
Or Try this
homeFeedTable.backgroundColor = UIColor.systemBackground //This goes in your viewDidLoad()