jsqmessagesviewcontroller - JSQMessagesViewController 动画打字指示器

Question

我正在开发一个使用 JSQMessagesViewController 库的项目。有没有人成功地为打字指示器设置动画，如果可以，他们可以分享他们的方法吗？

谢谢！

Answer 1

我参加聚会迟到了，但因为这也需要我很多时间，而且我的帖子可以帮助其他人，所以我会列出我的工作解决方案。我使用 APNG（动画 PNG，可能具有透明背景）作为输入指示器，因此我使用 APNGKit，它提供了一个名为 APNGImageView 的 UIImageView 子类

• 将 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"
      }   
  }
  

• 在 MyMessagesTypingIndicatorFooterView.xib 中添加 APNGImageView 实例，引用自定义类 MyMessagesTypingIndicatorFooterView。将引用出口 animatedImageView 添加到 MyMessagesTypingIndicatorFooterView 类。

• 在 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) } }

Answer 2

您将要查看JSQTypingIndicatorFooterView这里是文档。http://cocoadocs.org/docsets/JSQMessagesViewController/7.2.0/Classes/JSQMessagesTypingIndicatorFooterView.html

您可以设置ellipsisColor

messageBubbleColor它自己的气泡的颜色。

shouldDisplayOnLeft来决定它应该在左边还是右边。

collectionView它应该显示的集合视图。