Merge pull request #12 from PGSSoft/feature/dk/bubble_animation

Feature/dk/bubble animation
PGSSoft · May 26, 2017 · 2a17c08 · 2a17c08
2 parents 06f43dd + bce5527
commit 2a17c08
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 17 deletions.
diff --git a/Demo/Base.lproj/Main.storyboard b/Demo/Base.lproj/Main.storyboard
@@ -1,10 +1,10 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="11762" systemVersion="15G1217" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="12120" systemVersion="16F73" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
     <device id="retina4_7" orientation="portrait">
         <adaptation id="fullscreen"/>
     </device>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="11757"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12088"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>

diff --git a/Demo/ViewController.swift b/Demo/ViewController.swift
@@ -44,7 +44,7 @@ extension ViewController: MessagesViewDelegate {
     func didTapRightButton() {
         let text = messagesView.inputText
         TestData.exampleMessageText.append(text)
-        messagesView.refresh(scrollToLastMessage: true)
+        messagesView.refresh(scrollToLastMessage: true, animateLastMessage: true)
     }
 }
 

diff --git a/MessagesView/MessageCollectionViewCell.swift b/MessagesView/MessageCollectionViewCell.swift
@@ -39,10 +39,10 @@ class MessageCollectionViewCell: UICollectionViewCell {
     @IBOutlet weak var labelTopConstraint: NSLayoutConstraint!
     @IBOutlet weak var labelBottomConstraint: NSLayoutConstraint!
 
+    @IBOutlet weak var backgroundTopConstraint: NSLayoutConstraint!
     @IBOutlet weak var backgroundTrailingConstraint: NSLayoutConstraint!
     @IBOutlet weak var backgroundLeadingConstraint: NSLayoutConstraint!
-
-    @IBOutlet weak var bottomSpacingConstraint: NSLayoutConstraint!
+    @IBOutlet weak var backgroundBottomConstraint: NSLayoutConstraint!
 
     private let defaultBubbleMargin: CGFloat = 8
     private let additionalTextLabelVerticalSpacing: CGFloat = 4
@@ -135,7 +135,7 @@ class MessageCollectionViewCell: UICollectionViewCell {
             labelBottomConstraint.constant = textInsets.bottom
         }
 
-        bottomSpacingConstraint.constant = bottomSpacing
+        backgroundBottomConstraint.constant = bottomSpacing
     }
 
     func size(message: String, width: CGFloat, bubbleImage: BubbleImage, minimalHorizontalSpacing: CGFloat,
@@ -186,4 +186,26 @@ class MessageCollectionViewCell: UICollectionViewCell {
 
         minimalHorizontalSpacing = settings.minimalHorizontalSpacing
     }
+
+    func slideIn() {
+        let horizontalConstraint: NSLayoutConstraint!
+        switch self.side {
+        case .left:
+            horizontalConstraint = backgroundTrailingConstraint
+        case .right:
+            horizontalConstraint = backgroundLeadingConstraint
+        }
+
+        let horizontal = horizontalConstraint.constant
+        let top = backgroundTopConstraint.constant
+        backgroundTopConstraint.constant = self.textLabel.frame.height
+        horizontalConstraint.constant = contentView.frame.size.width * 2 
+        layoutIfNeeded()
+
+        UIView.animate(withDuration: 0.25) {
+            horizontalConstraint.constant = horizontal
+            self.backgroundTopConstraint.constant = top
+            self.contentView.layoutIfNeeded()
+        }
+    }
 }
diff --git a/MessagesView/MessageCollectionViewCell.xib b/MessagesView/MessageCollectionViewCell.xib
@@ -1,10 +1,10 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="11762" systemVersion="15G1217" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="12120" systemVersion="16F73" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait">
         <adaptation id="fullscreen"/>
     </device>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="11757"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12088"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -60,9 +60,10 @@
                 </userDefinedRuntimeAttribute>
             </userDefinedRuntimeAttributes>
             <connections>
+                <outlet property="backgroundBottomConstraint" destination="vf3-1F-E1j" id="FmE-JU-LtX"/>
                 <outlet property="backgroundLeadingConstraint" destination="crS-JE-wZw" id="DG4-eZ-1EV"/>
+                <outlet property="backgroundTopConstraint" destination="ZYW-pK-ObZ" id="MEW-aY-Y3B"/>
                 <outlet property="backgroundTrailingConstraint" destination="dcA-tX-vXV" id="5WS-s3-US3"/>
-                <outlet property="bottomSpacingConstraint" destination="vf3-1F-E1j" id="hFw-SS-gVo"/>
                 <outlet property="labelBottomConstraint" destination="FUU-Z0-img" id="3fQ-gJ-x5u"/>
                 <outlet property="labelLeadingConstraint" destination="xyj-dZ-MNv" id="4Zl-t4-oIz"/>
                 <outlet property="labelTopConstraint" destination="biN-oX-Ydt" id="A6L-8w-hNi"/>

diff --git a/MessagesView/MessagesInputToolbar.swift b/MessagesView/MessagesInputToolbar.swift
@@ -35,6 +35,10 @@ class MessagesInputToolbar: UIToolbar {
         toolbarContentView.frame = self.bounds
     }
 
+    override func resignFirstResponder() -> Bool {
+        return toolbarContentView.resignFirstResponder()
+    }
+
     func rightButton(show: Bool, animated: Bool) {
         toolbarContentView.righButton(show: show, animated: animated)
     }

