Как я могу получить заголовки UITableView на левой стороне разделов?

Question

Я добавил изображение с помощью следующего кода, но не смог достичь желаемого:

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

        let view = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 50))
        let image = UIImageView(frame: CGRect(x: 15, y: 10, width: 30, height: 30))

        let section = self.sections[section]

        switch section {
        case .phone:
            image.image = UIImage(systemName: "phone.fill")
            break
        case .mail:
            image.image = UIImage(systemName: "message.fill")
            break
        case .company:
            image.image = UIImage(systemName: "person.fill")
            break
        }
        view.addSubview(image)
        return view
    }

Демонстрация того, чего я хочу достичь

Answer 1

Такое поведение не достигается при использовании заголовков разделов. Я бы порекомендовал два варианта:

1 - придерживаться стандарта iOS. Что касается вашего варианта использования, заголовки должны быть либо наверху, либо вообще не существовать.

2- Достигнув требуемого дизайна, вы можете добавить представление «Изображение» в этой позиции на экране, затем следить за смещением ячейки, содержащей следующее изображение, а затем изменять фиксированный ImageView относительно этого смещения, чтобы оно перемещалось вверх / вниз на определенные значения. Или Вы можете затемнить и В для следующего значения Изображения.

---

Я создал быстрый пример, чтобы проиллюстрировать, как вы можете достичь этого:

1 - ячейка TableView

class CustomTableViewCell: UITableViewCell {

    private var hasImage: Bool = false {

        didSet {
            self.hasImage ? self.showImage() : self.hideImage()
        }

    }

    private var imagePlaceholder : UIImage {
           UIImage.add // Any empty Image with same size
    }

    func bind(title: String, image: UIImage?) {

        self.textLabel?.text = title
        self.imageView?.image = image ?? imagePlaceholder
        self.hasImage = image != nil

    }

    func hideImage() {
        self.imageView?.isHidden = true
    }

    func showImage() {

        if hasImage {

            self.imageView?.isHidden = false

        }

    }

}

2 - контроллер представления и его расширение

class ViewController: UIViewController {

@IBOutlet weak var tableview: UITableView!
@IBOutlet weak var imageView: UIImageView!

private var items = [Int : [(String, UIImage?)]]()
private var sections = [UIImage]() 

}

extension ViewController : UITableViewDataSource, UITableViewDelegate
{

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return self.items[section]?.count ?? 0
}

func numberOfSections(in tableView: UITableView) -> Int {
    return self.sections.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let tableViewCell = tableView.dequeueReusableCell(withIdentifier: "CustomTableViewCell") as! CustomTableViewCell
    if let itemData = self.items[indexPath.section]?[indexPath.row] {

        tableViewCell.bind(title: itemData.0, image: itemData.1)

    }

    return tableViewCell

}

func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
    self.handleHeaderView()
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    self.handleHeaderView()
}

private func handleHeaderView() {

    guard let visibleIndexPaths = self.tableview.indexPathsForVisibleRows, visibleIndexPaths.count > 0 else {
        return
    }

    let firstVisibleIndexPath = visibleIndexPaths[0]

    let sectionImage = self.sections[firstVisibleIndexPath.section]
    self.imageView.image = sectionImage


    if self.tableview.visibleCells.count > 0, let firstVisibleTableViewCell = self.tableview.visibleCells[0] as CustomTableViewCell {
        firstVisibleTableViewCell.hideImage()
    }

    if self.tableview.visibleCells.count > 1, let secondVisibleTableViewCell = self.tableview.visibleCells[1] as? CustomTableViewCell {
        secondVisibleTableViewCell.showImage()
    }

}
}

3 - раскадровка

Обратите внимание:

1- «Размер и поля заголовка ImageView» равны «Размеру и полям ImageView» внутри UITableViewCell.

2- Вы можете легко обработать любую необходимую анимацию при перемещении заголовков.

Проверьте репозиторий: https://github.com/amr-abdelfattah/iOS-IconicSideHeaderTableViewExample

Дайте мне знать, если вам нужна помощь.