Prototyping with UISliders

Sometimes when prototyping designs, it just comes down to trial and error. Wouldn’t it be great if this can be done without recompiling?

UISlider to the rescue

I created a utility class to setup and attach a UISlider to adjust the constants of a NSLayoutConstraint.

Example 1

let constraint = topView.topAnchor.constraint(equalTo: view.topAnchor, constant: 20))
SliderFactory.main.addSlider(named: "Top", for: constraint, minValue: 20, maxValue: 64)

Example 2

Here’s a slightly more complicated example.

let adjustableConstraints = [
  ("top", topView.topAnchor.constraint(equalTo: view.topAnchor, constant: 64)),
  ("left", topView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 12)),
  ("right", topView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -12)),
  ("height", topView.heightAnchor.constraint(equalToConstant: 53.0)),
  ("between", bottomView.topAnchor.constraint(equalTo: topView.bottomAnchor, constant: 20)),
]
for (name, constraint) in adjustableConstraints {
  NSLayoutConstraint.activate([constraint])
  let min = constraint.constant - 50
  let max = constraint.constant + 50
  SliderFactory.main.addSlider(named: name, for: constraint, minValue: min, maxValue: max)
}

Example 3

It’s also possible to prototype other types of designs such as a parametric drawings. This is accomplished by passing in a pointer to the variable of interest and adding a callback to redraw.

Things to explore

These are just a few examples of what is possible with using sliders to dynamically modify variables at runtime. Some other ideas I plan on exploring:

• Tapping a view brings up sliders specific to the constraints of that view
• Run an iPhone app inside an iPad with side controls to adjust individual properties

I’d be curious if you have other suggestions. You can find the full source here.