如何在UICollectionView的页脚中快速创建渐变按钮?

时间:2019-06-10 12:43:14

标签: ios swift uicollectionview uibutton

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

我试图做的是它,我已经完成了在 UICollectionView 的页脚中制作 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,并在所有边距上-上,下,左,右。

2 个答案:

答案 0 :(得分: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)
}

答案 1 :(得分:0)

我有扩展程序,可以帮助您在UIButtonUIView中添加渐变色。

扩展

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()])
    }
}