在透明圖像後面插入UIVisualEffectView UIButton上的圖像

我試圖在按鈕上的透明圖像後面創建一個具有清晰背景的按鈕和一個UIVisualEffectView。 myButton.imageView.image有一個圖像集（myPNGWithTransparentBackground）。在透明圖像後面插入UIVisualEffectView UIButton上的圖像

我認爲這將是非常簡單的，但它被證明是比我預想的更困難......這裏就是我試過：

let frost = UIVisualEffectView(effect: UIBlurEffect(style: .light)) 
frost.frame = button.bounds 
frost.autoresizingMask = [.flexibleWidth, .flexibleHeight] 
// button.insertSubview(frost, at: 0) 
// button.insertSubview(frost, at: button.subviews.startIndex) 
// button.insertSubview(frost, at: button.subviews.endIndex) 
// button.imageView?.insertSubview(frost, at: (button.imageView?.subviews.endIndex)!) 
button.imageView?.insertSubview(frost, at: (button.imageView?.subviews.startIndex)!)

無論在何處我把insertSubview的，它總是結束了在UIButton的imageView.image前面。

更新

什麼，我已經試過Here's a Git repo。該子類被稱爲「FrostyButton」。

來源

2017-04-04 Adrian

您可能必須走子類路線。我認爲*「需要我自己想要的UIView圖層」*是一個完美的例子，其中協議和擴展以及使用超類不適合子類化。 – dfd

子類型相同的行爲。這看起來應該很簡單。我放心，我正在做一些真正愚蠢的事情。 – Adrian

好的，就這樣我明白了，你的演示有一個藍色的背景，它會被按鈕框模糊，在模糊的前面會有一個背景透明的圖像。正確？ – dfd

看過演示項目後，看起來您需要在UIButton映像的頂部上添加一個imageView 。這是我調整好的代碼 - 隨時根據需要清理它！

private var imageView2 = UIImageView() // declared globally private func makeItFrosty() { let frost = UIVisualEffectView(effect: UIBlurEffect(style: .light)) frost.frame = self.bounds frost.autoresizingMask = [.flexibleWidth, .flexibleHeight] if let imageView = imageView { imageView.addSubview(frost) // these three lines basically 'clone' the existing imageView and adds it on top of the 'frost' view imageView2.image = imageView.image imageView2.frame = imageView.frame self.addSubview(imageView2) } }

我並不太驚訝，你需要做這樣的事情 - UIButton圖像可能深深嵌入到「帶到前面」。

來源

2017-04-04 23:05:17 dfd

謝謝！我沒有大量的按鈕，我在實際項目中使用的pdf格式爲3千字節，所以這會起作用。 – Adrian

我今天早上更新了Github上的項目，所以FrostyButton類完全運作。再次感謝你。 – Adrian

不知道是什麼問題，但我得到了我的自定義按鈕類工作...我試圖匹配按鈕與一些香草UIViews和調整在UIView的背景上的阿爾法並沒有削減它。這是我提出的課程。

我最終把我的UIVisualEffectView放入了一個UIView，我卡在按鈕裏面。 isEnabled在可見和不可見之間切換。我在有幾個按鈕的類中使用它，每次只運行其中一個按鈕。

import UIKit 

@IBDesignable class FrostyButton: UIButton { 

    @IBInspectable override var isEnabled: Bool { 
     didSet { 
      if isEnabled { 
       self.visualEffectContainer.alpha = 1.0 
      } 
      else { 
       let animator = UIViewPropertyAnimator(duration: 0.5, curve: .linear, animations: { 
        self.visualEffectContainer.alpha = 0.0 
       }) 
       animator.startAnimation() 
      } 
     } 
    } 

    @IBInspectable var cornerRadius: CGFloat { 
     get { 
      return layer.cornerRadius 
     } 

     set { 
      layer.cornerRadius = newValue 
      layer.masksToBounds = newValue > 0 
     } 
    } 

    private let visualEffectContainer = UIView() 

    required init?(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 
     self.backgroundColor = .clear 
     makeItFrosty() 
    } 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
    } 

    override func prepareForInterfaceBuilder() { 
     super.prepareForInterfaceBuilder() 
    } 

    private func makeItFrosty() { 

     let effectView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) 
     effectView.frame = self.bounds 
     effectView.clipsToBounds = true 
     effectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] 

     visualEffectContainer.frame = self.bounds 
     visualEffectContainer.clipsToBounds = true 
     visualEffectContainer.autoresizingMask = [.flexibleWidth, .flexibleHeight] 
     visualEffectContainer.addSubview(effectView) 
     visualEffectContainer.isUserInteractionEnabled = false 
     if imageView != nil { 
      self.insertSubview(visualEffectContainer, at: 0) 
     } 
    } 
}

來源

2017-04-05 22:24:58 Adrian

在透明圖像後面插入UIVisualEffectView UIButton上的圖像

回答

相關問題