iOS Swift 卡片列表堆叠效果实现

之前看到一个多张银行卡卡片叠加、点击动态展开的效果,感觉很不错,抽空实现了一下。


Screen Shot 2020-04-20 at 9.54.34 AM.jpg
未命名-min 2.gif

思路:
用 UITableView 实现,一张卡片就是一个 Cell,展开一张卡片就是 update 这个 Cell 的高度。

Cell

cell xib

绘制圆角、阴影

    @IBOutlet var cardView: UIView!
    @IBOutlet var cardImg: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        let radius: CGFloat = 15
        cardView.layer.cornerRadius = radius
        cardView.layer.shadowColor = UIColor.black.cgColor
        cardView.layer.shadowOpacity = 0.5
        cardView.layer.shadowOffset = CGSize(width: 0.5, height: 0.5)
        cardView.layer.shadowRadius = radius
        cardImg.layer.cornerRadius = radius
        cardImg.clipsToBounds = true
        
        backgroundColor = .clear
        contentView.backgroundColor = .clear
    }

从上图可以看到,我这里使用xib画的cell,由于卡片比例是固定的,所以cardView加比例约束,防止卡片变形。进一步根据比例和屏幕宽度,计算出卡片展开时cell的高度openHeight(卡片被遮挡时的高度固定54):

let openHeight: CGFloat = (UIScreen.main.bounds.size.width - 30) * (593 / 939) + 25
let closeHeight: CGFloat = 54

CardView 左、上、右相对superView都设置了约束,因为要实现效果是上一张卡被下一张卡遮挡,所以底部不需要加约束。

显示时,上面所有的cell都是close的,被点击才会更新高度(展开或收起)。当点击第二个cell时,关闭前一个cell,打开后一个cell,保证一次只打开一张卡。最后一个cell是固定open的,点击也不会改变高度。

现在运行效果是左边这样的,好像是有点样子了,但是是上面的卡遮住了下面的卡。上拉一下,让部分卡片到屏幕外,松手之后又变成了右边这样。这是因为随着cell的复用,界面上cell的之间的层级是变化的,导致卡的层级也发生了变化。


image.png
QQ20200115-154642@2x.jpg

那如果设置cell的clipsToBounds,让超出部分不显示呢?
答案是不行:


QQ20200115-160527@2x.jpg

可以看到,红框是实际cell的位置,要让cell2卡片挡住cell1卡片,cell1的卡片必须超出cell1的范围,穿过cell2卡片下方。所以clipsToBounds这个方法行不通

解决办法

这时候需要用到layer的zPosition属性:
这个属性的作用是设置显示的优先级,数字越高,就越会显示在最前面(但是不会影响响应链的优先级)
layer.zPosition探究

具体到这里,就是保证在下面的cell.layer.zPosition的值永远比上面的大就行了。比如说这里界面上,从上到下的layer.zPosition的值分别设置为是1,2,3,这样就可以保证下张卡一直显示在上一张卡上面。

最近用Xcode11运行demo,发现在iOS13的模拟器上面执行动画时,cell上面透明部分会变成不透明,折腾了我好久,最后发现其实只是iOS13模拟器的问题,我用真机就完全没问题,fxxk。

总体思路就是这些,下面附上demo。

ZJTableViewManager中的ZJTableViewDemo的BasicExample的UpdateHeight范例

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容

  • 每个UIView有一个伙伴称为layer,一个CALayer。UIView实际上并没有把自己画到屏幕上;它绘制本身...
    shenzhenboy阅读 3,027评论 0 17
  • 所有示例代码均可以在 Animations-Demo 下载到 上节提到 UIView 上所有动画归根结底都是发生在...
    smalldu阅读 4,628评论 0 17
  • http://blog.csdn.net/guojin08/article/details/60773120 屏幕...
    pony23阅读 875评论 0 2
  • 首先感谢小易童鞋,这里自己也整理下这些容易忘记的代码 设置导航栏的背景颜色用barTintColor self.n...
    HT_Jonson阅读 898评论 0 51
  • 一、如何提高一个应用程序的性能?1、使用ARC减少内存失误,dealloc需要重写并对属性置nil。2、重用。3、...
    金歌漫舞阅读 936评论 2 6