Erstellen Sie eine Wetter-App mit Vorhersage - Benutzeroberfläche

German (Deutsch) translation by Valentina (you can also view the original English article)

Im letzten Artikel dieser Reihe werde ich Ihnen zeigen, wie Sie die Benutzeroberfläche unserer Wetteranwendung erstellen. Dank der Arbeit von Chris Carey, einem regelmäßigen Mitarbeiter von Vectortuts+, haben wir ein wunderschönes Design, mit dem wir arbeiten können!

Einführung

Für das Design unserer Wetteranwendung habe ich mit Chris Carey zusammengearbeitet, einem regelmäßigen Mitarbeiter von Vectortuts+. Chris hat ein wunderschönes Design entworfen, mit dem wir die Benutzeroberfläche der Anwendung erstellen können. Nachdem Chris mir das Design als Vektorillustration übergeben hatte, schnitt ich das Kunstwerk in Scheiben und bereitete es für die Verwendung in unserem Projekt vor. Sie finden das geschnittene Bildmaterial in den Quelldateien dieses Artikels.

Create a Weather App with Forecast – User Interface - Chris Carey's Design

Abbildung 1: Entwurf von Chris Carey

Aufgrund der eingeschränkten Anpassbarkeit von UIKit müssen wir bei der Implementierung von Chris 'Design einige Kompromisse eingehen. Das Endergebnis wird jedoch sehr nach dem Design aussehen, das Chris für uns entworfen hat. Das Anpassen der UISwitch-Klasse von UIKit ist beispielsweise sehr begrenzt, und wir werden daher einen anderen Ansatz verwenden, um die Temperatureinstellung zu implementieren. Chris verwendete zwei benutzerdefinierte Schriftarten für sein Design, Maven Pro und Mission Gothic. Obwohl iOS benutzerdefinierte Schriftarten unterstützt, werden nur Schriftarten verwendet, die unter iOS verfügbar sind.

1. Benachrichtigungen

Schritt 1: Erstellen von String-Konstanten

Immer wenn der Wetteransichts-Controller Wetterdaten von der Vorhersage-API empfängt, müssen seine eigene Ansicht und die richtige Ansicht aktualisiert werden. Dies bedeutet, dass wir den Vorhersage-View Controller benachrichtigen und ihm die Wetterdaten senden müssen. Es gibt mehrere Möglichkeiten, den Controller der Vorhersageansicht über ein solches Ereignis zu informieren. Das Versenden einer Benachrichtigung mit NSNotificationCenter ist die einfachste Lösung und bietet uns die größte Flexibilität. Wir können dieselbe Lösung zum Aktualisieren der Benutzeroberfläche verwenden, nachdem der Benutzer die Temperatureinstellung umgeschaltet hat. Durch das Senden einer Benachrichtigung kann sich jedes an diesem Ereignis interessierte Objekt als Beobachter registrieren. Ich habe MTConstants.h/.m aktualisiert, um für jede Benachrichtigung eine Zeichenfolgenkonstante zu erstellen.

1	extern NSString * const MTRainWeatherDataDidChangeChangeNotification;
2	extern NSString * const MTRainTemperatureUnitDidChangeNotification;

NSString * const MTRainWeatherDataDidChangeChangeNotification = @"com.mobileTuts.MTRainWeatherDataDidChangeChangeNotification";

NSString * const MTRainTemperatureUnitDidChangeNotification = @"com.mobileTuts.MTRainTemperatureUnitDidChangeNotification";

Schritt 2: Wetter-View Controller

Nachdem wir eine Antwort von der Vorhersage-API erhalten haben response, müssen wir sie speichern, damit wir sie später zum Aktualisieren der Ansicht verwenden können. Erstellen Sie zwei private Eigenschaften in MTWeatherViewController.m: (1) response (vom Typ NSDictionary), die die Antwort der Vorhersage-API enthält, und (2) forecast (vom Typ NSArray), die eine Teilmenge der Antwort enthält, die Wetterdaten für die nächsten Stunden.

#import "MTWeatherViewController.h"

#import "MTForecastClient.h"

@interface MTWeatherViewController () <CLLocationManagerDelegate> {
    BOOL _locationFound;
}

@property (strong, nonatomic) NSDictionary *location;
@property (strong, nonatomic) NSDictionary *response;
@property (strong, nonatomic) NSArray *forecast;

@property (strong, nonatomic) CLLocationManager *locationManager;

@end

Um Benachrichtigungen zu erhalten, müssen wir initWithNibName:bundle: wie unten gezeigt aktualisieren (MTWeatherViewController.m). In weatherDataDidChangeChange: speichern wir die Antwort der Vorhersage-API in response und forecast und aktualisieren die Ansicht des View-Controllers. In temperaturUnitDidChange müssen wir nur die Ansicht aktualisieren, um die geänderte Einstellung widerzuspiegeln.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];

    if (self) {
        // Initialize Location Manager
        self.locationManager = [[CLLocationManager alloc] init];

        // Configure Location Manager
        [self.locationManager setDelegate:self];
        [self.locationManager setDesiredAccuracy:kCLLocationAccuracyKilometer];

        // Add Observer
        NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];
        [nc addObserver:self selector:@selector(applicationDidBecomeActive:) name:UIApplicationDidBecomeActiveNotification object:nil];
        [nc addObserver:self selector:@selector(reachabilityStatusDidChange:) name:MTRainReachabilityStatusDidChangeNotification object:nil];
        [nc addObserver:self selector:@selector(weatherDataDidChangeChange:) name:MTRainWeatherDataDidChangeChangeNotification object:nil];
        [nc addObserver:self selector:@selector(temperatureUnitDidChange:) name:MTRainTemperatureUnitDidChangeNotification object:nil];
    }

    return self;
}

- (void)weatherDataDidChangeChange:(NSNotification *)notification {
    // Update Response & Forecast
    [self setResponse:[notification userInfo]];
    [self setForecast:self.response[@"hourly"][@"data"]];

    // Update View
    [self updateView];
}

1	- (void)temperatureUnitDidChange:(NSNotification *)notification {
2	// Update View
3	[self updateView];
4	}

Schritt 3: Vorhersage-View-Controller

Die Schritte sind in der MTForecastViewController-Klasse nahezu identisch. Wir aktualisieren initWithNibName:bundle: wie unten gezeigt, erstellen zwei Eigenschaften (response und forecast) und implementieren weatherDataDidChangeChange: und temperaturUnitDidChange:. Der Unterschied sind die in forecast gespeicherten Wetterdaten. Wir werden updateView etwas später in diesem Tutorial implementieren, aber es wird empfohlen, eine Stub-Implementierung zu erstellen, um alle Compiler-Warnungen zu entfernen.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];

    if (self) {
        // Add Observer
        NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];
        [nc addObserver:self selector:@selector(weatherDataDidChangeChange:) name:MTRainWeatherDataDidChangeChangeNotification object:nil];
        [nc addObserver:self selector:@selector(temperatureUnitDidChange:) name:MTRainTemperatureUnitDidChangeNotification object:nil];
    }

    return self;
}

#import "MTForecastViewController.h"