diff --git a/MessagesView/MessagesToolbarContentView.swift b/MessagesView/MessagesToolbarContentView.swift
@@ -61,7 +61,7 @@ class MessagesToolbarContentView: UIView {
         }
 
         if settings.leftButtonHidesKeyboard {
-            messageEditorTextView.resignFirstResponder()
+            _ = resignFirstResponder()
         }
     }
 
@@ -72,10 +72,14 @@ class MessagesToolbarContentView: UIView {
         }
 
         if settings.rightButtonHidesKeyboard {
-            messageEditorTextView.resignFirstResponder()
+            _ = resignFirstResponder()
         }
     }
 
+    override func resignFirstResponder() -> Bool {
+        return messageEditorTextView.resignFirstResponder()
+    }
+
     class func fromNib() -> MessagesToolbarContentView {
         let bundle = Bundle(for: MessagesToolbarContentView.classForCoder())
         let nibViews = bundle.loadNibNamed(String(describing: MessagesToolbarContentView.self), owner: nil, options: nil)

diff --git a/MessagesView/MessagesView.swift b/MessagesView/MessagesView.swift
@@ -89,6 +89,8 @@ public class MessagesView: UIView {
     public var delegate : MessagesViewDelegate?
     public var dataSource: MessagesViewDataSource?
 
+    public var isLastMessageAnimated = false
+
     //MARK:-
 
     var bubbleImageLeft: BubbleImage = BubbleImage(cornerRadius: 8)
@@ -145,8 +147,9 @@ public class MessagesView: UIView {
         apply(settings: settings)
     }
 
-    public func refresh(scrollToLastMessage: Bool) {
+    public func refresh(scrollToLastMessage: Bool, animateLastMessage: Bool = false) {
         DispatchQueue.main.async {
+            self.isLastMessageAnimated = animateLastMessage
             self.messagesCollectionView.reloadData()
 
             if scrollToLastMessage {
@@ -270,6 +273,9 @@ public class MessagesView: UIView {
         messagesCollectionView.register(UICollectionReusableView.classForCoder(), forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: Key.messagesCollectionViewFooter)
     }
 
+    @IBAction func didTapCollectionViewArea(_ sender: Any) {
+        _ = messagesInputToolbar.resignFirstResponder()
+    }
 
     public func refresh() {
         DispatchQueue.main.async {
@@ -447,4 +453,18 @@ extension MessagesView: UICollectionViewDelegateFlowLayout {
 
         return size
     }
+
+    func isLastMessage(indexPath: IndexPath)->Bool {
+        let lastMessageIndex = (dataSource?.messages.count ?? 0) - 1
+        return indexPath.row == lastMessageIndex
+    }
+
+    public func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
+        guard let cell = cell as? MessageCollectionViewCell else {
+            return
+        }
+        if isLastMessage(indexPath: indexPath) && isLastMessageAnimated {
+            cell.slideIn()
+        }
+    }
 }
diff --git a/MessagesView/MessagesView.xib b/MessagesView/MessagesView.xib
@@ -1,10 +1,10 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="11762" systemVersion="15G1217" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="12120" systemVersion="16F73" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait">
         <adaptation id="fullscreen"/>
     </device>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="11757"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12088"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -23,6 +23,7 @@
                 <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="prototypes" translatesAutoresizingMaskIntoConstraints="NO" id="3Nf-do-eXM" customClass="MessagesCollectionView" customModule="MessagesView" customModuleProvider="target">
                     <rect key="frame" x="0.0" y="0.0" width="375" height="617"/>
                     <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                    <gestureRecognizers/>
                     <collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="0.0" minimumInteritemSpacing="10" id="L0d-27-qxR">
                         <size key="itemSize" width="301" height="60"/>
                         <size key="headerReferenceSize" width="0.0" height="0.0"/>
@@ -33,6 +34,7 @@
                     <connections>
                         <outlet property="dataSource" destination="-1" id="fQj-re-a1Y"/>
                         <outlet property="delegate" destination="-1" id="sFQ-em-SnE"/>
+                        <outletCollection property="gestureRecognizers" destination="a0M-QB-WkO" appends="YES" id="3xr-KD-IIO"/>
                     </connections>
                 </collectionView>
                 <toolbar opaque="NO" clearsContextBeforeDrawing="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="dHh-JD-Gtu" customClass="MessagesInputToolbar" customModule="MessagesView" customModuleProvider="target">
@@ -46,6 +48,7 @@
                 </toolbar>
             </subviews>
             <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+            <gestureRecognizers/>
             <constraints>
                 <constraint firstItem="3Nf-do-eXM" firstAttribute="leading" secondItem="xMm-vM-6w5" secondAttribute="leading" id="2JO-E5-trk"/>
                 <constraint firstAttribute="bottom" secondItem="dHh-JD-Gtu" secondAttribute="bottom" id="CvQ-ma-VhN"/>
@@ -56,5 +59,10 @@
                 <constraint firstItem="dHh-JD-Gtu" firstAttribute="top" secondItem="3Nf-do-eXM" secondAttribute="bottom" id="y2z-Ik-10e"/>
             </constraints>
         </view>
+        <tapGestureRecognizer id="a0M-QB-WkO">
+            <connections>
+                <action selector="didTapCollectionViewArea:" destination="-1" id="X6m-rn-BDG"/>
+            </connections>
+        </tapGestureRecognizer>
     </objects>
 </document>