W tej części zajmiemy się układem widoku z lista komend OBD, do tego celu użyjemy Table View i Navigation Bar.

Dodajemy na samą górę widoku Navigation Bar, oraz Bar Button Item w lewym rogu. Elementy te po prostu przeciągamy na widok na sama górę.

Navigation Bar

Następnie w ustawieniach elementów nadajemy im odpowiednie nazwy. Dla przycisku będzie to powrót, ponieważ zostaniem do niego przypisane zdarzenie zamknięcia widoku. A dla Navigation Bar wpisujemy tytuł okna czyli „Komendy OBD”. Następnie wstawiamy Table View, ustawiamy mniej więcej na całą szerokość i wysokość naszego widoku, a następnie w opcji prototype cell wybieram wartość 1, aby móc zaprojektować wygląd jednego wiersza.

TableView

Gdy już mamy wstępny wygląd możemy przejść do projektowania pojedynczego wiersza. Będzie on składał się z dwóch wartości tekstowych (Label) odpowiedzialnych za nazwę komendy i jej krótki opis.  Całość powinna wyglądać tak jak poniżej.

Prototype cell

Teraz dodamy zdarzenie zamknięcia widoku i powrotu do menu, gdy wciśniemy przycisk powrót. W tym celu przeciągamy przycisk do kodu kontrolera, w ustawieniach wybieramy Action, a następnie nazywamy backBtnPressed. Teraz wewnątrz nowo utworzonej metody dodajemy jedną linijkę kodu z wywołaniem dismissViewControllerAnimated. Ustawiamy tylko czy chcemy aby podczas zamykania była animacja czy tez nie i gotowe.

@IBAction func backBtnPressed(sender: AnyObject) {
        self.dismissViewControllerAnimated(true, completion: nil)
    }

Teraz zajmiemy się pojedyncza komórką na liście. W tym celu zrobimy tablicę, która będzie zawierać kilka komend wraz z opisem. Na samym początku klikamy na table view i przeciągamy na zółtą ikonkę nad widokiem i ustawiamy delegate i data source.

delegate i dataSource

Następnie w kodzie kontrolera obsługującego i widok dodajemy do pierwszej linii:

class OBDViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

Teraz zajmiemy się tworzeniem nowego pliku cocoa touch class ale tym razem będzie to TableViewCell (UITableViewCell). Przypisujemy kontroler do naszego pojedynczego wiersza. A następnie przeciągamy do kodu kontrolera dwa label’e, odpowiednio je nazywając.

@IBOutlet weak var labelName: UILabel!
@IBOutlet weak var labelDescription: UILabel!

Następnie w kontrolerze widoku listy OBD tworzymy przykładowa tabelę z kilkoma elementami, aby zaprezentować działanie listy.

var commands = [
        ["name": "ATZ", "command": "Reset device"],
        ["name": "ATRV", "command": "Get Voltage"],
        ["name": "ATM", "command": "Monitor frames"]
    ]

Teraz dodajmy dwie metody odpowiedzialne za połączenie naszych danych z listą

internal func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return (commands.count)
    }

    internal func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! TableViewCell
        
        cell.labelName.text = commands[indexPath.row]["name"]
        cell.labelDescription.text = commands[indexPath.row]["description"]
        
        return (cell)
    }

W powyższym kodzie przypisujemy do labeli dane z naszej tabeli, a takze ustawiamy ilośc elementów listy. Jeżeli wszystko dodamy poprawnie możemy juz uruchomić aplikację. Jak widać lista załadowała się poprawnie z trzema komendami.

podgląd table view

Możemy dodać więcej elementów aby móc przewijać lisę, ale w kolejnych etapach zajmiemy się dynamicznym pobieraniem tej listy z serwera. Póki co zapisujemy wprowadzone zmiany i wysyłamy do repozytorium.