Dynamically change UIView width based on a number in UILabel - ios

Question

I have a UIView that displays like a bar and its width should change based on a NSNumber value displayed on a UILabel.
Image below shows the ui
For instance: As shown in the image, all 3 orange bars have different values. I need the bar's width should also be different based on the value. The bars with value 14 and 10 should be less in width than the bar with value 18.
Following is the code I wrote but it doesn't work.
//Get the value as string
NSString *countString = cell.numberOfTuneIn.text;
//MAximum size of the bar
CGSize maxSize = CGSizeMake(cell.numberOfTuneIn.bounds.size.width, CGFLOAT_MAX);
CGRect s = [countString boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:#{NSFontAttributeName:cell.numberOfTuneIn.font} context:nil];
//set the frame of the bar
CGRect rect = cell.barView.frame;
rect.size.width = s.size.width;
cell.barView.frame = rect;
Can someone please help with:
How do I change the width of the bar based on the value?

Answer 1

This is the basic logic you should follow:
Get bar number range (e.g. 0-100)
Get width pixel range (e.g. 0-320)
Create ratio (e.g. 320 / 100) or 3.2 pixels of width for each 1 you
increment...
So according to the example above:
If the bar is 100, it's width is 100 * 3.2 = 320 px width
If the bar is 50, it's width is 50 * 3.2 = 160 px width
Hope it helped.
- (CGFloat)getViewlWidth:(float)labelValue {
// Setup view bar settings, you can take those settings outside of this method if needed
int maxLabelValue = 100;
int viewMaxWidth = 320; // You can make it dynamic according to screen width
float widthPixelRatio = viewMaxWidth / maxLabelValue;
// Calculate width
CGFloat pixelsResult = labelValue * widthPixelRatio;
// Return value
return pixelsResult;
}
// Lets assume that here you get the label value from the server and you called it labelValue
NSString * labelValue = // Value from server
/*
Create UILabel here, showing the value from server
*/
// Get the width of the UIView to be
CGFloat myViewWidth = [self getViewlWidth:[labelValue floatValue]];
/*
Create the UIView here and set its witdh to the result of the CGFloat above (myViewWidth)
*/