-2

I am trying to add 7 x-axis values on a graph. I am trying to do this using a horizontal stackview with 7 labels inside of it, then programmatically setting each label's (subview's) contents.

But I can't get these labels to stay in the right places. Depending on the values, some labels are sometimes wider, sometimes narrower, the spacing seems to change, etc. (It appears that setting the Distribution to "Fill Equally" spaces them evenly but their width is then too narrow showing only the decimal point and the digit immediately to its left.)

Each value (label or textfield) is a number that will have a decimal point plus two to five digits (e.g., 1.0, 3.45, 678.92).

Each subview should remain the same width regardless of the contents, and remain properly centered below its corresponding grid line, with minimal spacing between each.

For example, is there a way to ensure every label has a constant width of 45 and every space between them to a width of 2, regardless of whether the label's contents is 1.1 or 2345.9?

(And, since I'm new to Swift, is there any reason to use a label vs a textfield?)

Thank you.

Greg
  • 667
  • 8
  • 19
  • A textfield allows for user text input/manipulation, while a label only displays text. – Justin Doan Nov 27 '18 at 01:23
  • Yes, that's why I was using labels. I just wasn't sure if there was any other reason to use a textfield instead. Thank you! – Greg Nov 27 '18 at 02:09
  • If your labels don't fit after you use `.fillEqually`, then you just don't have enough screen space. Either change the font or don't display all labels. I would recommend you go even further and use a graph framework. – EmilioPelaez Nov 27 '18 at 15:04

2 Answers2

0

I've tried to recreate your situation, but everything work properly. So you try my steps:

  • create 7 labels vertically with your content (like 1.09, 1.12345,...)
  • embed them to a stack view
  • making sure the stack view properties are: Vertical Axis, Alignment and Distribution is "fill", and spacing is 2 (as your choice)
  • Finally, add width constraints to 45 (as your choice), vertical and horizontal constraints

Hope it can help :)

phuongzzz
  • 85
  • 1
  • 10
  • The vertical axis is not a problem. It's the horizontal axis I'm having trouble with. Sorry, I thought I had included that. – Greg Nov 27 '18 at 02:16
0

If you want your labels to have a constant width of 45 and spacing of 2 ... you have 7 labels + 6 "spaces":

(7 * 45) + (6 * 2) = 327

So, if you give your horizontal stack view a Width constraint of 327 and Distribution set to Fill Equally, you will get your desired result:

enter image description here

As you've probably already noticed, to fit a value such as your example 678.92 into a label with a width of 45, you need to use a pretty small font (I used System 12).

Here is the storyboard so you can see for yourself:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="NQ7-zI-PK9">
            <objects>
                <viewController id="CCM-nn-BIf" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="C1V-ar-DQI">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" alignment="top" spacing="2" translatesAutoresizingMaskIntoConstraints="NO" id="vuE-Tw-FZh">
                                <rect key="frame" x="24" y="327" width="327" height="14.5"/>
                                <subviews>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="1" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Pyl-0P-Y2W">
                                        <rect key="frame" x="0.0" y="0.0" width="45" height="14.5"/>
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="2.4" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="we3-YL-c5s">
                                        <rect key="frame" x="47" y="0.0" width="45" height="14.5"/>
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="3.8" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Aj1-ad-r0E">
                                        <rect key="frame" x="94" y="0.0" width="45" height="14.5"/>
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="8.75" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="qnr-KX-c2b">
                                        <rect key="frame" x="141" y="0.0" width="45" height="14.5"/>
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="10.3" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="hiY-qQ-iUG">
                                        <rect key="frame" x="188" y="0.0" width="45" height="14.5"/>
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="22.44" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="oUW-RY-903">
                                        <rect key="frame" x="235" y="0.0" width="45" height="14.5"/>
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="678.92" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Wa7-Qj-2h9">
                                        <rect key="frame" x="282" y="0.0" width="45" height="14.5"/>
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                </subviews>
                                <constraints>
                                    <constraint firstAttribute="width" constant="327" id="DsZ-ie-6Cr"/>
                                </constraints>
                            </stackView>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="vuE-Tw-FZh" firstAttribute="centerY" secondItem="C1V-ar-DQI" secondAttribute="centerY" id="Xea-Fp-KaS"/>
                            <constraint firstItem="vuE-Tw-FZh" firstAttribute="centerX" secondItem="C1V-ar-DQI" secondAttribute="centerX" id="hTu-m6-hK6"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="ktE-hH-kAz"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="ulR-Rg-tMI" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="41" y="16"/>
        </scene>
    </scenes>
</document>

Edit:

Another option: Give one label a Width constraint of 45, set the stack view Distribution: Fill Equally / Spacing: 2, but do not constrain the stack view's width.

DonMag
  • 69,424
  • 5
  • 50
  • 86
  • Yes, I understand the arithmetic. The problem is that the labels keep coming out different widths, or all so narrow that only part of the number shows. I followed huongzzz's steps above with a horizontal stackview instead of vertical and I get the same problem. – Greg Nov 27 '18 at 14:37
  • @Greg - hmmm... the image I posted ***is*** a stack view with equal width labels. I added the source for the storyboard I used to create that image. – DonMag Nov 27 '18 at 15:01