12

JSQMessagesViewController ライブラリを使用するプロジェクトに取り組んでいます。タイピングインジケーターのアニメーション化に成功した人はいますか?もしそうなら、彼らのアプローチを共有できますか?

ありがとう！

4

2 に答える 2

1

私はパーティーに遅れましたが、これにも多くの時間がかかり、私の投稿が他の人に役立つ可能性があるため、私の作業ソリューションをリストします. 私は APNG (透明な背景を持つことができるアニメーション PNG) を入力インジケーターとして使用するので、APNGImageView という名前の UIImageView サブクラスを提供する APNGKit を使用します。

  • JSQMessagesTypingIndicatorFooterView.xib を Pods/Pods/JSQMessagesViewController/Resources からソース フォルダーにコピーし、名前を MyMessagesTypingIndicatorFooterView.xib に変更します (たとえば)。

  • 次のように MyMessagesTypingIndicatorFooterView という名前のクラスを作成します。

    class MyMessagesTypingIndicatorFooterView: JSQMessagesTypingIndicatorFooterView { @IBOutlet weak var animatedImageView: APNGImageView!

        override func draw(_ rect: CGRect) {
        super.draw(rect)

    }

    override func awakeFromNib() {
        super.awakeFromNib();
    }

    public override class func nib() -> UINib! {
        return UINib(nibName: "MyMessagesTypingIndicatorFooterView", bundle: Bundle.main)
    }

    override class func footerReuseIdentifier()->String{
        return "MyMessagesTypingIndicatorFooterView"
    }   
}

  • APNGImageView インスタンスを MyMessagesTypingIndicatorFooterView.xib に追加し、カスタム クラス MyMessagesTypingIndicatorFooterView を参照します。MyMessagesTypingIndicatorFooterView クラスにリファレンス アウトレットのanimateImageViewを追加します。 ここに画像の説明を入力 ここに画像の説明を入力

  • JSQMessagesViewController のサブクラスにカスタム フッターを登録し、viewForSupplementaryElementOfKind をオーバーライドする

    class MyMessagesViewController: JSQMessagesViewController{ override func viewDidLoad() {
    self.collectionView.register(MyMessagesTypingIndicatorFooterView.nib(), forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "MyMessagesTypingIndicatorFooterView")}

    override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { if kind == UICollectionElementKindSectionFooter{ let footerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "MyMessagesTypingIndicatorFooterView", for: indexPath) as! MyMessagesTypingIndicatorFooterView //footerView let image = APNGImage(named: "typing1.png") footerView.animatedImageView.image = image footerView.animatedImageView.startAnimating() return footerView } return super.collectionView(collectionView, viewForSupplementaryElementOfKind: kind, at: indexPath) } }

于 2018-03-16T14:32:25.710 に答える
0

JSQTypingIndicatorFooterViewhere is the documentationを調べたいと思うでしょう。http://cocoadocs.org/docsets/JSQMessagesViewController/7.2.0/Classes/JSQMessagesTypingIndicatorFooterView.html

を設定できます。ellipsisColor

messageBubbleColor泡自体の色。

shouldDisplayOnLeft左か右かを決定します。

collectionView表示するコレクション ビュー。

于 2016-02-21T05:39:24.273 に答える