@interface MTForecastViewController ()

@property (strong, nonatomic) NSDictionary *response;
@property (strong, nonatomic) NSArray *forecast;

@end

- (void)weatherDataDidChangeChange:(NSNotification *)notification {
    // Update Response & Forecast
    [self setResponse:[notification userInfo]];
    [self setForecast:self.response[@"daily"][@"data"]];

    // Update View
    [self updateView];
}

1	- (void)temperatureUnitDidChange:(NSNotification *)notification {
2	// Update View
3	[self updateView];
4	}

1	- (void)updateView {
2
3	}

2.Benutzeroberfläche Center-Ansicht

Schritt 1: Ausgänge und Aktionen

Obwohl die mittlere Ansicht viele Informationen enthält, ist die Implementierung nicht so schwierig. Beginnen wir mit der Erstellung einer Reihe von Verkaufsstellen und einer neuen Aktion. Aktualisieren Sie MTWeatherViewController.h wie unten gezeigt. Überdenken Sie Chris Design, um den Ort und den Zweck jedes Benutzeroberflächenelements besser zu verstehen. Der Unterschied zu Chris Design besteht darin, dass wir das Kalendersymbol oben rechts durch die Schaltfläche "Aktualisieren" ersetzen, die wir im vorherigen Tutorial erstellt haben. Die Wetterdaten für die nächsten Stunden werden in einer Sammlungsansicht dargestellt. Dies bedeutet, dass die MTWeatherViewController-Klasse den Protokollen UICollectionViewDataSource, UICollectionViewDelegate und UICollectionViewDelegateFlowLayout entsprechen muss.

#import <UIKit/UIKit.h>

#import "MTLocationsViewController.h"

@interface MTWeatherViewController : UIViewController <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, MTLocationsViewControllerDelegate>

@property (weak, nonatomic) IBOutlet UIButton *buttonLocation;
@property (weak, nonatomic) IBOutlet UIButton *buttonRefresh;

@property (weak, nonatomic) IBOutlet UILabel *labelDate;
@property (weak, nonatomic) IBOutlet UILabel *labelTemp;
@property (weak, nonatomic) IBOutlet UILabel *labelTime;
@property (weak, nonatomic) IBOutlet UILabel *labelWind;
@property (weak, nonatomic) IBOutlet UILabel *labelRain;
@property (weak, nonatomic) IBOutlet UILabel *labelLocation;

@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;

@end

Wir müssen auch eine Aktion für die Standortschaltfläche oben links hinzufügen. Öffnen Sie MTWeatherViewController.m und fügen Sie eine neue Aktion mit dem Namen openLeftView: hinzu. In openLeftView: weisen wir den View Deck Controller des View Controllers an, die linke Ansicht umzuschalten. Denken Sie daran, dass Sie auch von links nach rechts wischen können, um die linke Ansicht zu öffnen.

1	- (IBAction)openLeftView:(id)sender {
2	[self.viewDeckController toggleLeftViewAnimated:YES];
3	}

Schritt 2: Erstellen der Benutzeroberfläche

Öffnen Sie MTWeatherViewController.xib und erstellen Sie die Benutzeroberfläche wie in Abbildung 2 dargestellt. Beim Erstellen der Benutzeroberfläche ist es wichtig zu überprüfen, ob die Benutzeroberfläche sowohl auf dem 3,5-Zoll-Bildschirm als auch auf dem 4-Zoll-Bildschirm des iPhone 5 korrekt angezeigt wird. Sie können dies testen, indem Sie die Ansicht des View Controllers auswählen und das Attribut Größe im Attributinspektor ändern. Um das gewünschte Ergebnis zu erzielen, müssen Sie die Autolayout-Einschränkungen der Benutzeroberflächenelemente anpassen. Ziel ist es, dass die Wetterdaten oben in der Ansicht bleiben, während die Sammlungsansicht unten geklebt wird. Die Symbole neben den Beschriftungen für Zeit, Wind und Regen sind Instanzen von UIImageView.

Create a Weather App with Forecast – User Interface - Creating the User Interface of the Weather View Controller

Abbildung 2: Erstellen der Benutzeroberfläche des Wetter-View Controllers

Konfigurieren Sie die Beschriftungen und Schaltflächen wie in Abbildung 2 dargestellt. Dazu gehört das ordnungsgemäße Ausrichten des Beschriftungstextes, das Festlegen der Typen beider Schaltflächen auf Benutzerdefiniert, das Festlegen des Dateibesitzers als dataSource und delegate der Sammlungsansicht sowie das Festlegen der Bildlaufrichtung der Sammlungsansicht Flusslayout nach horizontal. Ich bin ein Fan von Gill Sans, daher habe ich diese Schriftart für dieses Projekt ausgewählt. Verbinden Sie die zuvor erstellten Steckdosen und Aktionen, bevor Sie zur Implementierungsdatei des Wetter-View Controllers zurückkehren. Zusätzlich zu den Beschriftungen und Schaltflächen habe ich der Ansicht des View-Controllers eine Bildansicht hinzugefügt, um das Hintergrundbild anzuzeigen.

Wie bereits in der Einleitung erwähnt, finden Sie die Grafik der Anwendung in den Quelldateien dieses Tutorials. Erstellen Sie in Ihrem Xcode-Projekt einen Ordner mit dem Namen Artwork und ziehen Sie das Artwork in diesen Ordner.

Schritt 3: Auffüllen der Benutzeroberfläche

Derzeit protokollieren wir die Antwort der Vorhersage-API in der Xcode-Konsole. Um die Wetterdaten verwenden zu können, müssen wir die fetchWeatherData-Methode wie unten gezeigt aktualisieren. Im Abschlussblock von requestWeatherForCoordinate:completion: verbergen wir das Fortschritts-HUD und senden eine Benachrichtigung an den Hauptthread. Wir verwenden die Funktion dispatch_async und übergeben die Warteschlange des Hauptthreads als erstes Argument. Das userInfo-Wörterbuch der Benachrichtigung ist die Antwort auf die Anforderung.

- (void)fetchWeatherData {
    if ([[MTForecastClient sharedClient] networkReachabilityStatus] == AFNetworkReachabilityStatusNotReachable) return;

    // Show Progress HUD
    [SVProgressHUD showWithMaskType:SVProgressHUDMaskTypeGradient];

    // Query Forecast API
    double lat = [[_location objectForKey:MTLocationKeyLatitude] doubleValue];
    double lng = [[_location objectForKey:MTLocationKeyLongitude] doubleValue];
    [[MTForecastClient sharedClient] requestWeatherForCoordinate:CLLocationCoordinate2DMake(lat, lng) completion:^(BOOL success, NSDictionary *response) {
        // Dismiss Progress HUD
        [SVProgressHUD dismiss];

        if (response && [response isKindOfClass:[NSDictionary class]]) {
            dispatch_async(dispatch_get_main_queue(), ^{
                // Post Notification on Main Thread
                NSNotification *notification = [NSNotification notificationWithName:MTRainWeatherDataDidChangeChangeNotification object:nil userInfo:response];
                [[NSNotificationCenter defaultCenter] postNotification:notification];
            });
        }
    }];
}

