質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.38%

【Swift】MessageKitでナビゲーションバーを表示させる

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,356

score 32

前提・実現したいこと

Swift+FirebaseでiOSアプリを開発中。
MessageKitを使用しチャット画面を作っています。

発生している問題・エラーメッセージ

以下の記事を参考に実装したのですがいくつかうまくいかない点があります。
(少しだけカスタマイズした)

MessageKitの使いかた(初歩)

  1. ナビゲーションバーが表示されない
  2. is initial view controllerにしないと下部の入力フォームが表示されない 

ナビゲーションコントローラーを設置したり、stroyboardでナビゲーションバーを設置したりしてもナビゲーションバーが表示されず、画面の高さ最大値までチャット画面が表示されてしまいます。

現状のUI画像

また、該当のコントローラーを is initial view controllerにすると画面下部のチャット入力フォームが表示されるのですが、違うコントローラーに is initial view controllerを設定すると表示されません。

該当のソースコード

import UIKit
import MessageKit

class TalkViewController: MessagesViewController {

    var messageList: [MockMessage] = []

       lazy var formatter: DateFormatter = {
           let formatter = DateFormatter()
           formatter.dateStyle = .medium
           return formatter
       }()

    override func viewDidLoad() {
        super.viewDidLoad()

        DispatchQueue.main.async {
            // messageListにメッセージの配列をいれて
            self.messageList = self.getMessages()
          // messagesCollectionViewをリロードして
            self.messagesCollectionView.reloadData()
            // 一番下までスクロールする
         self.messagesCollectionView.scrollToBottom()
        }

        messagesCollectionView.messagesDataSource = self
        messagesCollectionView.messagesLayoutDelegate = self
        messagesCollectionView.messagesDisplayDelegate = self
        messagesCollectionView.messageCellDelegate = self
        messageInputBar.delegate = self
        messageInputBar.sendButton.tintColor = UIColor.lightGray

//         メッセージ入力時に一番下までスクロール
//         scrollsToBottomOnKeybordBeginsEditing = true // default false
//         maintainPositionOnKeyboardFrameChanged = true // default false
    }


    // サンプル用に適当なメッセージ
    func getMessages() -> [MockMessage] {
        return [
            createMessage(text: "めっちゃいい曲だね!"),
            createMessage(text: "そう!最近、髭男officialハマってるの〜"),
            createMessage(text: "宿命とかもいいよ〜"),
            createMessage(text: "ライブ行きたいな〜"),
            createMessage(text: "一緒に行く?"),
            createMessage(text: "え!いこいこ!"),
            createMessage(text: "じゃあ明日10時にイオン集合ね!"),
            createMessage(text: "おっけー楽しみにしとくね!"),
            createMessage(text: "うほ"),
            createMessage(text: "うほうほ"),
            createMessage(text: "うほうほうほ"),
            createMessage(text: "うほうほうほうほ"),
            createMessage(text: "おなかすいたなーーーーーーーおなかすいたなーーーーーーーおなかすいたなーーーーーーーおなかすいたなーーーーーーーおなかすいたなーーーーーーーおなかすいたなーーーーーーーおなかすいたなーーーーーーーおなかすいたなーーーーーーー"),
        ]
    }


     func createMessage(text: String) -> MockMessage {
            let attributedText = NSAttributedString(string: text, attributes: [.font: UIFont.systemFont(ofSize: 15),
                                                                               .foregroundColor: UIColor.black])
            return MockMessage(attributedText: attributedText, sender: otherSender(), messageId: UUID().uuidString, date: Date())
        }

        override func didReceiveMemoryWarning() {
            super.didReceiveMemoryWarning()
        }
}

extension TalkViewController: MessagesDataSource{

    func currentSender() -> SenderType {
        return Sender(id: "123", displayName: "自分")
    }

    func otherSender() -> Sender {
        return Sender(id: "456", displayName: "相手名")
    }

