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 同窗分享的這一有趣發現

加我微信溝通。

做者：創聯維新_日更

來源：www.jianshu.com/p/0091b46e0…