Fill Uiview with Color Based on Percentage

Fill UIView with color based on percentage

If you want to fill multiple color in your uiview then you need to subclass UIView and should override it's drawRect method something like,

 override func drawRect(rect: CGRect) {

    var percentage = CGFloat()  //can declare as instance variable or globally which you get from web service and set it's value!!

    percentage = 0.5

    let upperRect = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height*percentage)

    let lowerRect = CGRectMake(rect.origin.x, rect.origin.y + (rect.size.height * percentage), rect.size.width, rect.size.height * (1-percentage))

    UIColor.redColor().set()
    UIRectFill(upperRect)
    UIColor.greenColor().set()
    UIRectFill(lowerRect)

}

How to fill a UITableViewCell with percentage colors

What you can do is add a UIView as a background with a colour. But change the height of the view to be the percentage of the cell height

CGRect frame = cell.frame;
frame.size.height = frame.size.height*0.66; //The 0.66 is the percentage as a decimal
frame.origin.y = cell.frame.size.height - frame.size.height; //adjust where it should start
UIView *bg = [[UIView alloc] initWithFrame:frame];
bg.backgroundColor = [UIColor redColor];
cell.backgroundView = bg;

This would add a UIView to a cell.backgroundView with a colour that starts slightly further down to represent your percentage of fill.

Hope this helps

iOS - Fill bezierPath with multiple colors based on percentage

Here is how you can do this, I have divided the path into 5 parts 20 % of each.

 UIBezierPath* bezierPath = UIBezierPath.bezierPath;
[bezierPath moveToPoint: CGPointMake(50, 50)];
[bezierPath addLineToPoint: CGPointMake(60, 90)];
[bezierPath addLineToPoint: CGPointMake(80, 90)];
[bezierPath addLineToPoint: CGPointMake(90, 50)];

bezierPath.lineCapStyle = kCGLineCapRound;
bezierPath.lineJoinStyle = kCGLineJoinBevel;

[UIColor.redColor setFill];
bezierPath.lineWidth = 4;
[bezierPath stroke];
[bezierPath addClip];

CGRect boundingBox = CGPathGetBoundingBox(bezierPath.CGPath);

CGRect firstTwentyPercent = CGRectMake(boundingBox.origin.x,
                                       boundingBox.origin.y + boundingBox.size.height - 0.2 * boundingBox.size.height,
                                       boundingBox.size.width,
                                        0.2 * boundingBox.size.height);
[[UIColor greenColor] setFill];
UIRectFill(firstTwentyPercent);

CGRect secondTwentyPercent = CGRectMake(boundingBox.origin.x,
                                        boundingBox.origin.y + boundingBox.size.height - 0.4 * boundingBox.size.height,
                                        boundingBox.size.width,
                                        0.2 * boundingBox.size.height);
[[UIColor blueColor] setFill];
UIRectFill(secondTwentyPercent);

CGRect thirdTwentyPercent = CGRectMake(boundingBox.origin.x,
                                        boundingBox.origin.y + boundingBox.size.height - 0.6 * boundingBox.size.height,
                                        boundingBox.size.width,
                                        0.2 * boundingBox.size.height);
[[UIColor redColor] setFill];
UIRectFill(thirdTwentyPercent);

CGRect fourthTwentyPercent = CGRectMake(boundingBox.origin.x,
                                       boundingBox.origin.y + boundingBox.size.height - 0.8 * boundingBox.size.height,
                                       boundingBox.size.width,
                                       0.2 * boundingBox.size.height);
[[UIColor cyanColor] setFill];
UIRectFill(fourthTwentyPercent);

CGRect fifthTwentyPercent = CGRectMake(boundingBox.origin.x,
                                        boundingBox.origin.y,
                                        boundingBox.size.width,
                                        0.2 * boundingBox.size.height);
[[UIColor orangeColor] setFill];
UIRectFill(fifthTwentyPercent);

Fill Rectangle with Color Percentage - Objective C

You can subclass UIView and override it's - (void)drawRect:(CGRect)rect
And do like the following. I hope it may help you.

For Example , Create One class TestView by overriding UIView Class.

TestView.h

#import <UIKit/UIKit.h>
@interface TestView : UIView

