[英]Offset HeaderView in Tableview to display like cards
I am currently trying to offset HeaderView for UITableView to get some feel of passbook view but doesn't need to behave like a passbook, just that the upper view gets offset certain pixels to overlay the sections.我目前正在尝试为 UITableView 偏移 HeaderView 以获得一些存折视图的感觉,但不需要表现得像存折,只是上面的视图偏移了某些像素以覆盖这些部分。
Below are a couple of examples I have been working on.下面是我一直在研究的几个例子。
If you notice the first picture, the layout is completed customized in CollectionView, however, I feel like it's over-engineered to get the feel of something based on UITableView in UICollectionView.如果你注意到第一张图,布局是在CollectionView中完成定制的,但是,我觉得在UICollectionView中获得基于UITableView的感觉是过度设计的。 However the context of the output needs to be rendered just like the one in UITableView based on the second picture, but I am curious if there is any way to offset the "y" value to overlap the previous section header in UITableView?
然而,输出的上下文需要像基于第二张图片的 UITableView 中的上下文一样呈现,但我很好奇是否有任何方法可以抵消“y”值以与 UITableView 中的上一节标题重叠?
You need to use a custom UICollectionViewLayout
.您需要使用自定义
UICollectionViewLayout
。 Basically, use a UICollectionView
with vertical scroll, set the items width equal to the screen's width and implement a custom UICollectionViewLayout
instead using UICollectionViewFlowLayout
.基本上,使用带有垂直滚动的
UICollectionView
,将项目宽度设置为等于屏幕的宽度并实现自定义UICollectionViewLayout
而不是使用UICollectionViewFlowLayout
。
You can't overlap two cells in UITableView
, because doesn't exist the concept of layout.你不能在
UITableView
重叠两个单元格,因为不存在布局的概念。 Cells in UITableView
are sequentially. UITableView
中的单元格是按顺序排列的。
as @Fry mentioned in his answer, UITableView
not really expect you to "move" the section header or cell, and UICollectionView
maybe a better option as it give a high degree of flexibility (but of course you will need some work to implement a custom UICollectionViewLayout
).正如@Fry 在他的回答中提到的,
UITableView
并不真正期望您“移动”部分标题或单元格,而UICollectionView
可能是更好的选择,因为它提供了高度的灵活性(但当然您需要一些工作来实现自定义UICollectionViewLayout
)。
But if you insist to use UITableView
, here is a simple idea to achieve what you asked for.但是如果你坚持使用
UITableView
,这里有一个简单的想法来实现你的要求。 Just set the backgroundColor
of the section header of next section to match the previous section.只需设置下一节的节标题的
backgroundColor
颜色以匹配上一节。 This really just give you the "feel" of passbook view but not behave like it.这真的只是给你存折视图的“感觉”,但行为并不像它。
For example,例如,
let mockData = [(key: "section 1", value: [], color: UIColor.red),
(key: "section 2", value: [], 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
}
And here is the result:结果如下:
also attached my tableView Header and my helper function for your reference:还附上了我的 tableView Header 和我的辅助函数供您参考:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.