[Chat] implement smooth content movement

Xamarin.iOS 8.8.2.4

Chat/Chat/ChatViewController.cs

@@ -70,6 +70,7 @@ namespace Chat
 			willHideToken = UIKeyboard.Notifications.ObserveWillHide (KeyboardWillHideHandler);
 			willHideMenuToken = UIMenuController.Notifications.ObserveWillHideMenu (MenuWillHide);
 
+			UpdateTableInsets ();
 			UpdateButtonState ();
 		}
 
@@ -88,15 +89,39 @@ namespace Chat
 			BottomConstraint.Constant = View.Bounds.GetMaxY () - e.FrameEnd.GetMinY ();
 
 			UIViewAnimationCurve curve = e.AnimationCurve;
-			UIView.Animate (e.AnimationDuration, 0, ConvertToAnimationOptions(e.AnimationCurve), ()=> {
+			UIView.Animate (e.AnimationDuration, 0, ConvertToAnimationOptions (e.AnimationCurve), () => {
 				View.LayoutIfNeeded ();
+				Tuple<nfloat, nfloat> changes = UpdateTableInsets ();
+
+				// Move content with keyboard
+				var offset = TableView.ContentOffset;
+				offset.Y += changes.Item1 - changes.Item2;
+				TableView.ContentOffset = offset;
 			}, null);
 		}
 
+		// returns changes in ContentInsetY and ContentOffsetY values
+		Tuple<nfloat, nfloat> UpdateTableInsets()
+		{
+			UIEdgeInsets oldInset = TableView.ContentInset;
+			CGPoint oldOffset = TableView.ContentOffset;
+
+			nfloat hiddenHeight = TableView.Frame.GetMaxY () - Chat.Frame.GetMinY();
+
+			UIEdgeInsets newInset = oldInset;
+			newInset.Bottom = hiddenHeight;
+
+			TableView.ContentInset = newInset; // this may change ContentOffset property implicitly
+			TableView.ScrollIndicatorInsets = newInset;
+
+			return new Tuple<nfloat, nfloat> (newInset.Bottom - oldInset.Bottom, TableView.ContentOffset.Y - oldOffset.Y);
+		}
+
 		UIViewAnimationOptions ConvertToAnimationOptions(UIViewAnimationCurve curve)
 		{
 			// Looks like a hack. But it is correct.
 			// UIViewAnimationCurve and UIViewAnimationOptions are shifted by 16 bits
+			// http://stackoverflow.com/questions/18870447/how-to-use-the-default-ios7-uianimation-curve/18873820#18873820
 			return (UIViewAnimationOptions)((int)curve << 16);
 		}
 

Chat/Chat/ChatViewController.designer.cs

@@ -15,6 +15,9 @@ namespace Chat
 		[Outlet]
 		UIKit.NSLayoutConstraint BottomConstraint { get; set; }
 
+		[Outlet]
+		UIKit.UIView Chat { get; set; }
+
 		[Outlet]
 		UIKit.UIButton SendButton { get; set; }
 
@@ -45,6 +48,11 @@ namespace Chat
 				TextView.Dispose ();
 				TextView = null;
 			}
+
+			if (Chat != null) {
+				Chat.Dispose ();
+				Chat = null;
+			}
 		}
 	}
 }

Chat/Chat/MainStoryboard_iPhone.storyboard

@@ -17,36 +17,8 @@
                         <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                         <subviews>
-                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="5AB-rQ-cHe">
-                                <rect key="frame" x="0.0" y="518" width="320" height="50"/>
-                                <subviews>
-                                    <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="9s5-K4-3tE">
-                                        <rect key="frame" x="10" y="10" width="253" height="30"/>
-                                        <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
-                                        <fontDescription key="fontDescription" type="system" pointSize="14"/>
-                                        <textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
-                                    </textView>
-                                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="gmO-Xl-znj">
-                                        <rect key="frame" x="273" y="10" width="37" height="30"/>
-                                        <fontDescription key="fontDescription" type="boldSystem" pointSize="15"/>
-                                        <state key="normal" title="Send">
-                                            <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
-                                        </state>
-                                    </button>
-                                </subviews>
-                                <color key="backgroundColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
-                                <constraints>
-                                    <constraint firstAttribute="height" constant="50" id="4bm-Wh-9tf"/>
-                                    <constraint firstAttribute="trailing" secondItem="gmO-Xl-znj" secondAttribute="trailing" constant="10" id="9rx-oU-n4h"/>
-                                    <constraint firstItem="9s5-K4-3tE" firstAttribute="top" secondItem="5AB-rQ-cHe" secondAttribute="top" constant="10" id="Qft-O9-MCu"/>
-                                    <constraint firstItem="gmO-Xl-znj" firstAttribute="leading" secondItem="9s5-K4-3tE" secondAttribute="trailing" constant="10" id="euT-gK-943"/>
-                                    <constraint firstAttribute="bottom" secondItem="gmO-Xl-znj" secondAttribute="bottom" constant="10" id="fiq-e9-bSb"/>
-                                    <constraint firstAttribute="bottom" secondItem="9s5-K4-3tE" secondAttribute="bottom" constant="10" id="nlh-YW-f6B"/>
-                                    <constraint firstItem="9s5-K4-3tE" firstAttribute="leading" secondItem="5AB-rQ-cHe" secondAttribute="leading" constant="10" id="pd4-Zd-hcK"/>
-                                </constraints>
-                            </view>
                             <tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="44" sectionHeaderHeight="22" sectionFooterHeight="22" translatesAutoresizingMaskIntoConstraints="NO" id="0ka-sN-sOO">
