如何快速在 UICollectionView 的页脚中制作渐变按钮？

Question

我遇到了一个问题。我正在制作一个应用程序，我需要在 UICollectionView 的页脚内制作一个带有渐变颜色的按钮，问题是我无法通过情节提要制作它，所以我必须以编程方式制作它UICollectionView 的页脚内。但是不知道怎么弄。

事情是我已经尝试过，我已经完成了UICollectionView的Footer中UIButton的基本结构。

case UICollectionView.elementKindSectionFooter:

    let footer = outerMainCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "Footer", for: indexPath) as! headerReusableView

    let button = UIButton(frame: CGRect(x: 0, y: 0, width: collectionView.frame.width - 50, height: 40))

    if isGuest {
        button.backgroundColor = .red
    } else {
        button.backgroundColor = .black
    }

    button.setTitle("ALL", for: .normal)
    button.setTitleColor(COLORWHITE, for: .normal)
    button.addTarget(self, action: #selector(footerButton), for: .touchUpInside)

    footer.addSubview(button)

    footer.backgroundColor = UIColor.green

    return footer

我想让它在浅橙色和深橙色之间渐变，例如使用任何十六进制值，并且我想让它的中心高度为 40，并从所有侧面设置边距 - 顶部、底部、左侧、右侧。

Answer 1

集合视图本身提供了使用 Xib 和情节提要添加页脚的选项，但如果您想以编程方式添加约束，您可以使用以下函数来完成

func addSubviewInSuperview(subview : UIView , andSuperview superview : UIView) {

    subview.translatesAutoresizingMaskIntoConstraints = false;

    let leadingConstraint = NSLayoutConstraint(item: subview,
                                               attribute: .leading,
                                               relatedBy: .equal,
                                               toItem: superview,
                                               attribute: .leading,
                                               multiplier: 1.0,
                                               constant: 0)

    let trailingConstraint = NSLayoutConstraint(item: subview,
                                                attribute: .trailing,
                                                relatedBy: .equal,
                                                toItem: superview,
                                                attribute: .trailing,
                                                multiplier: 1.0,
                                                constant: 0)

    let topConstraint = NSLayoutConstraint(item: subview,
                                           attribute: .top,
                                           relatedBy: .equal,
                                           toItem: superview,
                                           attribute: .top,
                                           multiplier: 1.0,
                                           constant: 0)

    let bottomConstraint = NSLayoutConstraint(item: subview,
                                              attribute: .bottom,
                                              relatedBy: .equal,
                                              toItem: superview,
                                              attribute: .bottom,
                                              multiplier: 1.0,
                                              constant: 0.0)

    superview.addSubview(subview)
    superview.addConstraints([leadingConstraint,trailingConstraint,topConstraint,bottomConstraint])
}  

将渐变设置为按钮背景：-

func setGradient() {
    let color1 =  UIColor.red.cgColor
    let color2 = UIColor.blue.cgColor

    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [color1, color2]
    gradientLayer.locations = [0.0, 1.0]
    gradientLayer.frame = self.view.bounds

    self.btn.layer.insertSublayer(gradientLayer, at:0)
}

Answer 2

我有一个扩展程序可以帮助您在UIButton 和UIView 中添加渐变色。

扩展

extension UIView {
    func applyGradient(colours: [UIColor]) -> Void {
        self.applyGradient(colours, locations: nil)
    }

    func applyGradient(colours: [UIColor], locations: [NSNumber]?) -> Void {
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.colors = colours.map { $0.CGColor }
        gradient.locations = locations
        self.layer.insertSublayer(gradient, atIndex: 0)
    }
}

您可以使用extension，如下所示。确保在ViewController 中声明全局按钮属性，如下例所示。

class ViewController: UIViewController {

    @IBOutlet weak var yourButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.yourButton.applyGradient([UIColor.yellowColor(), UIColor.blueColor()])
    }
}