#18 – Picker View i jego zastosowanie

Picker View możemy określić jako pewnego rodzaju list wyboru z typowo dla iOS’a nadanym odpowiednim stylem pasującym do designu całego systemu. Krótko mówiąc jest to pewnego rodzaju lista w formie rolera lub półkola, który serwujemy gestami w górę lub w dół. W przypadku mojego projektu znajdzie on zastosowane podczas wyboru protokołu.

Na samym początku w widoku dodajemy picker view, który po prostu przeciągamy na ekran.

Picker View

Następnie podpinamy delegate i data source, identycznie jak w przypadku table view.

datsSource i delegate

Gdy mamy wszystko ustawione w odpowiednich miejscach na widoku, możemy przejść do wstawienia danych w picker view. Na samym początku rozszerzamy nasz kontroler o nowe metody.

class ProtocolsViewController: UIViewController, UIPickerViewDelegate,  UIPickerViewDataSource 

Następnie tworzymy tabelę z listą opcji w Picer View. W przypadku mojej aplikacji jest to tabela wielowymiarowa, ponieważ zawiera zarówno pełne nazwy jak i skróty.

var protocols = [
        ["name": "SP1", "full-name": "ISO 15765-4 CAN (11 bit ID, 500 kbaud)"],
        ["name": "SP2", "full-name": "ISO 15765-4 CAN (29 bit ID, 500 kbaud)"],
        ["name": "SP3", "full-name": "ISO 15765-4 CAN (11 bit ID, 250 kbaud)"],
        ["name": "SP4", "full-name": "ISO 15765-4 CAN (29 bit ID, 250 kbaud)"]
    ]

Następnie wypełniamy poniższe metody, dotyczące zdarzeń na naszej liście

    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return (protocols.count) // ilość elementów
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return protocols[row]["full-name"] // nazwy elementów
    }
    
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        protocolName = protocols[row]["name"] // tutaj info co ma się dziać gdy coś wybierzemy na liście
    }

Po wypełnieniu metod, możemy uruchomić całą aplikację i sprawdzić jej działanie. W moim przypadku wybór czegokolwiek na liście spowoduje zapis skróconej nazwy do pewnej zmiennej, którą wykorzystam w dalszej części do identyfikacji protokołu.

Dodaj komentarz