Die Wetter- und Vorhersage-View-Controller sind beide Beobachter von MTRainWeatherDataDidChangeChangeNotification-Benachrichtigungen. Der Weather View Controller ruft weatherDataDidChangeChange: auf, was wiederum updateView aufruft. In updateView rufen wir updateCurrentWeather auf und aktualisieren die Sammlungsansicht, indem wir eine Nachricht von reloadData senden.

- (void)updateView {
    // Update Location Label
    [self.labelLocation setText:[self.location objectForKey:MTLocationKeyCity]];

    // Update Current Weather
    [self updateCurrentWeather];

    // Reload Collection View
    [self.collectionView reloadData];
}

Bevor wir updateCurrentWeather implementieren, möchte ich einen kleinen Umweg machen. Wir werden Temperaturwerte an verschiedenen Stellen der Anwendung anzeigen. Da wir sowohl Fahrenheit als auch Celsius unterstützen, kann dies umständlich werden. Es ist daher nützlich, eine Klasse zu erstellen, die diese Logik zentralisiert, damit wir unsere Codebasis nicht mit if-Anweisungen und Temperaturkonvertierungen überladen müssen.

Schritt 4: Erstellen der Einstellungsklasse

Bevor wir die Klasse erstellen, die Temperaturkonvertierungen verarbeitet, müssen wir in der Lage sein, die aktuelle Temperatureinstellung in der Standarddatenbank des Benutzers zu speichern. Besuchen Sie MTConstants.h/.m erneut und deklarieren Sie eine Zeichenfolgenkonstante mit dem Namen MTRainUserDefaultsTemperatureUnit.

1	extern NSString * const MTRainUserDefaultsTemperatureUnit;

1	NSString * const MTRainUserDefaultsTemperatureUnit = @"temperatureUnit";

Um das Arbeiten mit Einstellungen zu vereinfachen, erstelle ich häufig eine Kategorie in NSUserDefaults, mit der ich schnell und elegant auf die Einstellungen der Anwendung zugreifen kann. Lassen Sie mich Ihr zeigen, was ich meine. Erstellen Sie eine neue Objective-C-Kategorie (Abbildung 3), benennen Sie die Kategorie Helfer und machen Sie sie zu einer Kategorie in NSUserDefaults (Abbildung 4). In NSUserDefaults + Helpers.h deklarieren wir drei Klassenmethoden, wie unten gezeigt.

Create a Weather App with Forecast – User Interface - Creating a New Objective-C Category

Abbildung 3: Erstellen einer neuen Objective-C-Kategorie

Create a Weather App with Forecast – User Interface - Creating a Category on NSUserDefaults

Abbildung 4: Erstellen einer Kategorie in NSUserDefaults

#import <Foundation/Foundation.h>

@interface NSUserDefaults (Helpers)

#pragma mark -
#pragma mark Temperature
+ (BOOL)isDefaultCelcius;
+ (void)setDefaultToCelcius;
+ (void)setDefaultToFahrenheit;

@end

Obwohl diese Methoden nicht magisch sind, sind sie sehr nützlich. Die erste Methode, isDefaultCelcius, gibt an, ob die Temperatureinheit auf Celsius eingestellt ist oder nicht. Die beiden anderen Methoden machen es sehr einfach, zwischen Fahrenheit und Celsius zu wechseln. Wir aktualisieren nicht nur die Benutzerstandarddatenbank, sondern veröffentlichen auch eine Benachrichtigung, die die Beobachter über die Änderung informiert.

+ (BOOL)isDefaultCelcius {
    return [[NSUserDefaults standardUserDefaults] integerForKey:MTRainUserDefaultsTemperatureUnit] == 1;
}

+ (void)setDefaultToCelcius {
    // Update User Defaults
    NSUserDefaults *ud = [NSUserDefaults standardUserDefaults];
    [ud setInteger:1 forKey:MTRainUserDefaultsTemperatureUnit];
    [ud synchronize];

    // Post Notification
    [[NSNotificationCenter defaultCenter] postNotificationName:MTRainTemperatureUnitDidChangeNotification object:nil];
}

+ (void)setDefaultToFahrenheit {
    // Update User Defaults
    NSUserDefaults *ud = [NSUserDefaults standardUserDefaults];
    [ud setInteger:0 forKey:MTRainUserDefaultsTemperatureUnit];
    [ud synchronize];

    // Post Notification
    [[NSNotificationCenter defaultCenter] postNotificationName:MTRainTemperatureUnitDidChangeNotification object:nil];
}

Es ist Zeit, die Einstellungsklasse zu erstellen, über die ich zuvor geschrieben habe. Die Lösung ist überraschend einfach. Erstellen Sie eine neue Objective-C-Klasse, nennen Sie sie MTSettings und machen Sie sie zu einer Unterklasse von NSObject (Abbildung 5). In MTSettings.h deklarieren wir eine Klassenmethode, formatTemperature:. In MTSettings.m importieren wir den Header der Kategorie, die wir vor kurzem erstellt haben, und implementieren formatTemperature: wie unten gezeigt. Die Methode akzeptiert eine Instanz von NSNumber, konvertiert sie in einen Float und gibt eine formatierte Zeichenfolge zurück, die auf der Temperatureinstellung basiert.

Create a Weather App with Forecast – User Interface - Creating the MTSettings Class

Abbildung 5: Erstellen der MTSettings-Klasse

#import <Foundation/Foundation.h>

@interface MTSettings : NSObject

#pragma mark -
#pragma mark Convenience Methods
+ (NSString *)formatTemperature:(NSNumber *)temperature;

@end

1	#import "NSUserDefaults+Helpers.h"

+ (NSString *)formatTemperature:(NSNumber *)temperature {
    float value = [temperature floatValue];

    if ([NSUserDefaults isDefaultCelcius]) {
        value = (value  -  32.0)  *  (5.0 / 9.0);
    }

    return [NSString stringWithFormat:@"%.0f°", value];
}

Bevor wir fortfahren, fügen Sie der vorkompilierten Header-Datei des Projekts eine Importanweisung für die MTSettings-Klasse hinzu, damit wir sie im gesamten Projekt verwenden können.

#import <Availability.h>

#ifndef __IPHONE_3_0
#warning "This project uses features only available in iOS SDK 3.0 and later."
#endif

#ifdef __OBJC__
    #import <UIKit/UIKit.h>
    #import <Foundation/Foundation.h>
    #import <QuartzCore/QuartzCore.h>
    #import <CoreLocation/CoreLocation.h>
    #import <MobileCoreServices/MobileCoreServices.h>
    #import <SystemConfiguration/SystemConfiguration.h>

    #import "AFNetworking.h"
    #import "SVProgressHUD.h"
    #import "IIViewDeckController.h"

    #import "MTSettings.h"
    #import "MTConstants.h"
#endif

