How to achieve horizontal scaling view in iOS?

Question

I have used TSRDialScrollView library to do as per the design requirement in my code.

But couldn't solve few issues.

Referred from below link :

https://www.cocoacontrols.com/controls/trsdialscrollview

I have made few changes in my code

-> To clear background color

CGContextRef context = UIGraphicsGetCurrentContext();
[[UIColor clearColor] set];
CGContextFillRect(context, rect);

But it is displaying black color.

-> Setting label after view is inverted

- (void)drawLabelWithContext:(CGContextRef)context
                     atPoint:(CGPoint)point
                        text:(NSString *)text
                   fillColor:(UIColor *)fillColor
                 strokeColor:(UIColor *)strokeColor {


    // We want the label to be centered on the specified x value
    NSInteger label_y = ((point.y-100) - (boundingBox.width / 2));
}

-> Inverted the whole view by changing minor and major tick length to negative in code.

- (void)drawTicksWithContext:(CGContextRef)context atX:(long)x
{
    CGPoint point = CGPointMake(x, self.frame.size.height);
    CGContextSetShadowWithColor(
                                context,
                                self.shadowOffset,
                                self.shadowBlur,
                                self.shadowColor.CGColor);

    if ([self isMajorTick:x]) {
        [self drawMajorTickWithContext:context
                               atPoint:point
                             withColor:self.majorTickColor
                                 width:self.majorTickWidth
                                length:-self.majorTickLength];
        // Draw the text
        //
        // 1) Take the existing position and subtract off the lead spacing
        // 2) Divide by the minor ticks to get the major number
        // 3) Add the minimum to get the current value
        //
        int value = (point.x - self.leading) / self.minorTickDistance + _minimum;

        NSString *text = [NSString stringWithFormat:@"%i", value];
        [self drawLabelWithContext:context
                           atPoint:point
                              text:text
                         fillColor:self.labelFillColor
                       strokeColor:self.labelStrokeColor];

    } else {

        CGContextSaveGState(context);
        [self drawMinorTickWithContext:context
                               atPoint:point
                             withColor:self.minorTickColor
                                 width:self.minorTickWidth
                                length:-self.minorTickLength];
        // Restore the context
        CGContextRestoreGState(context);
    }
} 

I want scaling to be done as shown below.

1) By adjusting the offset, the view of scrollview should be in middle.(i,e when it is scrolled to minimum value the position of 0 is not at the middle of the view).

2) I want the background color to be clear color.

3) As per the design how to set red color to the middle line which is to be fixed?

4) How to display light grey color in the middle as shown in image ?

I appreciate your help, and please suggest how to achieve this,really i need to complete this task it is very much needed.

Thanks in advance.

Answer 1

TRSDialView.m

file :-

In - (instancetype)initWithFrame:(CGRect)frame add self.opaque = NO;

Inside - (void)drawRect:(CGRect)rect method add following code below CGContextRef context = UIGraphicsGetCurrentContext(); code of line

    // Fill the background
    CGContextSetFillColorWithColor(context, self.backgroundColor.CGColor);

   // CGContextFillRect(context, rect);
    CGContextClearRect(context, rect);

The above code will clear background color.

To adjust offset add width constraint to TRSDialView in Storyboard

The red line and grey view can be added as subview in storyboard