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

96
创联维新_日更
0.1 2018.11.17 11:56* 字数 159

应用效果

实现思路

从效果上,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 同学分享的这一有趣发现

加我微信沟通。


iOS
Web note ad 1