iOS 仿写知乎 feed 流透明全屏广告效果

应用效果

实现思路

从效果上，TableView 底部的图片预先加载好，而广告 cell 是透明的，因此基本思路很清晰：

• 利用 tableView 的 backgroundView 设置一个 imageView
• 将广告 cell 的 backgroundColor 以及其 contentView.backgroundColor 设置为 clear

尝试使用本地图片，实现如下代码，可以在 SwiftPlayground 中直观体验和查看

import UIKit
import PlaygroundSupport

class ViewController: UITableViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        let imageView = UIImageView(image: UIImage(named: "9.jpg"))
        tableView.backgroundView = imageView
        tableView.separatorStyle = .singleLine
    }
}

extension ViewController {
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 100
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.backgroundColor = .clear
        cell.contentView.backgroundColor = indexPath.row % 5 == 4 ? .clear : .white        
        return cell
   }

    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 200
    }
}

PlaygroundPage.current.liveView = ViewController() // 在辅助编辑器中查看

辅助编辑器

这里关于 Playground 的使用，执行效果在辅助编辑器中查看，不用新建工程，十分便利

PS：感谢 Wit 同学分享的这一有趣发现