@end

TestView.m

#import "TestView.h"

@implementation TestView

- (void)drawRect:(CGRect)rect 
{

    CGRect topRect = CGRectMake(0, 0, rect.size.width, rect.size.height/2.0);
    // Fill the rectangle with grey
    [[UIColor grayColor] 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 );
}

ViewController.m

#import "ViewController.h"
#import "TestView.h"

- (void)viewDidLoad {
    [super viewDidLoad];

    TestView *testView = [[TestView alloc] initWithFrame:CGRectMake(10, 10, 60, 60)];
    testView.backgroundColor = [UIColor greenColor];

    [self.view addSubview:testView];
}

If you're using Interface builder, make sure to change the view's class to YOUR_CUSTOM_VIEW_CLASS. You can do that by selecting in the view in Interface Builder and selecting the "Identity" pane in the inspector (its the one on the far right the the "i" icon).

How to fill a circle color by percentage value?

Your problem is that you are not drawing the full path - an arc alone will not do it. You need to start the path at the centre, and draw the straight edges of the segment as well as the arc. Here it is in Playground - I have tried to keep as much as possible to your style, but have introduced the parameters proportion which is your percentage, and startAngle which is the orientation of the segment.

import UIKit
let roundView = UIView(frame:CGRect(x: 100, y: 100, width: 250, height: 250))
roundView.backgroundColor = UIColor.white
roundView.layer.cornerRadius = roundView.frame.size.width / 2

// vary this to move the start of the arc
let startAngle = -CGFloat.pi / 2  // This corresponds to 12 0'clock
// vary this to vary the size of the segment, in per cent
let proportion = CGFloat(80)
let centre = CGPoint (x: roundView.frame.size.width / 2, y: roundView.frame.size.height / 2)
let radius = roundView.frame.size.width / 2
let arc = CGFloat.pi * 2 * proportion / 100 // i.e. the proportion of a full circle

// Start a mutable path
let cPath = UIBezierPath()
// Move to the centre
cPath.move(to: centre)
// Draw a line to the circumference
cPath.addLine(to: CGPoint(x: centre.x + radius * cos(startAngle), y: centre.y + radius * sin(startAngle)))
// NOW draw the arc
cPath.addArc(withCenter: centre, radius: radius, startAngle: startAngle, endAngle: arc + startAngle, clockwise: true)
// Line back to the centre, where we started (or the stroke doesn't work, though the fill does)
cPath.addLine(to: CGPoint(x: centre.x, y: centre.y))
// n.b. as @MartinR points out `cPath.close()` does the same!

// circle shape
let circleShape = CAShapeLayer()
circleShape.path = cPath.cgPath
circleShape.strokeColor = UIColor.black.cgColor
circleShape.fillColor = UIColor.green.cgColor
circleShape.lineWidth = 1.5
// add sublayer
roundView.layer.addSublayer(circleShape)
roundView

Bonus - add a text label

The OP threw a couple of curved balls after my initial answer, including orienting the segment (implemented above) and labelling the segment with the percentage, which really should have been a separate question, however, it's not an unreasonable thing to want to do on a pie-chart, so here its is...

// Bonus - add text layer
// choose your font
let fontSize = CGFloat(20)
let font = UIFont.systemFont(ofSize: fontSize)
let attributes = [NSFontAttributeName: font]
// Format the string
let str = String(format: "%3.0f%%", proportion)
// Calculate the text size
let textSize = str.size(attributes: attributes)

// Assume the centre of the text is half way along the bisector of the segment
let halfAngle = startAngle + arc / 2
let centreText = CGPoint(x: centre.x + radius * cos(halfAngle) / 2, y: centre.y + radius * sin(halfAngle) / 2)
// calculate the the lower left of the label given the size
let originText = CGPoint(x: centreText.x - textSize.width / 2, y: centreText.y - textSize.height / 2)
// Allocate the text layer
let label = CATextLayer()
label.font = font
label.fontSize = fontSize
label.frame = CGRect(origin: originText, size: textSize)
label.string = str
label.alignmentMode = kCAAlignmentCenter
label.foregroundColor = UIColor.black.cgColor
roundView.layer.addSublayer(label)
roundView

---

Related Topics