Objective-C

Aufbau der Chat-Schnittstelle

Um chatten zu können, müssen Sie einen neuen View Controller für die Chat-Schnittstelle erstellen. Wählen Sie aus dem Xcode-Menü File > New > File.... Wählen Sie eine Kakao-Touch-Klasse, nennen Sie es ChatViewController mit einer Unterklasse von UIViewController und Sprache der Objective-C.

Xcode adding file

Dadurch wird eine neue Datei mit dem Namen ChatViewController.man der Spitze der Einfuhr NexmoClient und User.

#import "ChatViewController.h"
#import "User.h"
#import <NexmoClient/NexmoClient.h>

Die Chat-Schnittstelle wird benötigt:

  • A UITextView um die Chat-Nachrichten anzuzeigen
  • A UITextField um Nachrichten einzugeben

Öffnen Sie ChatViewController.m und fügen Sie es programmatisch hinzu.

@implementation ChatViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = UIColor.systemBackgroundColor;
    
    self.conversationTextView = [[UITextView alloc] initWithFrame:CGRectZero];
    self.conversationTextView.text = @"";
    self.conversationTextView.backgroundColor = UIColor.lightGrayColor;
    [self.conversationTextView setUserInteractionEnabled:NO];
    self.conversationTextView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:self.conversationTextView];
    
    self.inputField = [[UITextField alloc] initWithFrame:CGRectZero];
    self.inputField.delegate = self;
    self.inputField.returnKeyType = UIReturnKeySend;
    self.inputField.layer.borderWidth = 1.0;
    self.inputField.layer.borderColor = UIColor.lightGrayColor.CGColor;
    self.inputField.translatesAutoresizingMaskIntoConstraints = false;
    [self.view addSubview:self.inputField];
    
    [NSLayoutConstraint activateConstraints:@[
        [self.conversationTextView.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor],
        [self.conversationTextView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
        [self.conversationTextView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
        [self.conversationTextView.bottomAnchor constraintEqualToAnchor:self.inputField.topAnchor constant:-20.0],
        
        [self.inputField.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor constant:20.0],
        [self.inputField.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor constant:-20.0],
        [self.inputField.heightAnchor constraintEqualToConstant:40.0],
        [self.inputField.bottomAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.bottomAnchor constant:-20.0]
    ]];
}

- (void)viewWillAppear:(BOOL)animated {
    [NSNotificationCenter.defaultCenter addObserver:self selector:@selector(keyboardWasShown:) name:UIKeyboardDidShowNotification object:nil];
}

- (void)keyboardWasShown:(NSNotification *)notification {
    
    NSDictionary *keyboardInfo = notification.userInfo;
    
    if (keyboardInfo) {
        CGSize kbSize = [keyboardInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue].size;
        self.view.layoutMargins = UIEdgeInsetsMake(0, 0, kbSize.height - 20.0, 0);
    }
}

@end

In der viewWillAppear Funktion wird ein Beobachter zu der keyboardDidShowNotification die die keyboardWasShown. Die keyboardWasShown Funktion passt die Layout-Ränder der Ansicht an, die das Eingabefeld verschiebt. Dies stoppt die inputField beim Tippen von der Tastatur blockiert werden.

Die UITextField delegieren

Sie müssen die folgenden Bedingungen erfüllen UITextFieldDelegate um zu wissen, wann der Benutzer mit dem Tippen fertig ist, um das Eingabefeld an seine ursprüngliche Position zu verschieben.

@interface ChatViewController () <NXMClientDelegate>

...

@end

Am Ende der ChatViewController Klasse fügen Sie die textFieldDidEndEditing Funktion delegieren.

@implementation ChatViewController

...

- (void)textFieldDidEndEditing:(UITextField *)textField {
    self.view.layoutMargins = UIEdgeInsetsZero;
}

@end

Die Präsentation der ChatViewController

Nun, da die Chat-Schnittstelle erstellt ist, müssen Sie den View-Controller aus dem Anmeldebildschirm, den Sie zuvor erstellt haben, präsentieren. Sie benötigen Informationen über den eingeloggten Benutzer, die zwischen den beiden View Controllern weitergegeben werden müssen, innerhalb ChatViewController.h importieren die User Klasse am Anfang der Datei.

#import <UIKit/UIKit.h>
#import "User.h"

Fügen Sie der Schnittstelle einen Initialisierer hinzu.

@interface ChatViewController : UIViewController

-(instancetype)initWithUser:(User *)user;

@end

Dann in ChatViewController.mfügen Sie der Schnittstelle eine Benutzer- und eine Client-Eigenschaft hinzu.

@interface ChatViewController () <UITextFieldDelegate>
...
@property User *user;
@property NXMClient *client;
@end

Implementieren Sie den Initialisierer:

@implementation ChatViewController

- (instancetype)initWithUser:(User *)user {
    if (self = [super init])
    {
        _user = user;
        _client = NXMClient.shared;
    }
    return self;
}

...
@end

Dies definiert einen benutzerdefinierten Initialisierer für die Klasse, der eine User.type als seinen Parameter, der dann in der lokalen user Eigenschaft. Da Sie nun über die Benutzerinformationen verfügen, können Sie die Navigationsleiste verwenden, um anzuzeigen, mit wem der Benutzer chatten wird, in viewDidLoad das Folgende hinzufügen.

self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Logout" style:UIBarButtonItemStyleDone target:self action:@selector(logout)];
self.title = [NSString stringWithFormat:@"Conversation with %@", self.user.chatPartnerName];

Dadurch wird auch eine Abmeldeschaltfläche in der Navigationsleiste erstellt, die die logout Funktion an das Ende von ChatViewController.m.

@implementation ChatViewController
    ...
- (void)logout {
    [self.client logout];
    [self dismissViewControllerAnimated:YES completion:nil];
}
@end

Jetzt können Sie die Chat-Schnittstelle zusammen mit den Benutzerinformationen präsentieren. Zu diesem Zweck müssen Sie die didChangeConnectionStatus Funktion in der ViewController.m Datei.

- (void)client:(NXMClient *)client didChangeConnectionStatus:(NXMConnectionStatus)status reason:(NXMConnectionStatusReason)reason {
    switch (status) {
        case NXMConnectionStatusConnected: {
            [self setStatusLabelText:@"Connected"];
            UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:[[ChatViewController alloc] initWithUser:self.user]];
            navigationController.modalPresentationStyle = UIModalPresentationOverFullScreen;
            [self presentViewController:navigationController animated:YES completion:nil];
            break;
        }
        case NXMConnectionStatusConnecting:
            [self setStatusLabelText:@"Connecting"];
            break;
        case NXMConnectionStatusDisconnected:
            [self setStatusLabelText:@"Disconnected"];
            break;
    }
}

Dann importieren Sie ChatViewController am Anfang der Datei.

...
#import "ChatViewController.h"

Wenn der Benutzer erfolgreich eine Verbindung herstellt, wird ein ChatViewController werden die benötigten Benutzerdaten angezeigt.

Bauen und Ausführen

Führen Sie das Projekt erneut aus (Cmd + R), um ihn im Simulator zu starten. Wenn Sie sich mit einem der Benutzer anmelden, sehen Sie die Chat-Schnittstelle

Chat interface