Xcode: Zo maak je Playgrounds interactief

3 min leestijd

De Playgrounds van Xcode zijn een handige manier om te experimenteren met Xcode. Je kunt zelfs UIKit-elementen zoals views, buttons en labels in een Playground opnemen, zodat je met UIKit kunt spelen zonder dat je telkens kant-en-klare apps hoeft te bouwen.

De Playgrounds van Xcode zijn dus een ideale manier om dingen uit te proberen, of om Swift te leren. Tot kort was er echter één probleem: Playgrounds waren niet interactief. Het was dus niet mogelijk om bijvoorbeeld een button te testen in een Playground, omdat je er niet op kon klikken.

Playground interactief maken vanaf Xcode 7.3

Vanaf versie 7.3 van Xcode is dat veranderd. Xcode ondersteunt nu volledig interactieve live views.

Het enige dat je hoeft te doen om die interactieve live views te gebruiken, is het XCPlayground-framework te importeren. Vanaf dat moment kun je buttons, sliders en alle andere UIKit-objecten in je Playground gebruiken.

Een voorbeeld zie je hieronder: in deze Playground staat een interactieve slider.

Zodra je de slider beweegt, wordt de inhoud van het label aangepast:

Wil je dit zelf eens proberen? Zorg dan dat je de laatste versie van Xcode (7.3 of later) hebt en typ de volgende Playground over. Dankzij de live view toont Xcode de slider uit de vorige afbeeldingen en zie je, als je de slider verschuift, dat de erboven getoonde waarde interactief verandert.

Tip: Zie je de oranje view niet? Kies dan View, Assistant Editor, Show Assistant Editor.

import UIKit

// Om de interactieve live view te kunnen gebruiken:
import XCPlayground

class ViewController: UIViewController {
  let slider = UISlider()
  let label = UILabel()

  override func viewDidLoad() {
    view.backgroundColor = UIColor.orangeColor()
    
    // De waarden voor de slider:
    slider.minimumValue = 0 // de minimumwaarde
    slider.maximumValue = 1000 // de maximumwaarde
    slider.value = 500 // de huidige waarde
    
    // Zodra je de slider beweegt, wordt .werkLabelBij() aangeroepen:
    slider.addTarget(self, action: #selector(werkLabelBij), forControlEvents: .ValueChanged)

    // De slider aan de view van de viewcontroller toevoegen:
    view.addSubview(slider)

    // Het label krijgt een vet, wat groter font:
    label.font = UIFont.boldSystemFontOfSize(24)
    // Het label aan de view van de viewcontroller toevoegen:
    view.addSubview(label)

    // De tekst in het label geeft de 'waarde' van de slider weer:
    werkLabelBij()
  }

  override func viewWillLayoutSubviews() {
    // We zetten de slider in het midden, maar we houden
    // links en rechts 50 punten vrij:
    slider.frame = CGRectInset(view.frame, 50, 0)
    
    // Het label komt horizontaal ook in het midden, maar
    // we zetten het 40 punten boven de slider:
    label.center.x = slider.center.x
    label.center.y = slider.center.y - 40
  }
  
  func werkLabelBij() {
    // De waarde van de slider bevat cijfers achter de komma:
    // het is een 'float' (eigenlijk een CGFloat). Die cijfers
    // gooien we weg door van die waarde een Int te maken.
    label.text = String(Int(slider.value))
    
    // Nadat we de tekst hebben aangepast, zorgen we dat het label
    // groot genoeg is om die tekst te bevatten:
    label.sizeToFit()
  }
}

// We maken een ViewController zorgen dat hij door Xcode wordt getoond:
XCPlaygroundPage.currentPage.liveView = ViewController()

Heb je geen zin om deze Plagyround over te typen? Klik dan hier om hem, vanaf de website van de iOS Academie, te downloaden.

Apps bouwen met Swift

Wil je meer weten over het maken van je eigen apps voor de iPhone, iPad en Apple Watch? Als appletips-lezer krijg je tien euro korting op het populaire eBook van de iOS Academie: Apps bouwen met Swift. Ook als je nog nooit eerder in je leven hebt geprogrammeerd; met dit populaire eBook leer je om zelf apps te maken. Klik hier voor meer informatie.