在Tableview中偏移HeaderView以显示类似卡

问题描述

我目前正在尝试为UITableView偏移HeaderView以获得存折视图的某种感觉,但是并不需要表现得像存折,只是上部视图偏移了某些像素以覆盖这些部分。

以下是我一直在研究的几个示例。

enter image description here

enter image description here

如果您注意到第一张图片,则布局已在CollectionView中完成自定义,但是,我觉得它的设计过分,无法获得基于UICollectionView中UITableView的外观。但是,需要像基于第二张图片的UITableView中那样呈现输出的上下文,但是我很好奇是否有任何方法可以抵消“ y”值以覆盖UITableView中的上一节标头吗?

解决方法

您需要使用自定义UICollectionViewLayout。 基本上,使用UICollectionView进行垂直滚动,将项目宽度设置为等于屏幕的宽度,并实施自定义UICollectionViewLayout而不是使用UICollectionViewFlowLayout

您不能在UITableView中重叠两个单元格,因为不存在布局的概念。 UITableView中的单元格是按顺序排列的。

Here一个可能的库。

,

就像@Fry在他的回答中提到的那样,UITableView并不是真的希望您“移动”节标题或单元格,并且UICollectionView可能是更好的选择,因为它具有高度的灵活性(但是当然,您将需要一些工作来实现自定义UICollectionViewLayout)。

但是,如果您坚持使用UITableView,这是一个简单的想法,可以实现您的要求。只需将下一部分的节标题的backgroundColor设置为与上一部分匹配即可。确实,这只是给您存折视图的“感觉”,而不是像这样。

例如,

    let mockData = [(key: "section 1",value: [],color: UIColor.red),(key: "section 2",color: UIColor.blue),(key: "section 3",value: [3,4,5],color: UIColor.green)]

    ...
    override func tableView(_ tableView: UITableView,viewForHeaderInSection section: Int) -> UIView? {
        let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: "header") as! TestViewHeader
    
        header.containerBackground.backgroundColor = mockData[section].color
        // here .white is just an example,you can add any color you want to match with the background or the navigationBar,depends on your design
        header.contentView.backgroundColor = (section == 0) ? .white : mockData[section - 1].color
    
        header.containerLabel.text = mockData[section].key
        header.containerBackground.roundCorners(corners: [.topLeft,.topRight])
    
        return header
    }

结果如下:

enter image description here

还附上了我的tableView Header和我的辅助函数供您参考:

enter image description here enter image description here enter image description here