Groups list: Support dynamic fonts by enabling self-sizing table view…

… cell, and use constraints to define the cell’s size. element-hq/riot-meta#114
element-hq · Dec 28, 2017 · 0a0d3cf · 0a0d3cf
1 parent 30be799
commit 0a0d3cf
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 54 deletions.
diff --git a/Riot/ViewController/GroupsViewController.m b/Riot/ViewController/GroupsViewController.m
@@ -83,6 +83,10 @@ - (void)viewDidLoad
     // Hide line separators of empty cells
     self.groupsTableView.tableFooterView = [[UIView alloc] init];
 
+    // Enable self sizing cells
+    self.groupsTableView.rowHeight = UITableViewAutomaticDimension;
+    self.groupsTableView.estimatedRowHeight = 74;
+
     // Observe UIApplicationDidEnterBackgroundNotification to refresh bubbles when app leaves the foreground state.
     UIApplicationDidEnterBackgroundNotificationObserver = [[NSNotificationCenter defaultCenter] addObserverForName:UIApplicationDidEnterBackgroundNotification object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification *notif) {
 

diff --git a/Riot/Views/Group/GroupInviteTableViewCell.m b/Riot/Views/Group/GroupInviteTableViewCell.m
@@ -91,11 +91,4 @@ - (void)render:(MXKCellData *)cellData
     [super render:cellData];
 }
 
-+ (CGFloat)heightForCellData:(MXKCellData *)cellData withMaximumWidth:(CGFloat)maxWidth
-{
-    // The height is fixed
-    // @TODO change this to support dynamic fonts
-    return 105;
-}
-
 @end
diff --git a/Riot/Views/Group/GroupInviteTableViewCell.xib b/Riot/Views/Group/GroupInviteTableViewCell.xib
@@ -1,22 +1,22 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13529" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait">
         <adaptation id="fullscreen"/>
     </device>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13527"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
         <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
         <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
         <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
         <tableViewCell contentMode="scaleToFill" selectionStyle="blue" hidesAccessoryWhenEditing="NO" indentationLevel="1" indentationWidth="0.0" id="L2L-l5-wPx" customClass="GroupInviteTableViewCell">
-            <rect key="frame" x="0.0" y="0.0" width="600" height="105"/>
+            <rect key="frame" x="0.0" y="0.0" width="600" height="111"/>
             <autoresizingMask key="autoresizingMask"/>
             <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="L2L-l5-wPx" id="aXz-IR-jj5">
-                <rect key="frame" x="0.0" y="0.0" width="600" height="104.5"/>
+                <rect key="frame" x="0.0" y="0.0" width="600" height="110.5"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="RX5-eD-c3c" customClass="MXKImageView">
@@ -28,28 +28,22 @@
                             <constraint firstAttribute="height" constant="42" id="WPC-tL-hnM"/>
                         </constraints>
                     </view>
-                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" verticalHuggingPriority="251" text="GroupName" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Lg1-xQ-AGn">
-                        <rect key="frame" x="69" y="14" width="94.5" height="21"/>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" verticalHuggingPriority="251" text="GroupName" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Lg1-xQ-AGn">
+                        <rect key="frame" x="69" y="14" width="96" height="21"/>
                         <accessibility key="accessibilityConfiguration" identifier="TitleLabel"/>
-                        <constraints>
-                            <constraint firstAttribute="height" constant="21" id="BeP-eL-JKM"/>
-                        </constraints>
-                        <fontDescription key="fontDescription" type="system" weight="medium" pointSize="17"/>
+                        <fontDescription key="fontDescription" style="UICTFontTextStyleHeadline"/>
                         <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <nil key="highlightedColor"/>
                     </label>
-                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="GroupDescription" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="dQt-mN-T6b">
-                        <rect key="frame" x="69" y="39" width="531" height="20"/>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" text="GroupDescription" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="dQt-mN-T6b">
+                        <rect key="frame" x="69" y="39" width="531" height="18.5"/>
                         <accessibility key="accessibilityConfiguration" identifier="LastEventDescription"/>
-                        <constraints>
-                            <constraint firstAttribute="height" constant="20" id="qI2-ud-qcA"/>
-                        </constraints>
-                        <fontDescription key="fontDescription" type="system" pointSize="15"/>
+                        <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
                         <color key="textColor" red="0.66666666666666663" green="0.66666666666666663" blue="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <nil key="highlightedColor"/>
                     </label>
                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="tjf-WP-vTl" userLabel="buttonsContainer">
-                        <rect key="frame" x="68" y="65" width="478" height="30"/>
+                        <rect key="frame" x="68" y="67.5" width="478" height="30"/>
                         <subviews>
                             <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Fc3-Id-aaG" userLabel="Left Button">
                                 <rect key="frame" x="0.0" y="0.0" width="229" height="30"/>
@@ -85,9 +79,9 @@
                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="gCG-UR-b2u">
                         <rect key="frame" x="563" y="14" width="27" height="20"/>
                         <subviews>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="!" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Ztl-w2-d20">
-                                <rect key="frame" x="11" y="2" width="5" height="17"/>
-                                <fontDescription key="fontDescription" type="boldSystem" pointSize="14"/>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="!" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Ztl-w2-d20">
+                                <rect key="frame" x="11.5" y="2.5" width="4" height="16"/>
+                                <fontDescription key="fontDescription" style="UICTFontTextStyleFootnote"/>
                                 <color key="textColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                 <nil key="highlightedColor"/>
                             </label>