Es ist jetzt an der Zeit, updateCurrentWeather in der MTWeatherViewController-Klasse zu implementieren. Die Daten für das aktuelle Wetter sind eine Teilmenge der Antwort, die wir von der Vorhersage-API erhalten haben. Die Implementierung von updateCurrentWeather ist ziemlich einfach. Die einzige Einschränkung, auf die Sie achten müssen, ist die Niederschlagswahrscheinlichkeit. Wenn dieser Wert gleich 0 ist, ist die precipProbability-Schlüssel nicht in der Antwort enthalten. Aus diesem Grund prüfen wir zunächst, ob im Antwortwörterbuch die precipProbability-Schlüssel vorhanden ist.

- (void)updateCurrentWeather {
    // Weather Data
    NSDictionary *data = [self.response objectForKey:@"currently"];

    // Update Date Label
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
    [dateFormatter setFormatterBehavior:NSDateFormatterBehavior10_4];
    [dateFormatter setDateFormat:@"EEEE, MMM d"];
    NSDate *date = [NSDate dateWithTimeIntervalSince1970:[data[@"time"] doubleValue]];
    [self.labelDate setText:[dateFormatter stringFromDate:date]];

    // Update Temperature Label
    [self.labelTemp setText:[MTSettings formatTemperature:data[@"temperature"]]];

    // Update Time Label
    NSDateFormatter *timeFormatter = [[NSDateFormatter alloc] init];
    [timeFormatter setFormatterBehavior:NSDateFormatterBehavior10_4];
    [timeFormatter setDateFormat:@"ha"];
    [self.labelTime setText:[timeFormatter stringFromDate:[NSDate date]]];

    // Update Wind Label
    [self.labelWind setText:[NSString stringWithFormat:@"%.0fMP", [data[@"windSpeed"] floatValue]]];

    // Update Rain Label
    float rainProbability = 0.0;
    if (data[@"precipProbability"]) {
        rainProbability = [data[@"precipProbability"] floatValue] * 100.0;
    }

    [self.labelRain setText:[NSString stringWithFormat:@"%.0f%%", rainProbability]];
}

Schritt 5: Auffüllen der Sammlungsansicht

Um die Sammlungsansicht zu füllen, müssen wir zuerst eine UICollectionViewCell-Unterklasse erstellen. Erstellen Sie eine neue Objective-C-Klasse, nennen Sie sie MTHourCell und machen Sie sie zu einer Unterklasse von UICollectionViewCell (Abbildung 6). Das Erstellen von benutzerdefinierten Tabellen- oder Sammlungsansichtszellen kann mühsam und mühsam sein. Wenn Sie mehr über das Erstellen von benutzerdefinierten Tabellen- und Sammlungsansichtszellen erfahren möchten, empfehlen wir Ihnen, sich ein Tutorial anzusehen, das ich vor einigen Wochen geschrieben habe.

Create a Weather App with Forecast – User Interface - Creating a Custom Collection View

Abbildung 6: Erstellen einer benutzerdefinierten Sammlungsansicht

In der Schnittstelle von MTHourCell deklarieren wir vier Eigenschaften vom Typ UILabel. Wir machen nicht viel Magie in MTHourcell.m, wie Sie unten sehen können. Um die Methode initWithFrame: besser zu verstehen, besuchen Sie das Design, das ich Ihnen am Anfang dieses Artikels gezeigt habe. Ich werde die Implementierung von initWithFrame: im Detail nicht diskutieren, aber ich möchte darauf hinweisen, dass ich eine Präprozessordefinition für die Textfarbe der Beschriftungen verwende. Ich habe die Vorprozessdefinition zu MTConstants.h hinzugefügt, um sie für das gesamte Projekt verfügbar zu machen (sehen Sie unten).

#import <UIKit/UIKit.h>

@interface MTHourCell : UICollectionViewCell

@property (strong, nonatomic) UILabel *labelTime;
@property (strong, nonatomic) UILabel *labelTemp;
@property (strong, nonatomic) UILabel *labelWind;
@property (strong, nonatomic) UILabel *labelRain;

@end

#import "MTHourCell.h"

#define kMTLabelBottomWidth 40.0
#define kMTLabelBottomHeight 40.0

@interface MTHourCell ()

@end

@implementation MTHourCell

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];

    if (self) {
        // Helpers
        CGSize size = self.contentView.frame.size;

        // Initialize Label Time
        self.labelTime = [[UILabel alloc] initWithFrame:CGRectMake(30.0, 0.0, 50.0, 40.0)];

        // Configure Label Time
        [self.labelTime setBackgroundColor:[UIColor clearColor]];
        [self.labelTime setTextColor:[UIColor whiteColor]];
        [self.labelTime setFont:[UIFont fontWithName:@"GillSans-Light" size:18.0]];
        [self.labelTime setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin)];
        [self.contentView addSubview:self.labelTime];

        // Initialize Label Temp
        self.labelTemp = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 46.0, 80.0, 44.0)];

        // Configure Label Temp
        [self.labelTemp setBackgroundColor:[UIColor clearColor]];
        [self.labelTemp setTextAlignment:NSTextAlignmentCenter];
        [self.labelTemp setTextColor:kMTColorGray];
        [self.labelTemp setFont:[UIFont fontWithName:@"GillSans-Bold" size:40.0]];
        [self.labelTemp setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin)];
        [self.contentView addSubview:self.labelTemp];

        // Initialize Label Wind
        self.labelWind = [[UILabel alloc] initWithFrame:CGRectMake(0.0, size.height - kMTLabelBottomHeight, kMTLabelBottomWidth, kMTLabelBottomHeight)];

        // Configure Label Wind
        [self.labelWind setBackgroundColor:[UIColor clearColor]];
        [self.labelWind setTextAlignment:NSTextAlignmentCenter];
        [self.labelWind setTextColor:kMTColorGray];
        [self.labelWind setFont:[UIFont fontWithName:@"GillSans-Light" size:16.0]];
        [self.labelWind setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin)];
        [self.contentView addSubview:self.labelWind];

        // Initialize Label Rain
        self.labelRain = [[UILabel alloc] initWithFrame:CGRectMake(size.width - kMTLabelBottomWidth, size.height - kMTLabelBottomHeight, kMTLabelBottomWidth, kMTLabelBottomHeight)];

        // Configure Label Rain
        [self.labelRain setBackgroundColor:[UIColor clearColor]];
        [self.labelRain setTextAlignment:NSTextAlignmentCenter];
        [self.labelRain setTextColor:kMTColorGray];
        [self.labelRain setFont:[UIFont fontWithName:@"GillSans-Light" size:16.0]];
        [self.labelRain setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin)];
        [self.contentView addSubview:self.labelRain];

        // Background View
        UIImage *backgroundImage = [[UIImage imageNamed:@"background-hour-cell"] resizableImageWithCapInsets:UIEdgeInsetsMake(40.0, 10.0, 10.0, 10.0)];
        UIImageView *backgroundView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, size.width, size.height)];
        [backgroundView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
        [backgroundView setImage:backgroundImage];
        [self setBackgroundView:backgroundView];
    }

    return self;
}

@end

#define kMTColorGray [UIColor colorWithRed:0.737 green:0.737 blue:0.737 alpha:1.0]

#define kMTColorGreen [UIColor colorWithRed:0.325 green:0.573 blue:0.388 alpha:1.0]

