How we created custom scale view element in iOS

In today’s post, we will go through the custom Scale view element iOS. With simple implementation, you can get a fully custom view that acts as a scrollable scale. The idea behind this control was to get a custom UI that will receive min/max scale number, and then according to the difference and index of the big line, draw the lines similar to weight scale.
How we created custom scale view element in iOS


The hardest thing about this custom UI control is deciding which way the lines will be drawn and how many of them. Only viable solution is to first draw used scale lines, which have a starting point at the middle of the view. After used lines are drawn and the right side of unused lines, continue with drawing of the left side of unused line to fill up the empty part of screen.

        for index in 0 ... (numberOfUnusedLines + numberOfUsedLines*unusedLinesMultiplier + numberOfUsedLines%self.scalingValue)
            drawScaleLine(offset: linesWithSpaceWidth*(index) + Int(self.bounds.size.width/2), color:(index > numberOfUsedLines) ? unusedLinesColor : usedLinesColor, addLabel:numberOfUsedLines >= index, bigLine: (index + Int(minValue))%self.scalingValue == 0)
        for index in 1 ... numberOfUnusedLines*unusedLinesMultiplier
            drawScaleLine(offset: Int(self.bounds.size.width/2) - linesWithSpaceWidth*(index), color:unusedLinesColor, addLabel: false, bigLine: (index + self.scalingValue - Int(minValue))%self.scalingValue == 0)
        self.scaleContainerView.frame = CGRect(x: 0, y: 0, width: linesWithSpaceWidth*numberOfUsedLines + Int(self.frame.size.width), height: Int(self.frame.size.height))
        scaleScrollView.contentSize = self.scaleContainerView.frame.size

After the lines are drawn, the view, that contains the lines, is added as subview in ScrollView and then his size is used as content size for the scaleScrollView.
Now that we have the solution for drawing line lets, start with adding other customizable parts.

    var numberOfUsedLines: Int = 10
    var numberOfUnusedLines: Int = Int(UIScreen.main.bounds.size.width/2)/5
    var minValue: Float = 0
    var maxValue: Float = 0
    var lineWidth = 1
    var linesSpacing = 4
    var usedLinesColor =
    var unusedLinesColor = UIColor.lightGray
    var mainLinesLabelPercentHeightValue = 0.5
    var subLinesLabelPercentHeightValue = 0.75
    var scalingValue = 5
    var indicatorWidth: CGFloat = 1
    var indicatorColor: UIColor =
    var scaleLabelFont = UIFont(name: "Futura", size: 8)
    var scaleLabelColor =
    var shouldShowHorizontalScrollIndicator = false
    var useBounces = false

The main parameters are min and max variables, which will determine the number of drawn lines in scale (numberOfUsedLines).
linesWidth is used for width of drawn lines in pixels.
linesSpacing is used for distance between drawn lines.
usedLinesColor, unusedLinesColor, mainLinesLabelPercentHeightValue and subLinesLabelPercentHeightValue are used to set the color/heigt of drawn lines
indicatorWidth and indicatorColor are used width/colour of vertical line indicator
scalingValue is used to determine the index when the big line will be drawn
scaleLabelFont and scaleLabelColor are used for changing the style of labels added over the big lines
shouldShowHorizontalScrollIndicator, disable/enable scroll indicator
useBounces, disable/enable bounces

All of the variables have predefined default values. After changing any of these parameters, the method reloadScaleData() needs to be called, so the changes will be applied to scaleView and the line will be redrawn.

The implementation is pretty simple because ScaleView allows adding programmatically as a subview, and through .xib/.storyboard
In the example, we will add it through .storyboard
How we created custom scale view element in iOS
View is added to storyboard as class ScrollableScaleView and connected as variable testScrollableView.
  @IBOutlet weak var testScrollableView: ScrollableScaleView!

After building/running the project we can start adding custom values for this scale view.

How we created custom scale view element in iOS
 testScrollableView.minValue = min
        testScrollableView.maxValue = max
        testScrollableView.lineWidth = width
        testScrollableView.indicatorWidth = CGFloat(3)
        testScrollableView.linesSpacing = spacing
        testScrollableView.indicatorColor =  UIColor.init(red: 118.0/255.0, green: 221.0/255.0, blue: 251.0/255.0, alpha: 1)
        testScrollableView.usedLinesColor = UIColor.init(red: 23.0/255.0, green: 39.0/255.0, blue: 81.0/255.0, alpha: 0.12)
        testScrollableView.unusedLinesColor = UIColor.init(red: 23.0/255.0, green: 39.0/255.0, blue: 81.0/255.0, alpha: 0.05)
        testScrollableView.shouldShowHorizontalScrollIndicator = false
        testScrollableView.updateScaleLabelsWith(newFont: UIFont(name: "Futura", size: 10)!, newColor: UIColor.init(red: 23.0/255.0, green: 39.0/255.0, blue: 81.0/255.0, alpha: 0.12))

Values min, max, width, spacing are used from the designated textField-s


Working on this custom UI element was quite challenging and fun since there was a need for trying different approaches and solutions to get desired UI behavior.

Explore next

Related posts

We use cookies to optimize our website. By using our services, you agree to our use of cookies.