CODEWITHSUNDEEP
iosuiview
Sharda Prasad
Sharda Prasad

Reputation: 111

How can i add 3 background colour in single UIView??

I Need to add three colour in single background colour Just like that

Without using 3 UIView or image.

Upvotes: 0

Views: 92

Answers (3)

shivi_shub
shivi_shub

Reputation: 1058

extension UIView {
    func addMultipleColorsHorizontal(colors: [UIColor]) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.bounds

        var colorsArray: [CGColor] = []
        var locationsArray: [NSNumber] = []
        for (index, color) in colors.enumerated() {

            colorsArray.append(color.cgColor)
            colorsArray.append(color.cgColor)
            locationsArray.append(NSNumber(value: (1.0 / Double(colors.count)) * Double(index)))
            locationsArray.append(NSNumber(value: (1.0 / Double(colors.count)) * Double(index + 1)))
        }

        gradientLayer.colors = colorsArray
        gradientLayer.locations = locationsArray
        gradientLayer.startPoint = CGPoint(x: 0, y: 1)
        gradientLayer.endPoint = CGPoint(x: 1, y: 1)

        self.backgroundColor = .clear
        self.layer.addSublayer(gradientLayer)
    }
}

Upvotes: 0

dahiya_boy
dahiya_boy

Reputation: 9503

Use this below func

func addSublayers (_ viewCustom : UIView){
    let layer1 = CAShapeLayer()
    let layer2 = CAShapeLayer()
    let layer3 = CAShapeLayer()

    layer1.frame = CGRect(origin: viewCustom.bounds.origin,
                          size: CGSize(width: viewCustom.frame.size.width/3,
                                       height: viewCustom.frame.size.height))

    layer2.frame = CGRect(x: layer1.frame.size.width,
                          y: layer1.frame.origin.y,
                          width: viewCustom.frame.size.width/3,
                          height: viewCustom.frame.size.height)

    layer3.frame = CGRect(x: layer2.frame.size.width + layer2.frame.origin.x,
                          y: layer2.frame.origin.y,
                          width: viewCustom.frame.size.width/3,
                          height: viewCustom.frame.size.height)

    layer1.backgroundColor =  UIColor.red.cgColor
    layer2.backgroundColor = UIColor.green.cgColor
    layer3.backgroundColor = UIColor.blue.cgColor

    viewCustom.layer.addSublayer(layer1)
    viewCustom.layer.addSublayer(layer2)
    viewCustom.layer.addSublayer(layer3)
}

Output:

enter image description here

Upvotes: 1

Gordon Lee
Gordon Lee

Reputation: 88

Create custom UIView and override the draw(_:) function. Then use the current CGContext and draw according to your preferred size. Example based on the alignment from the given image is shown below:

class CustomView: UIView {
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }

        let firstRect = CGRect(origin: CGPoint(x: rect.origin.x, y: rect.origin.y), size: CGSize(width: rect.size.width / 3, height: rect.size.height))
        let middleRect = CGRect(origin: CGPoint(x: firstRect.maxX, y: rect.origin.y), size: CGSize(width: rect.size.width / 3, height: rect.size.height))
        let lastRect = CGRect(origin: CGPoint(x: middleRect.maxX, y: rect.origin.y), size: CGSize(width: rect.size.width / 3, height: rect.size.height))

        let arrayTuple: [(rect: CGRect, color: CGColor)] = [(firstRect, UIColor.red.cgColor), (middleRect, UIColor.green.cgColor), (lastRect, UIColor.blue.cgColor)]
        for tuple in arrayTuple {
            context.setFillColor(tuple.color)
            context.fill(tuple.rect)
        }
    }
}

Upvotes: 2

Related Questions