#define kMTColorOrange [UIColor colorWithRed:1.000 green:0.306 blue:0.373 alpha:1.0]

Wie Sie unten sehen können, ist die Implementierung der Protokolle UICollectionViewDataSource, UICollectionViewDelegate und UICollectionViewDelegateFlowLayout der Implementierung der Protokolle UITableViewDataSource und UITableViewDelegate sehr ähnlich.

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return self.forecast ? 1 : 0;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return [self.forecast count];
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MTHourCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:HourCell forIndexPath:indexPath];

    // Fetch Data
    NSDictionary *data = [self.forecast objectAtIndex:indexPath.row];

    // Initialize Date Formatter
    NSDateFormatter *timeFormatter = [[NSDateFormatter alloc] init];
    [timeFormatter setFormatterBehavior:NSDateFormatterBehavior10_4];
    [timeFormatter setDateFormat:@"ha"];
    NSDate *date = [NSDate dateWithTimeIntervalSince1970:[data[@"time"] doubleValue]];

    // Configure Cell
    [cell.labelTime setText:[timeFormatter stringFromDate:date]];
    [cell.labelTemp setText:[MTSettings formatTemperature:data[@"temperature"]]];
    [cell.labelWind setText:[NSString stringWithFormat:@"%.0fMP", [data[@"windSpeed"] floatValue]]];

    float rainProbability = 0.0;
    if (data[@"precipProbability"]) {
        rainProbability = [data[@"precipProbability"] floatValue] * 100.0;
    }

    [cell.labelRain setText:[NSString stringWithFormat:@"%.0f%%", rainProbability]];

    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(80.0, 120.0);
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(0.0, 10.0, 0.0, 10.0);
}

Damit dies alles funktioniert, müssen wir (1) die Header-Datei von MTHourCell importieren, (2) eine statische Zeichenfolgenkonstante deklarieren, die als Kennung für die Wiederverwendung von Zellen dient, und(3) die Auflistungsansicht anweisen, die MTHourCell-Klasse zum Instanziieren zu verwenden neue Zellen. In viewDidLoad setzen wir auch die Hintergrundfarbe der Sammlungsansicht auf transparent.

1	#import "MTHourCell.h"

1	static NSString *HourCell = @"HourCell";

- (void)viewDidLoad {
    [super viewDidLoad];

    // Load Location
    self.location = [[NSUserDefaults standardUserDefaults] objectForKey:MTRainUserDefaultsLocation];

    if (!self.location) {
        [self.locationManager startUpdatingLocation];
    }

    // Configure Collection View
    [self.collectionView setBackgroundColor:[UIColor clearColor]];
    [self.collectionView registerClass:[MTHourCell class] forCellWithReuseIdentifier:HourCell];
}

3. Benutzeroberfläche Rechte Ansicht

Schritt 1: Ausgänge

Obwohl in der rechten Ansicht viele Daten angezeigt werden, ist die Implementierung der MTForecastViewController-Klasse nicht so komplex. Wir beginnen mit der Erstellung eines Ausgangs für die Tabellenansicht in MTForecastViewController.h und passen die Klasse an die Protokolle UITableViewDataSource und UITableViewDelegate an.

#import <UIKit/UIKit.h>

@interface MTForecastViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *tableView;

@end

Schritt 2: Erstellen der Benutzeroberfläche

Das Erstellen der Benutzeroberfläche ist so einfach wie das Hinzufügen einer Tabellenansicht zur Ansicht des View-Controllers, das Verbinden der vor kurzem erstellten Steckdose und das Festlegen des Dateibesitzers als dataSource und delegate der Tabellenansicht (Abbildung 7).

Create a Weather App with Forecast – User Interface - Creating the User Interface of the Forecast View Controller

Abbildung 7: Erstellen der Benutzeroberfläche des Vorhersage View Controllers

Schritt 3: Auffüllen der Tabellenansicht

Bevor wir die Tabellenansicht mit Daten füllen, müssen wir eine UITableViewCell-Unterklasse erstellen. Erstellen Sie eine neue Objective-C-Klasse, nennen Sie sie MTDayCell und machen Sie sie zu einer Unterklasse von UITableViewCell (Abbildung 8). Öffnen Sie MTDayCell.h und deklarieren Sie fünf Steckdosen vom Typ UILabel. Wie bei der MTHourCell-Klasse ist die Implementierung von MTDayCell nicht allzu schwierig, wie Sie unten sehen können.

Create a Weather App with Forecast – User Interface - Creating a Custom Table View Cell

Abbildung 8: Erstellen einer benutzerdefinierten Tabellenansichtszelle

#import <UIKit/UIKit.h>

@interface MTDayCell : UITableViewCell

@property (strong, nonatomic) UILabel *labelDay;
@property (strong, nonatomic) UILabel *labelDate;
@property (strong, nonatomic) UILabel *labelTemp;
@property (strong, nonatomic) UILabel *labelWind;
@property (strong, nonatomic) UILabel *labelRain;

@end

#import "MTDayCell.h"

#define kMTCalendarWidth 44.0
#define kMTCalendarHeight 80.0
#define kMTCalendarMarginLeft 60.0
#define kMTLabelRightWidth 30.0
#define kMTLabelRightHeight 14.0

@interface MTDayCell ()

@property (strong, nonatomic) UIImageView *imageViewCalendar;

@end

@implementation MTDayCell

