I am trying to achieve a header look similar to Instagram with an imageView on the far left and 3 UILabels for the posts, followers, and following. I am having trouble achieving this in autolayout, specifically the horizontal spacing so that it is equally space across all devices. When I do auto layout, the labels are not evenly spaced and get truncated. Any ideas as to how I can solve this problem?
I would do something like this:
and here is the raw xib file with the constraints, if you'd like to take a deeper look how I have built it up:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="9531" systemVersion="15C50" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES">
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="9529"/>
<capability name="Aspect ratio constraints" minToolsVersion="5.1"/>
</dependencies>
<objects>
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
<view contentMode="scaleToFill" id="iN0-l3-epB">
<rect key="frame" x="0.0" y="0.0" width="320" height="93"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="dx4-Jc-VhS">
<rect key="frame" x="8" y="8" width="77" height="77"/>
<constraints>
<constraint firstAttribute="width" secondItem="dx4-Jc-VhS" secondAttribute="height" multiplier="1:1" id="7hG-uk-QY2"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" adjustsLetterSpacingToFitWidth="YES" translatesAutoresizingMaskIntoConstraints="NO" id="DIH-73-jei">
<rect key="frame" x="252" y="8" width="60" height="24"/>
<constraints>
<constraint firstAttribute="height" constant="24" id="M4e-ka-Nbw"/>
</constraints>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" adjustsLetterSpacingToFitWidth="YES" translatesAutoresizingMaskIntoConstraints="NO" id="i7h-Ht-kAi">
<rect key="frame" x="184" y="8" width="60" height="24"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" adjustsLetterSpacingToFitWidth="YES" translatesAutoresizingMaskIntoConstraints="NO" id="yDX-xV-j2U">
<rect key="frame" x="116" y="8" width="60" height="24"/>
<constraints>
<constraint firstAttribute="width" constant="60" id="dLL-w6-I5C"/>
</constraints>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="ZYY-b1-nBH">
<rect key="frame" x="116.5" y="36" width="60" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="14"/>
<color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="7ao-CO-oe0">
<rect key="frame" x="184" y="36" width="60" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="14"/>
<color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="t6Q-M4-Jz0">
<rect key="frame" x="252" y="36" width="60" height="21"/>
<constraints>
<constraint firstAttribute="height" constant="21" id="JzX-Tc-RP8"/>
</constraints>
<fontDescription key="fontDescription" type="system" pointSize="14"/>
<color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
<constraints>
<constraint firstItem="i7h-Ht-kAi" firstAttribute="centerY" secondItem="yDX-xV-j2U" secondAttribute="centerY" id="4kA-0u-t4A"/>
<constraint firstAttribute="bottom" secondItem="dx4-Jc-VhS" secondAttribute="bottom" constant="8" id="Bgt-e6-X9u"/>
<constraint firstItem="7ao-CO-oe0" firstAttribute="width" secondItem="i7h-Ht-kAi" secondAttribute="width" id="CPx-Jk-7q3"/>
<constraint firstItem="7ao-CO-oe0" firstAttribute="centerY" secondItem="ZYY-b1-nBH" secondAttribute="centerY" id="F3q-A8-pXS"/>
<constraint firstItem="DIH-73-jei" firstAttribute="leading" secondItem="i7h-Ht-kAi" secondAttribute="trailing" constant="8" id="HlC-6s-TUN"/>
<constraint firstItem="DIH-73-jei" firstAttribute="width" secondItem="yDX-xV-j2U" secondAttribute="width" id="PxV-sd-GCV"/>
<constraint firstItem="DIH-73-jei" firstAttribute="height" secondItem="yDX-xV-j2U" secondAttribute="height" id="Stq-AB-hyP"/>
<constraint firstItem="7ao-CO-oe0" firstAttribute="height" secondItem="ZYY-b1-nBH" secondAttribute="height" id="Tw1-1F-66D"/>
<constraint firstItem="i7h-Ht-kAi" firstAttribute="leading" secondItem="yDX-xV-j2U" secondAttribute="trailing" constant="8" id="WKz-Ds-5RX"/>
<constraint firstItem="dx4-Jc-VhS" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="8" id="ase-Fc-VNG"/>
<constraint firstItem="t6Q-M4-Jz0" firstAttribute="width" secondItem="DIH-73-jei" secondAttribute="width" id="cag-85-mNS"/>
<constraint firstItem="i7h-Ht-kAi" firstAttribute="width" secondItem="yDX-xV-j2U" secondAttribute="width" id="czV-kf-29P"/>
<constraint firstItem="i7h-Ht-kAi" firstAttribute="height" secondItem="yDX-xV-j2U" secondAttribute="height" id="doF-G5-ewa"/>
<constraint firstItem="t6Q-M4-Jz0" firstAttribute="height" secondItem="ZYY-b1-nBH" secondAttribute="height" id="fSw-H8-yMk"/>
<constraint firstItem="t6Q-M4-Jz0" firstAttribute="centerY" secondItem="ZYY-b1-nBH" secondAttribute="centerY" id="gye-vS-aNp"/>
<constraint firstItem="t6Q-M4-Jz0" firstAttribute="centerX" secondItem="DIH-73-jei" secondAttribute="centerX" id="kEo-1I-ZFN"/>
<constraint firstItem="dx4-Jc-VhS" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="centerY" id="llB-Hy-05T"/>
<constraint firstItem="7ao-CO-oe0" firstAttribute="centerX" secondItem="i7h-Ht-kAi" secondAttribute="centerX" id="oBf-jc-iLR"/>
<constraint firstItem="ZYY-b1-nBH" firstAttribute="width" secondItem="yDX-xV-j2U" secondAttribute="width" id="obW-uC-rIr"/>
<constraint firstAttribute="trailing" secondItem="DIH-73-jei" secondAttribute="trailing" constant="8" id="qEY-V0-NM6"/>
<constraint firstItem="ZYY-b1-nBH" firstAttribute="centerX" secondItem="yDX-xV-j2U" secondAttribute="centerX" id="qZ0-QE-Z49"/>
<constraint firstItem="yDX-xV-j2U" firstAttribute="top" secondItem="dx4-Jc-VhS" secondAttribute="top" id="t13-zB-C5B"/>
<constraint firstItem="t6Q-M4-Jz0" firstAttribute="top" secondItem="DIH-73-jei" secondAttribute="bottom" constant="4" id="udZ-0h-vdz"/>
<constraint firstItem="dx4-Jc-VhS" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" constant="8" id="vFh-rW-JtQ"/>
<constraint firstItem="DIH-73-jei" firstAttribute="centerY" secondItem="yDX-xV-j2U" secondAttribute="centerY" id="x2Z-nL-xJF"/>
<constraint firstItem="yDX-xV-j2U" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="dx4-Jc-VhS" secondAttribute="trailing" constant="8" id="zSX-Vg-3Wi"/>
</constraints>
<nil key="simulatedStatusBarMetrics"/>
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
<point key="canvasLocation" x="351" y="180.5"/>
</view>
</objects>
</document>
