有没有办法在界面构建器中制作渐变背景颜色?

2020/12/16 02:11 · ios ·  · 0评论

对于我的应用程序,我正在使用TableView和自定义的UITableViewCells。

我通过界面生成器自定义了单元,而不是通过编程。有没有办法在界面构建器中使自定义单元格的背景颜色渐变?

谢谢。

要绘制渐变,您必须通过编程来继承并重写drawRect:

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSaveGState(context);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColorComponents
                             (colorSpace,
                              (const CGFloat[8]){1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f},
                              (const CGFloat[2]){0.0f,1.0f},
                              2);

    CGContextDrawLinearGradient(context,
                                gradient,
                                CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMinY(self.bounds)),
                                CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMaxY(self.bounds)),
                                0);

    CGColorSpaceRelease(colorSpace);
    CGContextRestoreGState(context);
}

单元格保留在界面生成器中最简单方法可能是对UIView进行子类化,以使其在drawRect中绘制渐变并将其放置在其他子视图后面的单元格中:

GradientView *gradientView = [[GradientView alloc] init];
gradientView.frame = cell.bounds;
[cell addSubview:gradientView];
[cell sendSubviewToBack:gradientView];

但是,执行此操作的最佳方法可能是不为此使用接口生成器,而不要创建UITableViewCell的子类。对于高级定制而言,根据我的经验,界面生成器只会使事情变得更加复杂。不过,这取决于个人喜好。

这适用于Swift 3.0 :(已针对Swift 4.0更新)

@IBDesignable
final class GradientView: UIView {
    @IBInspectable var startColor: UIColor = UIColor.clear
    @IBInspectable var endColor: UIColor = UIColor.clear

    override func draw(_ rect: CGRect) {
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.frame = CGRect(x: CGFloat(0),
                                y: CGFloat(0),
                                width: superview!.frame.size.width,
                                height: superview!.frame.size.height)
        gradient.colors = [startColor.cgColor, endColor.cgColor]
        gradient.zPosition = -1
        layer.addSublayer(gradient)
    }
}

在此处输入图片说明

在此处输入图片说明

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = yourView.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)    [[UIColor whiteColor] CGColor], nil];
[yourView.layer insertSublayer:gradient atIndex:0];

是的,这是可能的:以1 X高度像素渐变图像。将此设置为backgroundColor作为单元格。

cell.backgroundColor =  [UIColor colorWithPatternImage:[UIImage imageNamed:@"gradImage.png"]];

**您可以使用代码设置渐变色,但需要花费时间。如果您填充得更好,则进行搜索。

etayluz的回答工作正常,但我添加了一些更改:

  1. 渐变大小由自己的图层范围定义,而不是由父视图定义。
  2. 在每个绘图上都删除渐变层,以便它不会保留绘图,并在需要重绘时(例如通过调用.setNeedsDisplay()旋转)添加新图层

    @IBDesignable final class MFGradientView: UIView {
    
        @IBInspectable var startColor: UIColor = UIColor.clear
        @IBInspectable var endColor: UIColor = UIColor.clear
    
        override func draw(_ rect: CGRect) {
           layer.sublayers?.first?.removeFromSuperlayer()
    
           let gradient: CAGradientLayer = CAGradientLayer()
           gradient.frame = CGRect(origin: CGPoint.zero, size: self.bounds.size)
           gradient.colors = [startColor.cgColor, endColor.cgColor]
           layer.insertSublayer(gradient, at: 0)
        }
    } 
    

基于etayluz答案,我通过考虑UIViewlayerClass属性对代码进行了一些更改,因此您不需要单独的层作为子层。

我认为它更清洁,并且还可以与Interface Builder中的实时更新一起使用。

@IBDesignable final class GradientView: UIView {

    @IBInspectable var startColor: UIColor = UIColor.red
    @IBInspectable var endColor: UIColor = UIColor.blue

    override class var layerClass: AnyClass {
        get {
            return CAGradientLayer.self
        }
    }

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

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupGradient()
    }

    private func setupGradient() {
        let gradient = self.layer as! CAGradientLayer
        gradient.colors = [startColor.cgColor, endColor.cgColor]
    }

}

使用@IBInspectable属性创建一个简单的视图类。

  1. 一次创建渐变层
  2. 重用渐变图层的每个布局子视图

...

//
//  GradientView.swift
//
//  Created by Maksim Vialykh on 23.08.2018.
//  Copyright © 2018 Vialyx. All rights reserved.
//

import UIKit

class GradientView: UIView {

    @IBInspectable
    var startColor: UIColor = .white

    @IBInspectable
    var endColor: UIColor = .black

    private let gradientLayerName = "Gradient"

    override func layoutSubviews() {
        super.layoutSubviews()

        setupGradient()
    }

    private func setupGradient() {
        var gradient: CAGradientLayer? = layer.sublayers?.first { $0.name == gradientLayerName } as? CAGradientLayer
        if gradient == nil {
            gradient = CAGradientLayer()
            gradient?.name = gradientLayerName
            layer.addSublayer(gradient!)
        }
        gradient?.frame = bounds
        gradient?.colors = [startColor.cgColor, endColor.cgColor]
        gradient?.zPosition = -1
    }

}

我不知道是否有渐变选项,但是您可以将UIImageView添加到自定义单元格并添加带有渐变的图像。

No, you can't. You could use UISegmentedControl with one segment in older sdk and xCode versions:
http://chris-software.com/index.php/2009/05/13/creating-a-nice-glass-buttons/
But now you can't make less than two segments in one UISegmentedControl. And even this way you couldn't change the default colors of the buttons without coding.

本文地址:http://ios.askforanswer.com/youmeiyoubanfazaijiemiangoujianqizhongzhizuojianbianbeijingyanse.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!