UITableView 上的模糊和活力效果

Posted 2023-02-24

【中文标题】UITableView 上的模糊和活力效果

【英文标题】：Blur and vibrancy effects on UITableView

【发布时间】：2015-05-12 13:11:07

【问题描述】：

我只是不知道该怎么做。我已经尝试了 *** 中的所有内容，但没有任何效果。在我的层次结构中，我有一个视图、图像和所有 tableView 下方。但是表视图仍然是白色的。有没有人知道如何做到这一点？正如我所写，这里没有任何效果。

我想要这样的UITableView：

导航栏也是我的问题的一部分（他的模糊和活力）。

使用此代码后：

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell 

    var cell:UITableViewCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as UITableViewCell

    let backgroundImageView = UIImageView(image: UIImage(named: "background3.png"))

    cell.backgroundView = backgroundImageView

    var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light)) as UIVisualEffectView

    visualEffectView.frame = CGRectMake(0, 0, cell.bounds.width, cell.bounds.height)

    backgroundImageView.addSubview(visualEffectView)

    cell.textLabel?.text = self.field[indexPath.row]
    cell.textLabel?.textColor = UIColor.whiteColor()
    cell.textLabel?.backgroundColor = UIColor.clearColor()

    return cell

我的 tableView 现在看起来像这样：

这是合乎逻辑的，因为它是 background3.png 图像的外观。

【问题讨论】：

我已经厌倦了在没有给出理由或名字的情况下拒绝投票问题的懦夫。这个问题没有错。

【参考方案1】：

子类 UITableViewController。

let effect = UIBlurEffect(style: .Dark)
let resizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight

像这样构建一个背景视图并将其粘贴到您的表格视图中。注意分隔符效果，这是新的api。

override func viewDidLoad() 
    super.viewDidLoad()
    
    let backgroundView = UIView(frame: view.bounds)
    backgroundView.autoresizingMask = resizingMask
    backgroundView.addSubview(self.buildImageView())
    backgroundView.addSubview(self.buildBlurView())

    tableView.backgroundView = backgroundView
    tableView.separatorEffect = UIVibrancyEffect(forBlurEffect: effect)


func buildImageView() -> UIImageView 
    let imageView = UIImageView(image: UIImage(named: "coolimage"))
    imageView.frame = view.bounds
    imageView.autoresizingMask = resizingMask
    return imageView


func buildBlurView() -> UIVisualEffectView 
    let blurView = UIVisualEffectView(effect: effect)
    blurView.frame = view.bounds
    blurView.autoresizingMask = resizingMask
    return blurView

将单元格的背景颜色更改为清除，这样当你有单元格时背景是可见的。

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell 
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)as! UITableViewCell
    cell.backgroundColor = UIColor.clearColor()
    return cell

【讨论】：

是的，这就是 ***。我为自己的问题找到了解决方案，但有人对我投了反对票：-D

这是有效的。但是您必须为 Swift 2.0 更新 resizingMask 行，我对此表示赞同，谢谢 :)

不，你弄错了。我建议对此答案进行编辑，我已为 Swift 2.0 修复它，您当前的代码在 Swift 2.0 上返回编译器错误

Swift 2.0 语法：let resizingMask: UIViewAutoresizing = [.FlexibleWidth, .FlexibleHeight]

【参考方案2】：

所以解决方案非常简单。我在 Youtube 上找到了一个很棒的教程：

Swift ios tutorial - Custom tableview appearance in Xcode 6

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell 
    var cell:UITableViewCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as UITableViewCell

    var openSansSemibold = UIFont(name: "OpenSans-Semibold", size: 12)?.fontDescriptor().fontDescriptorWithSymbolicTraits(UIFontDescriptorSymbolicTraits.TraitBold)
    cell.textLabel?.font = UIFont(descriptor: openSansSemibold!, size: 12)

    if(indexPath.row % 2 == 1)
        cell.backgroundColor = UIColor.clearColor()
    else
        cell.backgroundColor = UIColor.whiteColor().colorWithAlphaComponent(0.2)
        cell.textLabel?.backgroundColor = UIColor.whiteColor().colorWithAlphaComponent(0.0)
        cell.detailTextLabel?.backgroundColor = UIColor.whiteColor().colorWithAlphaComponent(0.0)
    

    cell.textLabel?.textColor = UIColor.whiteColor()

    return cell

在 viewDidLoad() 方法中：

self.tableView.rowHeight = 70
self.tableView.backgroundView = UIImageView(image: UIImage(named: "background"))

就是这样。每个奇数单元都有清晰的颜色，每个偶数都有模糊的背景。看起来真的很棒！

【讨论】：

您只是在设置 alpha...您根本没有在此处应用任何模糊。有关如何使用 UIVibrancyEffect 类的详细信息，请参阅我的答案，这是房间里的大象。

另外，你设置每隔一个单元格，这不是 OP 要求的。

另外，您正在使用字体描述符来提取已经是半粗体的半粗体字体...

另外，这些代码中的大部分不是说明您的观点所必需的，并且是特定于您的视图层次结构而不是 OP 的。