Set the background color only for the UIView part

Question

I want the bottom (not exactly half) of my UIView to be a different color than the top.

I am wondering if I should create a CGRect and then a color? Is this the right way?

- (void)drawRect:(CGRect)rect { CGRect aRect = CGRectMake(x, y, width, height); // Fill the rectangle with grey [[UIColor greyColor] setFill]; UIRectFill( rect ); } 

Answer 1

Yes, since you are already using the drawRect method, this will do.

 - (void)drawRect:(CGRect)rect { CGRect topRect = CGRectMake(0, 0, rect.size.width, rect.size.height/2.0); // Fill the rectangle with grey [[UIColor greyColor] setFill]; UIRectFill( topRect ); CGRect bottomRect = CGRectMake(0, rect.size.height/2.0, rect.size.width, rect.size.height/2.0); [[UIColor redColor] setFill]; UIRectFill( bottomRect ); } 

Change the values ​​inside the frames as you wish.

Answer 2

With Swift 4 and iOS 11, according to your needs, you can choose one of two ways to solve your problem.

---

# 1. Draw and populate the specified CGRect instance with the CGRect instance inside the UIView subclass using the UIRectFill(_:) function

UIKit provides the UIRectFill(_:) function. UIRectFill(_:) has the following declaration:

 func UIRectFill(_ rect: CGRect) 

Fills the specified rectangle with the current color.

The following pad code shows how to use UIRectFill(_:) :

 import UIKit import PlaygroundSupport class CustomView: UIView { override init(frame: CGRect) { super.init(frame: frame) backgroundColor = UIColor.green } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func draw(_ rect: CGRect) { super.draw(rect) let bottomRect = CGRect( origin: CGPoint(x: rect.origin.x, y: rect.height / 2), size: CGSize(width: rect.size.width, height: rect.size.height / 2) ) UIColor.red.set() UIRectFill(bottomRect) } } let view = CustomView(frame: CGRect(x: 0, y: 0, width: 200, height: 200)) PlaygroundPage.current.liveView = view 

---

# 2. Draw and populate the specified CGRect instance with the CGRect instance inside the UIView subclass using the CGContext fill(_:) method

CGContext has a method called fill(_:) . fill(_:) has the following declaration:

 func fill(_ rect: CGRect) 

Colors the area contained in the provided rectangle using the fill color in the current state of the graphic.

The following playground code shows how to use fill(_:) :

 import UIKit import PlaygroundSupport class CustomView: UIView { override init(frame: CGRect) { super.init(frame: frame) backgroundColor = UIColor.green } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func draw(_ rect: CGRect) { super.draw(rect) let bottomRect = CGRect( origin: CGPoint(x: rect.origin.x, y: rect.height / 2), size: CGSize(width: rect.size.width, height: rect.size.height / 2) ) UIColor.red.set() guard let context = UIGraphicsGetCurrentContext() else { return } context.fill(bottomRect) } } let view = CustomView(frame: CGRect(x: 0, y: 0, width: 200, height: 200)) PlaygroundPage.current.liveView = view 

Answer 3

You can use this code. Please modify CGRect according to your desire.

 - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGRect topView = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height / 2); CGRect bottomView = CGRectMake(0, [UIScreen mainScreen].bounds.size.height / 2, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height / 2); UIColor * grayColor = [UIColor colorWithRed:230.0/255.0 green:230.0/255.0 blue:230.0/255.0 alpha:1.0]; CGContextSetFillColorWithColor(context, grayColor.CGColor); CGContextFillRect(context, bottomView); CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor); CGContextFillRect(context, topView); } 

The following link may help you more. http://www.raywenderlich.com/32925/core-graphics-tutorial-shadows-and-gloss

Answer 4

You can make a CGRect and fix part of the part to fill.

But why not try two different UIViews located next to each other?

Bharat

Answer 5

Override the drawRect method of your UIView subclass. The following code will make the top half of your view black and the bottom half red.

 // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { // Top View CGRect topRect = {CGRectGetMinX(self.bounds), CGRectGetMinY(self.bounds), CGRectGetMaxX(self.bounds), CGRectGetMaxY(self.bounds)}; [[UIColor blackColor] setFill]; UIRectFill(topRect); // Bottom View CGRect bottomRect = {CGRectGetMinX(self.bounds), CGRectGetMidY(self.bounds), CGRectGetMaxX(self.bounds), CGRectGetMidY(self.bounds)}; [[UIColor redColor] setFill]; UIRectFill(bottomRect); } 

NOTE. You can also override the drawRect: method when subclassing UIView. Based on your comment, I feel that this is not what you are doing.

Answer 6

You can also add CALayer as a sublayer for your presentation. Enable Framework CoreGraphics and QuartzCore and create a CGRect with the desired form factor in the drawRect method. Create a CALayer using the rectangle and add it to the view layer using [self.layer addSublayer: theLayer]. Before adding, use the CALayer -setBackgroundColor: method.

If it is inside the View controller and not a subclass of View, do the same in the viewDidLoad method.

Brian