シェア:
){kind=small}
エリック・ジャンニーニはNexmoでiOS開発者のアドボケイトを務めていた。彼はObjective-CとSwiftの両方、特に後者に情熱を持っている。エリックは、iOSのあれこれ、アプリのハッキング、SDKの構築、あるいは迅速なプロトタイピングについてよくブログを書いている。彼はまた、カンファレンスやミートアップ、その他の様々なイベントで、iOSデベロッパーや他の強力なSwiftタイプと会っている。
Nexmo In-App Messagingを使ってUITableViewでUIを構築する
所要時間：1 分
このチュートリアルでは、Nexmo StitchのIn-App MessagingをUITableViewに統合する方法を説明します。
スターター・アプリのコードベースを見てください。 ここで.
この例を完成させるために、2台のiOSデバイスを用意してください。2台のシミュレータでも、1台のシミュレータと1台の物理デバイスでも、2台の物理デバイスでもかまいません。
アプリはすでにセットアップされています。あとはNexmo Stitchを使ってUITableViewを設定するだけです！このまま LoginController.swiftだけにしておきます。このデモでは ChatController.swift.
チャットアプリに新しい要素を追加する予定なので、それを反映させるためにレイアウトを更新しましょう。
UITableView
のインスタンスから始めましょう。 UITableViewのインスタンスから始めてみよう。
私たちの .xcodeprojナビゲート ChatControllerのシーンで Main.storyboard.最初のステップは textView.
UITableViewをその場所にセットアップするには、次のようにする：
のインスタンスをシーン上にドラッグする。
UITableViewのインスタンスをシーンにドラッグする。ストーリーボードに
UITableViewストーリーボードに追加したら、その先頭、末尾、および上部のガイドを、それぞれ周囲のセーフ・エリアに拘束する。先頭と末尾のスペースを16点のセーフ・エリアに設定したい。トップレイアウトガイドのコンストレイントを、セーフエリアレイアウトのトップに0ポイントで設定する。プロトタイプ・セルを追加する。オブジェクト・ライブラリーからコントロール・ドラッグして、プロトタイプ・セルを
UITableView.最終的にセルに名前を付けます：messageCell再利用可能なセルにはメッセージが入るからです！
ChatController
前回のクイックスタートでは、TextViewに追加してメッセージを表示しました。この例では、iOS SDKのインスタンスである UITableView.
新しいUIアウトレットをビューからコントローラに追加するには、次のようにします。 ChatControllerに追加するには、次のようにします：
のインスタンスから
UITableViewのコントローラへの接続を作成します。ChatController.swiftに設定します。delegateまたはdataSourceプロパティを参照します。開いた状態で
Main.storyboardを開き、同時にシフト・オプション・コマンドを押しながらChatController.swiftをクリックして、アシスタントエディターに表示させる。のボディ内でドラッグを制御する。
UITableViewからChatController.swiftを宣言する。tableViewをアウトレットとして宣言する：
class ChatController: UIViewController {
// tableView for displaying chat
@IBOutlet weak var tableView: UITableView!
}
のインスタンスは UITableViewのインスタンスには delegateそして dataSource.のインスタンスには viewDidLoad(:)を使うことができる：
// assignment of delegate to our ChatController
tableView.delegate = self
// assignment of dataSource to our ChatController
tableView.dataSource = self指定 ChatControllerの代理人として指定する。 UITableViewとは ChatControllerに代わって UITableViewのインスタンスに必要なデリゲート・メソッドを処理することに同意することを意味する。 UITableView.同様に ChatControllerをデータソースとして指定することは ChatControllerの代わりに動作することに同意します。 UITableViewの代理を務めることに同意することを意味します。したがって、これらのメソッドをプログラムする必要があります。これを'適合'と呼ぶ。
2.3の手順に従った場合、すぐに "Type ChatController.swiftはプロトコル UITableViewDataSource".もしそうなら、素晴らしいことだ！これは tableViewのインスタンスがコントローラに設定されていることを意味します。プロトコルに適合させましょう！
プロトコルに準拠させるために UITableViewDataSourceプロトコルに準拠させるために、Swiftの強力な機能の一つである extension.クラスの宣言のための閉じ括弧の下で ChatController.
この拡張は UITableViewDelegateに準拠しているので、このようにプログラムする：
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 0
}
のプロトコルに適合するために必要な最後のメソッドが残っている。 UITableViewDataSourceである。 cellForRowAtであるため、以下の方法でメソッドを追加する：
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cellWithIdentifier", for: indexPath)
return cell;
}
これら2つの方法を実装すれば、先に述べたエラーは改善されるはずだ。どちらのメソッドもnumberOfRowsInSectionと cellForRowAtしかし、どちらも定型的なものです。のインスタンスと直接やりとりするようにこれらのメソッドを設定します。 ConversationClientのインスタンスと直接やりとりするように設定します。
会話クライアントのインスタンスからプロパティを使用してチャット履歴を表示するようにボイラープレートコードを設定するには、次の作業を行う必要があります。 numberOfRowsInSectionそして cellForRowAt.
numberOfRowsInSection
始めよう numberOfRowsInSection.まずは conversationsプロパティにアクセスします。 conversationのプロパティにアクセスします。 performSegue(withIdentifier:sender)から LoginController.swift.プロパティからアクセスします。 eventsプロパティには、Swiftの CollectionTypeのプロパティがあります。 .countに対するプロパティがあり、チャットの履歴のメッセージ数を返します。このようになります：
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return conversation!.events.count
}
のインスタンスは tableViewのインスタンスにあるイベントと同じ数の行を返すはずである。 conversationのインスタンスにあるイベントと同じ数の行を返すはずだ。もしそうなれば、あと半分だ！次のステップは cellForRowAtプロトタイプ・セルの textLabel.textプロパティにメッセージとして表示するように設定することだ。行ごとのイベントを indexPathとして TextEventという定数の値に割り当てられます。 message.という定数の値に代入されます。 messageの値に代入する。 cell.textLabel?.text.このようになる：
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cellWithIdentifier", for: indexPath)
let message = conversation?.events[indexPath.row] as? TextEvent
cell.textLabel?.text = message?.text
return cell;
}
次のステップは、インスタンスの tableViewが更新されるようにすることです。 sendBtn(:)を呼び出す。 tableView.reload().
呼び出す tableView.reload()を呼び出すと、イベント履歴が取得されます。これで、セグエをトリガーして ChatController.swiftのインスタンスにチャットの履歴がロードされます。 UITableView.
チャット履歴の表示は、Stitchで利用可能な多くの機能の1つに過ぎません。チャット履歴に加え、タイピングインジケーター、音声の有効化/無効化、便利な通話方法、IP-PSTN/IP-IP通話機能など、様々な機能があります！
アクティブなSwift開発者、またはSwiftを使い始めたばかりの方は、Nexmo開発者コミュニティに参加することをお勧めします。Nexmo GitHubでホストされているプロジェクトをチェックしたり、Twitter @NexmoDevでフォローしてください。
開発者支援チームと交流したり、コードリポジトリをチェックしたりすることを歓迎します。Nexmo Stitch In-App Messaging for iOSの使い方をもっと知りたい方は、他のクイックスタートもご覧ください。
ご質問ですか？NexmoコミュニティのSlackかメールでお問い合わせください。コードに問題があった場合、あなたのベースとこのコードを照らし合わせることができます。 ひとつ!