#pragma mark -
#pragma mark Initialization
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

    if (self) {
        // Helpers
        CGSize size = self.contentView.frame.size;

        // Configure Table View Cell
        [self setSelectionStyle:UITableViewCellSelectionStyleNone];

        // Initialize Image View Clock
        self.imageViewCalendar = [[UIImageView alloc] initWithFrame:CGRectMake(kMTCalendarMarginLeft, 0.0, kMTCalendarWidth, kMTCalendarHeight)];

        // Configure Image View Clock
        [self.imageViewCalendar setContentMode:UIViewContentModeCenter];
        [self.imageViewCalendar setImage:[UIImage imageNamed:@"background-calendar-day-cell"]];
        [self.imageViewCalendar setAutoresizingMask:(UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin)];
        [self.contentView addSubview:self.imageViewCalendar];

        // Initialize Label Day
        self.labelDay = [[UILabel alloc] initWithFrame:CGRectMake(kMTCalendarMarginLeft, 10.0, kMTCalendarWidth, 20.0)];

        // Configure Label Day
        [self.labelDay setTextColor:[UIColor whiteColor]];
        [self.labelDay setTextAlignment:NSTextAlignmentCenter];
        [self.labelDay setBackgroundColor:[UIColor clearColor]];
        [self.labelDay setFont:[UIFont fontWithName:@"GillSans" size:14.0]];
        [self.labelDay setAutoresizingMask:(UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin)];
        [self.contentView addSubview:self.labelDay];

        // Initialize Label Date
        self.labelDate = [[UILabel alloc] initWithFrame:CGRectMake(kMTCalendarMarginLeft, 20.0, kMTCalendarWidth, 60.0)];

        // Configure Label Date
        [self.labelDate setTextColor:kMTColorGray];
        [self.labelDate setTextAlignment:NSTextAlignmentCenter];
        [self.labelDate setBackgroundColor:[UIColor clearColor]];
        [self.labelDate setFont:[UIFont fontWithName:@"GillSans" size:24.0]];
        [self.labelDate setAutoresizingMask:(UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin)];
        [self.contentView addSubview:self.labelDate];

        // Initialize Label Wind
        self.labelWind = [[UILabel alloc] initWithFrame:CGRectMake(size.width - kMTLabelRightWidth, (size.height / 2.0) - kMTLabelRightHeight, kMTLabelRightWidth, kMTLabelRightHeight)];

        // Configure Label Wind
        [self.labelWind setTextColor:kMTColorGray];
        [self.labelWind setTextAlignment:NSTextAlignmentCenter];
        [self.labelWind setBackgroundColor:[UIColor clearColor]];
        [self.labelWind setFont:[UIFont fontWithName:@"GillSans" size:12.0]];
        [self.labelWind setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin)];
        [self.contentView addSubview:self.labelWind];

        // Initialize Label Rain
        self.labelRain = [[UILabel alloc] initWithFrame:CGRectMake(size.width - kMTLabelRightWidth, (size.height / 2.0), kMTLabelRightWidth, kMTLabelRightHeight)];

        // Configure Label Rain
        [self.labelRain setTextColor:kMTColorGray];
        [self.labelRain setTextAlignment:NSTextAlignmentCenter];
        [self.labelRain setBackgroundColor:[UIColor clearColor]];
        [self.labelRain setFont:[UIFont fontWithName:@"GillSans" size:12.0]];
        [self.labelRain setAutoresizingMask:(UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin)];
        [self.contentView addSubview:self.labelRain];

        // Initialize Label Temp
        self.labelTemp = [[UILabel alloc] initWithFrame:CGRectMake(kMTCalendarWidth + kMTCalendarMarginLeft + 12.0, 0.0, size.width - kMTCalendarWidth - kMTCalendarMarginLeft - kMTLabelRightWidth - 12.0, size.height)];

        // Configure Label Temp
        [self.labelTemp setTextColor:kMTColorGray];
        [self.labelTemp setTextAlignment:NSTextAlignmentCenter];
        [self.labelTemp setBackgroundColor:[UIColor clearColor]];
        [self.labelTemp setFont:[UIFont fontWithName:@"GillSans-Bold" size:40.0]];
        [self.labelTemp setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
        [self.contentView addSubview:self.labelTemp];
    }

    return self;
}

@end

Die Implementierung des Datenquellenprotokolls für die Tabellenansicht ist der des Datenquellenprotokolls für die Sammlungsansicht, das wir zuvor gesehen haben, sehr ähnlich. Wir implementieren auch eine Methode des Tabellenansicht-Delegatenprotokolls, tableView:heightForRowAtIndexPath:, um die Zeilenhöhe auf 80.0 festzulegen.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return self.forecast ? 1 : 0;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [self.forecast count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    MTDayCell *cell = [tableView dequeueReusableCellWithIdentifier:DayCell forIndexPath:indexPath];

    // Fetch Data
    NSDictionary *data = [self.forecast objectAtIndex:indexPath.row];

    // Initialize Date Formatter
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
    [dateFormatter setFormatterBehavior:NSDateFormatterBehavior10_4];
    NSDate *date = [NSDate dateWithTimeIntervalSince1970:[data[@"time"] doubleValue]];

    // Configure Cell
    [dateFormatter setDateFormat:@"EEE"];
    [cell.labelDay setText:[dateFormatter stringFromDate:date]];

    [dateFormatter setDateFormat:@"d"];
    [cell.labelDate setText:[dateFormatter stringFromDate:date]];

    float tempMin = [data[@"temperatureMin"] floatValue];
    float tempMax = [data[@"temperatureMax"] floatValue];
    [cell.labelTemp setText:[NSString stringWithFormat:@"%.0f°/%.0f°", tempMin, tempMax]];

    [cell.labelWind setText:[NSString stringWithFormat:@"%.0f", [data[@"windSpeed"] floatValue]]];

    float rainProbability = 0.0;
    if (data[@"precipProbability"]) {
        rainProbability = [data[@"precipProbability"] floatValue] * 100.0;
    }

    [cell.labelRain setText:[NSString stringWithFormat:@"%.0f", rainProbability]];

    return cell;
}

1	- (CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath {
2	return 80.0;
3	}

Damit dies alles funktioniert, müssen wir (1) die Header-Datei der MTDayCell-Klasse importieren, (2) eine statische Zeichenfolgenkonstante für die Zellwiederverwendungskennung deklarieren und (3) die MTDayCell als Klasse für diese Zellwiederverwendungskennung registrieren in viewDidLoad. In updateView laden wir die Tabellenansicht neu.

1	#import "MTDayCell.h"

1	static NSString *DayCell = @"DayCell";

- (void)viewDidLoad {
    [super viewDidLoad];

    // Configure Table View
    [self.tableView registerClass:[MTDayCell class] forCellReuseIdentifier:DayCell];
}

1	- (void)updateView {
2	// Reload Table View
3	[self.tableView reloadData];
4	}

4. Benutzeroberfläche Rechte Ansicht

Schritt 1: Aktualisieren der Benutzeroberfläche

Es ist klar, dass wir einige wesentliche Änderungen am Location View Controller vornehmen müssen, um Chris 'Design zu implementieren. Die Tabellenansicht des Standort-View-Controllers enthält zwei Abschnitte anstelle von einem. Im oberen Bereich werden die gespeicherten Speicherorte angezeigt, während im unteren Bereich die Temperatureinstellung reserviert ist. Öffnen Sie zunächst MTLocationsViewController.xib und entfernen Sie die Navigationsleiste, die wir im vorherigen Artikel hinzugefügt haben (Abbildung 9). Dies bedeutet, dass wir auch den Ausgang für die Schaltfläche Bearbeiten in MTLocationsViewController.h und die Aktion editLocations in MTLocationsViewController.m löschen können.

Create a Weather App with Forecast – User Interface - Updating the User Interface of the Locations View Controller

Abbildung 9: Aktualisieren der Benutzeroberfläche des Standorte View Controllers

Schritt 2: Erstellen der Standortzelle

Die Zellen, in denen die Positionen angezeigt werden, haben links eine Schaltfläche zum Löschen. Damit dies funktioniert, müssen wir eine benutzerdefinierte Tabellenansichtszelle erstellen. Erstellen Sie eine weitere UITableViewCell-Unterklasse und nennen Sie sie MTLocationCell (Abbildung 10). Öffnen Sie MTLocationCell.h und erstellen Sie zwei Eigenschaften: (1) buttonDelete (UIButton) und (2) labelLocation (UILabel). Wie Sie sehen, ist die Implementierung von MTLocationCell weniger komplex als die von MTHourCell und MTDayCell.

Abbildung 10: Erstellen einer benutzerdefinierten Tabellenansichtszelle

#import <UIKit/UIKit.h>

@interface MTLocationCell : UITableViewCell

@property (strong, nonatomic) UIButton *buttonDelete;
@property (strong, nonatomic) UILabel *labelLocation;

@end

#import "MTLocationCell.h"

#define kMTButtonDeleteWidth 44.0

#define kMTLabelLocationMarginLeft 44.0

@implementation MTLocationCell

#pragma mark -
#pragma mark Initialization
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

    if (self) {
        // Helpers
        CGSize size = self.contentView.frame.size;

        // Initialize Delete Button
        self.buttonDelete = [UIButton buttonWithType:UIButtonTypeCustom];

        // Configure Delete Button
        [self.buttonDelete setFrame:CGRectMake(0.0, 0.0, kMTButtonDeleteWidth, size.height)];
        [self.buttonDelete setImage:[UIImage imageNamed:@"button-delete-location-cell"] forState:UIControlStateNormal];
        [self.buttonDelete setImage:[UIImage imageNamed:@"button-delete-location-cell"] forState:UIControlStateSelected];
        [self.buttonDelete setImage:[UIImage imageNamed:@"button-delete-location-cell"] forState:UIControlStateDisabled];
        [self.buttonDelete setImage:[UIImage imageNamed:@"button-delete-location-cell"] forState:UIControlStateHighlighted];
        [self.buttonDelete setAutoresizingMask:(UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleRightMargin)];
        [self.contentView addSubview:self.buttonDelete];

        // Initialize Location Label
        self.labelLocation = [[UILabel alloc] initWithFrame:CGRectMake(kMTLabelLocationMarginLeft, 0.0, size.width - kMTLabelLocationMarginLeft, size.height)];

        // Configure Text Label
        [self.labelLocation setTextColor:kMTColorGray];
        [self.labelLocation setBackgroundColor:[UIColor clearColor]];
        [self.labelLocation setFont:[UIFont fontWithName:@"GillSans" size:20.0]];
        [self.labelLocation setAutoresizingMask:(UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin)];
        [self.contentView addSubview:self.labelLocation];
    }

    return self;
}

