Pablo Garcia

Apps for iPhone, iPad, Apple TV and Apple Watch

Level Indicators

Oct 31, 2018

I have no idea about design, but I think I can appreciate beautiful ones. And that's what happened when I saw UX mobile instagram account ... and I felt in love with this one:

So I decided to do a swift control, and here is the result.

You have a fully functional example at my Github

It's very easy to use:

  • Create an array of parameters:
let parameters = [ItemParameters(title: "nO2 Band", titleColor: UIColor.purple, level: .low), ItemParameters(title: "o3 Band", titleColor: UIColor.yellow, level: .medium), ItemParameters(title: "pM10 Band", titleColor: UIColor.green, level: .high), ItemParameters(title: "pM25 Band", titleColor: UIColor.orange, level: .low)]

(The level parameter is not used, but maybe in future revisions we will use it)

  • Create the PGLevelIndicator object:
let levelIndicator = PGLevelIndicator(frame: CGRect(x: 0, y: 100, width: self.view.frame.size.width, height: self.view.frame.size.width), itemsParameters: parameters)

  • And finally, add to the main view
self.view.addSubview(levelIndicator!)

Thanks for reading!!!