-                                <rect key="frame" x="0.0" y="20" width="320" height="498"/>
+                                <rect key="frame" x="0.0" y="20" width="320" height="548"/>
                                 <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                                 <prototypes>
                                     <tableViewCell contentMode="scaleToFill" selectionStyle="none" indentationWidth="10" reuseIdentifier="Incoming" id="bHN-iS-6rr" customClass="IncomingCell">
@@ -116,10 +88,38 @@
                                     </tableViewCell>
                                 </prototypes>
                             </tableView>
+                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="5AB-rQ-cHe">
+                                <rect key="frame" x="0.0" y="518" width="320" height="50"/>
+                                <subviews>
+                                    <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="9s5-K4-3tE">
+                                        <rect key="frame" x="10" y="10" width="253" height="30"/>
+                                        <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                        <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                        <textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
+                                    </textView>
+                                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="gmO-Xl-znj">
+                                        <rect key="frame" x="273" y="10" width="37" height="30"/>
+                                        <fontDescription key="fontDescription" type="boldSystem" pointSize="15"/>
+                                        <state key="normal" title="Send">
+                                            <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
+                                        </state>
+                                    </button>
+                                </subviews>
+                                <color key="backgroundColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="50" id="4bm-Wh-9tf"/>
+                                    <constraint firstAttribute="trailing" secondItem="gmO-Xl-znj" secondAttribute="trailing" constant="10" id="9rx-oU-n4h"/>
+                                    <constraint firstItem="9s5-K4-3tE" firstAttribute="top" secondItem="5AB-rQ-cHe" secondAttribute="top" constant="10" id="Qft-O9-MCu"/>
+                                    <constraint firstItem="gmO-Xl-znj" firstAttribute="leading" secondItem="9s5-K4-3tE" secondAttribute="trailing" constant="10" id="euT-gK-943"/>
+                                    <constraint firstAttribute="bottom" secondItem="gmO-Xl-znj" secondAttribute="bottom" constant="10" id="fiq-e9-bSb"/>
+                                    <constraint firstAttribute="bottom" secondItem="9s5-K4-3tE" secondAttribute="bottom" constant="10" id="nlh-YW-f6B"/>
+                                    <constraint firstItem="9s5-K4-3tE" firstAttribute="leading" secondItem="5AB-rQ-cHe" secondAttribute="leading" constant="10" id="pd4-Zd-hcK"/>
+                                </constraints>
+                            </view>
                         </subviews>
                         <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
                         <constraints>
-                            <constraint firstItem="5AB-rQ-cHe" firstAttribute="top" secondItem="0ka-sN-sOO" secondAttribute="bottom" id="9zR-cm-tcZ"/>
+                            <constraint firstItem="2va-98-mOY" firstAttribute="top" secondItem="0ka-sN-sOO" secondAttribute="bottom" id="LxQ-Yp-0SF"/>
                             <constraint firstItem="2va-98-mOY" firstAttribute="top" secondItem="5AB-rQ-cHe" secondAttribute="bottom" id="auN-MO-VPe"/>
                             <constraint firstItem="5AB-rQ-cHe" firstAttribute="leading" secondItem="kh9-bI-dsS" secondAttribute="leading" id="cSv-z1-AfV"/>
                             <constraint firstItem="0ka-sN-sOO" firstAttribute="leading" secondItem="kh9-bI-dsS" secondAttribute="leading" id="sDm-jl-Vpb"/>
@@ -130,6 +130,7 @@
                     </view>
                     <connections>
                         <outlet property="BottomConstraint" destination="auN-MO-VPe" id="18l-BH-qKE"/>
+                        <outlet property="Chat" destination="5AB-rQ-cHe" id="WDC-Fe-B4E"/>
                         <outlet property="SendButton" destination="gmO-Xl-znj" id="mNq-iE-tRc"/>
                         <outlet property="TableView" destination="0ka-sN-sOO" id="uxW-0d-AwN"/>
                         <outlet property="TextView" destination="9s5-K4-3tE" id="w8i-uf-qOI"/>