@end

Schritt 3: Aktualisieren des Tabellenquellen-Datenquellenprotokolls

Um das Design zu implementieren, müssen wir die Protokolle UITableViewDataSource und UITableViewDelegate aktualisieren. Importieren Sie zunächst die Header-Datei der MTLocationCell-Klasse und die zuvor erstellte Kategorie in NSUserDefaults. Die Tabellenansicht enthält drei Zelltypen, und wir müssen für jeden Typ einen Wiederverwendungsbezeichner deklarieren (sehen Sie unten).

#import "MTLocationsViewController.h"

#import "MTLocationCell.h"
#import "NSUserDefaults+Helpers.h"

@interface MTLocationsViewController ()

@property (strong, nonatomic) NSMutableArray *locations;

@end

1	static NSString *AddLocationCell = @"AddLocationCell";
2	static NSString *LocationCell = @"LocationCell";
3	static NSString *SettingsCell = @"SettingsCell";

In setupView konfigurieren wir die Tabellenansicht, indem wir (1) die Eigenschaft separatorStyle auf UITableViewCellSeparatorStyleNone setzen und( ) eine Klasse für jede Wiederverwendungskennung registrieren.

- (void)setupView {
    // Setup Table View
    [self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

    // Register Class for Cell Reuse
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:AddLocationCell];
    [self.tableView registerClass:[MTLocationCell class] forCellReuseIdentifier:LocationCell];
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:SettingsCell];
}

Das UITableViewDataSource-Protokoll ändert sich erheblich, und die Implementierung der verschiedenen Methoden kann zunächst entmutigend erscheinen. Der größte Teil der Komplexität ist jedoch auf verschachtelte if-Anweisungen zurückzuführen.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 2;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    if (section == 0) {
        return [self.locations count] + 1;
    }

    return 2;
}

Wir implementieren auch tableView:titleForHeaderInSection: und tableView:viewForHeaderInSection:, um die Standardabschnittsüberschriften durch ein benutzerdefiniertes Design zu ersetzen, das dem Design der Anwendung entspricht. Bei der Implementierung von tableView:viewForHeaderInSection: ist es wichtig, auch tableView:heightForHeaderInSection: zu implementieren.

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
    switch (section) {
        case 0: {
            return NSLocalizedString(@"Locations", nil);
            break;
        }
        default: {
            return NSLocalizedString(@"Temperature", nil);
            break;
        }
    }

    return nil;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    // Header Text
    NSString *text = [self tableView:tableView titleForHeaderInSection:section];

    // Helpers
    CGRect labelFrame = CGRectMake(12.0, 0.0, tableView.bounds.size.width, 44.0);

    // Initialize Label
    UILabel *label = [[UILabel alloc] initWithFrame:labelFrame];

    // Configure Label
    [label setText:text];
    [label setTextColor:kMTColorOrange];
    [label setFont:[UIFont fontWithName:@"GillSans" size:20.0]];
    [label setBackgroundColor:[UIColor clearColor]];

    // Initialize View
    UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, tableView.bounds.size.width, 34.0)];
    [backgroundView setBackgroundColor:[UIColor clearColor]];
    [backgroundView addSubview:label];

    return backgroundView;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 40.0;
}

Wir verwenden tableView:heightForFooterInSection:, um Leerzeichen zwischen dem oberen und unteren Bereich zu erstellen. Dies bedeutet, dass wir auch tableView:viewForFooterInSection: implementieren müssen.

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
    // Initialize View
    UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, tableView.bounds.size.width, 34.0)];
    [backgroundView setBackgroundColor:[UIColor whiteColor]];

    return backgroundView;
}

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    if (section == 0) {
        return 40.0;
    }

    return 0.0;
}

Die Implementierung von tableView:cellForRowAtIndexPath: ist aufgrund der drei Zelltypen in der Tabellenansicht etwas komplexer.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = nil;

    if (indexPath.section == 0) {
        if (indexPath.row == 0) {
            cell = [tableView dequeueReusableCellWithIdentifier:AddLocationCell forIndexPath:indexPath];
        } else {
            cell = [tableView dequeueReusableCellWithIdentifier:LocationCell forIndexPath:indexPath];
        }

    } else {
        cell = [tableView dequeueReusableCellWithIdentifier:SettingsCell forIndexPath:indexPath];
    }

    // Configure Cell
    [self configureCell:cell atIndexPath:indexPath];

    return cell;
}

In configureCell:atIndexPath: konfigurieren wir jede Zelle. Wie ich bereits geschrieben habe, ist die Komplexität hauptsächlich auf verschachtelte if-Anweisungen zurückzuführen. Durch Tippen auf die Schaltfläche Löschen in einer Standortzelle wird die Nachricht deleteLocation: an den Standort-View-Controller gesendet. Wir werden deleteLocation: in Kürze implementieren.