@@ -96,20 +90,23 @@
                         <accessibility key="accessibilityConfiguration" identifier="NoticeBadgeView"/>
                         <constraints>
                             <constraint firstAttribute="width" constant="27" id="1PJ-E8-qkY"/>
+                            <constraint firstAttribute="height" secondItem="Ztl-w2-d20" secondAttribute="height" constant="4" id="ap4-fi-Cir"/>
                             <constraint firstItem="Ztl-w2-d20" firstAttribute="centerX" secondItem="gCG-UR-b2u" secondAttribute="centerX" id="jzA-xv-12e"/>
-                            <constraint firstAttribute="height" constant="20" id="l2J-Uf-lxI"/>
                             <constraint firstItem="Ztl-w2-d20" firstAttribute="centerY" secondItem="gCG-UR-b2u" secondAttribute="centerY" id="nQM-He-36A"/>
                         </constraints>
                     </view>
                 </subviews>
                 <constraints>
                     <constraint firstItem="dQt-mN-T6b" firstAttribute="top" secondItem="Lg1-xQ-AGn" secondAttribute="bottom" constant="4" id="1ka-cr-uZP"/>
                     <constraint firstItem="RX5-eD-c3c" firstAttribute="leading" secondItem="aXz-IR-jj5" secondAttribute="leading" constant="13" id="3EJ-qT-J8r"/>
+                    <constraint firstAttribute="bottom" secondItem="tjf-WP-vTl" secondAttribute="bottom" constant="13" id="KbC-Xa-zOO"/>
                     <constraint firstItem="Lg1-xQ-AGn" firstAttribute="leading" secondItem="RX5-eD-c3c" secondAttribute="trailing" constant="14" id="Pgp-JM-oQd"/>
                     <constraint firstItem="gCG-UR-b2u" firstAttribute="top" secondItem="aXz-IR-jj5" secondAttribute="top" constant="14" id="Vb6-hc-Bsk"/>
                     <constraint firstItem="dQt-mN-T6b" firstAttribute="leading" secondItem="RX5-eD-c3c" secondAttribute="trailing" constant="14" id="XFM-LG-4uJ"/>
                     <constraint firstAttribute="trailing" secondItem="gCG-UR-b2u" secondAttribute="trailing" constant="10" id="Zf3-3f-SWg"/>
                     <constraint firstItem="gCG-UR-b2u" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="Lg1-xQ-AGn" secondAttribute="trailing" constant="4" id="e2Q-RZ-IF2"/>
+                    <constraint firstItem="RX5-eD-c3c" firstAttribute="top" secondItem="aXz-IR-jj5" secondAttribute="top" constant="15" id="hzp-fg-H6s"/>
+                    <constraint firstItem="tjf-WP-vTl" firstAttribute="top" secondItem="dQt-mN-T6b" secondAttribute="bottom" constant="10" id="jMe-7R-JGl"/>
                     <constraint firstAttribute="trailing" secondItem="tjf-WP-vTl" secondAttribute="trailing" constant="54" id="kFW-Fa-ibz"/>
                     <constraint firstAttribute="trailing" secondItem="dQt-mN-T6b" secondAttribute="trailing" id="t2m-pb-5zd"/>
                     <constraint firstItem="Lg1-xQ-AGn" firstAttribute="top" secondItem="aXz-IR-jj5" secondAttribute="top" constant="14" id="tY3-6V-A3B"/>
@@ -118,10 +115,6 @@
             </tableViewCellContentView>
             <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
             <accessibility key="accessibilityConfiguration" identifier="InviteRecentTableViewCell"/>
-            <constraints>
-                <constraint firstAttribute="bottom" secondItem="tjf-WP-vTl" secondAttribute="bottom" constant="10" id="NTY-0b-Ylt"/>
-                <constraint firstItem="RX5-eD-c3c" firstAttribute="top" secondItem="L2L-l5-wPx" secondAttribute="top" constant="15" id="uLf-cg-Vge"/>
-            </constraints>
             <connections>
                 <outlet property="groupAvatar" destination="RX5-eD-c3c" id="Nwn-t3-W7i"/>
                 <outlet property="groupDescription" destination="dQt-mN-T6b" id="KwU-iN-0Bu"/>

diff --git a/Riot/Views/Group/GroupTableViewCell.m b/Riot/Views/Group/GroupTableViewCell.m
@@ -31,15 +31,6 @@ - (void)awakeFromNib
     // Initialize unread count badge
     [_missedNotifAndUnreadBadgeBgView.layer setCornerRadius:10];
     _missedNotifAndUnreadBadgeBgViewWidthConstraint.constant = 0;
-
-    if ([UIFont respondsToSelector:@selector(systemFontOfSize:weight:)])
-    {
-        self.groupName.font = [UIFont systemFontOfSize:17 weight:UIFontWeightMedium];
-    }
-    else
-    {
-        self.groupName.font = [UIFont systemFontOfSize:17];
-    }
 }
 
 - (void)customizeTableViewCellRendering
@@ -77,6 +68,8 @@ - (void)render:(MXKCellData *)cellData
     }
 }
 
+// @TODO: Remove this method required by `MXKCellRendering` protocol.
+// It is not used for the groups table view.
 + (CGFloat)heightForCellData:(MXKCellData *)cellData withMaximumWidth:(CGFloat)maxWidth
 {
     // The height is fixed