    func numberOfSections(in messagesCollectionView: MessagesCollectionView) -> Int {
        return messageList.count
    }

    func messageForItem(at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> MessageType {
        return messageList[indexPath.section]
    }

    // メッセージの上に文字を表示
    func cellTopLabelAttributedText(for message: MessageType, at indexPath: IndexPath) -> NSAttributedString? {
        if indexPath.section % 3 == 0 {
            return NSAttributedString(
                string: MessageKitDateFormatter.shared.string(from: message.sentDate),
                attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 10),
                             NSAttributedString.Key.foregroundColor: UIColor.darkGray]
            )
        }
        return nil
    }


}



// メッセージのdelegate
extension TalkViewController: MessagesDisplayDelegate {

    // メッセージの色を変更(デフォルトは自分:白、相手:黒)
    func textColor(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> UIColor {
        return isFromCurrentSender(message: message) ? .white : .darkText
    }

    // メッセージの背景色を変更している(自分:紫、相手:グレー)
    func backgroundColor(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> UIColor {
        return isFromCurrentSender(message: message) ?
            UIColor(red: 176/255, green: 97/255, blue: 253/255, alpha: 1) :   //自分
            UIColor(red: 230/255, green: 230/255, blue: 230/255, alpha: 1)    //相手
    }



    // アイコンをセット
    func configureAvatarView(_ avatarView: AvatarView, for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) {


       let avatar: Avatar
       let image = UIImage(named: "profile5")
       avatar = Avatar(image: image)
       avatarView.set(avatar: avatar)

    }

}


// 各ラベルの高さを設定(デフォルト0なので必須)
extension TalkViewController: MessagesLayoutDelegate {

    func cellTopLabelHeight(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> CGFloat {
        if indexPath.section % 3 == 0 { return 10 }
        return 0
    }

    func messageTopLabelHeight(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> CGFloat {
        return 8
    }

    func messageBottomLabelHeight(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> CGFloat {
        return 4
    }
}

extension TalkViewController: MessageCellDelegate {
    // メッセージをタップした時の挙動
    func didTapMessage(in cell: MessageCollectionViewCell) {
        print("Message tapped")
    }
}

extension TalkViewController: MessageInputBarDelegate {
    // メッセージ送信ボタンをタップした時の挙動
    func messageInputBar(_ inputBar: MessageInputBar, didPressSendButtonWith text: String) {
        for component in inputBar.inputTextView.components {
            if let image = component as? UIImage {

                let imageMessage = MockMessage(image: image, sender: currentSender() as! Sender, messageId: UUID().uuidString, date: Date())
                messageList.append(imageMessage)
                messagesCollectionView.insertSections([messageList.count - 1])

            } else if let text = component as? String {

                let attributedText = NSAttributedString(string: text, attributes: [.font: UIFont.systemFont(ofSize: 15),
                                                                                   .foregroundColor: UIColor.white])
                let message = MockMessage(attributedText: attributedText, sender: currentSender() as! Sender, messageId: UUID().uuidString, date: Date())
                messageList.append(message)
                messagesCollectionView.insertSections([messageList.count - 1])
            }
        }
        inputBar.inputTextView.text = String()
        messagesCollectionView.scrollToBottom()
    }
}

試したこと

コード上でチャットの高さを指定しているものが見当たらないため、Storyboardで設定すればナビゲーションバーが表示されると思っていたのですがされません。
ご教授いただけると大変嬉しいです。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hameji

    2019/10/27 11:02 編集

    質問は1つのページにつき1つにしてください。
    なお、試した方法、その画面等載せてくれないと、お答えできません。

    つまり、Navigationbarを表示したいなら、
    NavigationBarを生成しているコードなり、
    NavigationBarを配置したstoryboardとその階層の状態等

    2も同様です。

    キャンセル

回答 1

0

例えばですが
messagesCollectionView.contentInset.top = 70
とするとtopに70の余白ができます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る