- (void)configureCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath {
    // Helpers
    UIFont *fontLight = [UIFont fontWithName:@"GillSans-Light" size:18.0];
    UIFont *fontRegular = [UIFont fontWithName:@"GillSans" size:18.0];

    // Background View Image
    UIImage *backgroundImage = [[UIImage imageNamed:@"background-location-cell"] resizableImageWithCapInsets:UIEdgeInsetsMake(10.0, 0.0, 0.0, 10.0)];

    // Configure Table View Cell
    [cell.textLabel setFont:fontLight];
    [cell.textLabel setTextColor:kMTColorGray];
    [cell.textLabel setBackgroundColor:[UIColor clearColor]];
    [cell setSelectionStyle:UITableViewCellSelectionStyleNone];

    if (indexPath.section == 0) {
        if (indexPath.row == 0) {
            [cell.textLabel setText:@"Add Current Location"];
            [cell.imageView setContentMode:UIViewContentModeCenter];
            [cell.imageView setImage:[UIImage imageNamed:@"icon-add-location"]];

            // Background View Image
            backgroundImage = [[UIImage imageNamed:@"background-add-location-cell"] resizableImageWithCapInsets:UIEdgeInsetsMake(10.0, 0.0, 0.0, 10.0)];

        } else {
            // Fetch Location
            NSDictionary *location = [self.locations objectAtIndex:(indexPath.row - 1)];

            // Configure Cell
            [[(MTLocationCell *)cell buttonDelete] addTarget:self action:@selector(deleteLocation:) forControlEvents:UIControlEventTouchUpInside];
            [[(MTLocationCell *)cell labelLocation] setText:[NSString stringWithFormat:@"%@, %@", location[MTLocationKeyCity], location[MTLocationKeyCountry]]];
        }

    } else {
        if (indexPath.row == 0) {
            [cell.textLabel setText:NSLocalizedString(@"Fahrenheit", nil)];

            if ([NSUserDefaults isDefaultCelcius]) {
                [cell.textLabel setFont:fontLight];
                [cell.textLabel setTextColor:kMTColorGray];
            } else {
                [cell.textLabel setFont:fontRegular];
                [cell.textLabel setTextColor:kMTColorGreen];
            }

        } else {
            [cell.textLabel setText:NSLocalizedString(@"Celsius", nil)];

            if ([NSUserDefaults isDefaultCelcius]) {
                [cell.textLabel setFont:fontRegular];
                [cell.textLabel setTextColor:kMTColorGreen];
            } else {
                [cell.textLabel setFont:fontLight];
                [cell.textLabel setTextColor:kMTColorGray];
            }
        }
    }

    if (backgroundImage) {
        // Background View
        UIImageView *backgroundView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, cell.frame.size.width, cell.frame.size.height)];
        [backgroundView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
        [backgroundView setImage:backgroundImage];
        [cell setBackgroundView:backgroundView];
    }
}

Da Standorte jetzt durch Tippen auf die Schaltfläche Löschen in den Standortzellen gelöscht werden können, müssen die Zeilen selbst nicht mehr bearbeitet werden können. Dies bedeutet, dass die Implementierung von tableView:canEditRowAtIndexPath: auf die Rückgabe von NO reduziert werden kann und die Implementierung von tableView:commitEditingStyle:forRowAtIndexPath: vollständig entfernt werden kann.

1	- (BOOL)tableView:(UITableView )tableView canEditRowAtIndexPath:(NSIndexPath )indexPath {
2	return NO;
3	}

Schritt 4: Aktualisieren des Tabellenansicht Delegierten-Protokolls

In tableView:didSelectRowAtIndexPath: fügen wir etwas mehr Komplexität hinzu, da der zweite Abschnitt mit der Temperatureinstellung enthalten ist. Dank unserer Kategorie zu NSUserDefaults ist die Implementierung einfach und übersichtlich.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    [tableView deselectRowAtIndexPath:indexPath animated:YES];

    if (indexPath.section == 0) {
        if (indexPath.row == 0) {
            // Notify Delegate
            [self.delegate controllerShouldAddCurrentLocation:self];

        } else {
            // Fetch Location
            NSDictionary *location = [self.locations objectAtIndex:(indexPath.row - 1)];

            // Notify Delegate
            [self.delegate controller:self didSelectLocation:location];
        }

    } else {
        if (indexPath.row == 0 && [NSUserDefaults isDefaultCelcius]) {
            [NSUserDefaults setDefaultToFahrenheit];
        } else if (![NSUserDefaults isDefaultCelcius]) {
            [NSUserDefaults setDefaultToCelcius];
        }

        // Update Section
        [self.tableView reloadSections:[NSIndexSet indexSetWithIndex:1] withRowAnimation:UITableViewRowAnimationNone];
    }

    // Show Center View Controller
    [self.viewDeckController closeLeftViewAnimated:YES];
}

Die Zeilen in Chris Design sind etwas höher als die Standardhöhe von 44 Punkten. Um dieses Detail in die Praxis umzusetzen, implementieren wir tableView:heightForRowAtIndexPath: wie unten gezeigt.

1	- (CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath {
2	return 50.0;
3	}

Schritt 5: Löschen von Standorten (erneut besucht)

Als letztes müssen wir die Methode deleteLocation: implementieren, die aufgerufen wird, wenn die Schaltfläche delete in einer Standortzelle getippt wird. Die Implementierung ist ausführlicher als erwartet. Das Ableiten der Zeilennummer aus der Zelle, zu der die Schaltfläche zum Löschen gehört, ist nicht so trivial, wie es sein sollte. Sobald wir jedoch den Indexpfad der Zelle haben, zu der die Schaltfläche gehört, müssen wir nur das Array von Speicherorten aktualisieren, die Benutzerstandarddatenbank aktualisieren und die Tabellenansicht aktualisieren.

- (void)deleteLocation:(id)sender {
    UITableViewCell *cell = (UITableViewCell *)[[(UIButton *)sender superview] superview];
    NSIndexPath *indexPath = [self.tableView indexPathForCell:cell];

    // Update Locations
    [self.locations removeObjectAtIndex:(indexPath.row - 1)];

    // Update User Defaults
    [[NSUserDefaults standardUserDefaults] setObject:self.locations forKey:MTRainUserDefaultsLocations];

    // Update Table View
    [self.tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationTop];
}

5. Feinschliff

Um unser Projekt abzuschließen, müssen wir die Standard-Startbilder durch die von Chris Carey bereitgestellten ersetzen. Die Startbilder sind auch in den Quelldateien dieses Artikels enthalten.

Erstellen Sie die Anwendung und führen Sie sie aus, um das Endergebnis in Aktion zu sehen. Obwohl wir einige Zeit damit verbracht haben, die Anwendung zu erstellen und zu entwerfen, gibt es immer noch einige Ecken und Kanten. Es wäre auch schön, einen Caching-Mechanismus zu implementieren, damit wir dem Benutzer zwischengespeicherte Daten anzeigen können, solange eine Anforderung an die Vorhersage-API nicht zurückgegeben wurde. Dies sind einige Beispiele für Verbesserungen, die wir unserer Anwendung hinzufügen können.

Abschluss

Das Erstellen der Benutzeroberfläche war ein ziemlicher Arbeitsaufwand, aber der Code war nicht allzu kompliziert. Ich hoffe, dieses Tutorial hat Ihnen gezeigt, was ein großartiges Design für eine Anwendung leisten kann. Insbesondere Verbraucheranwendungen profitieren wirklich von einem ansprechenden, frischen Design, wie wir es in diesem Tutorial verwendet haben.