使用自动布局 (IB) 缩放放置在图像上的标签？
Scaling a label placed over an image with Auto Layout (IB)?
在 Xcode 中，我尝试使用 Interface Builder 的自动布局在图像上放置标签。重点是让图像缩放到不同的设备，同时缩放标签，以便它仍然保持在图像上的相同位置。
这是一个与此非常相似的问题，只是减去按钮：
在那 post 中，提问者提到第二个答案与他们解决问题一样接近。它包括使用“填充视图”来约束标签，使其随图像一起移动。但是提问者对如何实施这些约束感到困惑（我也是）。谁能进一步解释如何做到这一点？或者有其他方法吗？
因为您说标签将是“秒表”类型的图像，文本格式为“00:00:00”，所以我假设您使用的是固定宽度的字体。
在这个例子中，我将使用 Courier New Bold，并且假设应用程序 运行 在 iPhone 上处于纵向模式。相同的信息将适用于横向或 iPad...您只需要相应地设置尺寸。
这是我要使用的图像：
它可以是任何尺寸，可以有@2x / @3x 尺寸...重要的是我们知道它的纵横比。在这种情况下，我的图像是 600 x 800，这是 3:4 比率。
我们希望为预期的最宽尺寸设置布局 -- 因此我们将使用 iPhone 13 Pro Max。
在“holder view”中嵌入 imageView 和标签。我们将相对于 imageView 的 bottom 设置标签 y 位置，这将使其保持不变，而不管屏幕上的位置如何。
确保 holder 视图具有与图像匹配的宽高比约束，并将 imageView 的零值约束到 holder 视图的所有四个边。
设置字体，使其适合“标签区域”。将其宽度限制为与 imageView 成比例。在这种情况下，0.85 的乘数效果很好。
将标签的 CenterY 约束到 imageView 的 bottom，并使用一个乘数将其放置到位。在这种情况下，0.25 有效。
在标签上启用自动收缩，最小字体比例为 0.25（尽管它不太可能变得那么小）。
重要提示：将标签的基线设置为 Align Centers ... 这将使文本在我们想要的位置垂直对齐。
这是它在 Storyboard 中的样子：
并且在 运行 时有几个不同的宽度：
这是 Storyboard 的源代码，因此您可以检查约束和元素属性：
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="19455" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Xg6-6D-sKc">
<device id="retina6_7" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19454"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="System colors in document resources" minToolsVersion="11.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Timer View Controller-->
<scene sceneID="gRg-mL-Zeo">
<objects>
<viewController id="Xg6-6D-sKc" customClass="TimerViewController" customModule="SW15Scratch" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="wLy-zd-hy6">
<rect key="frame" x="0.0" y="0.0" width="428" height="926"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="XHF-SM-3c4">
<rect key="frame" x="0.0" y="177.66666666666669" width="428" height="570.66666666666652"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="bkg" translatesAutoresizingMaskIntoConstraints="NO" id="2Xc-0o-ie7" userLabel="ImageView">
<rect key="frame" x="0.0" y="0.0" width="428" height="570.66666666666663"/>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="00:00:00" textAlignment="center" lineBreakMode="tailTruncation" minimumScaleFactor="0.25" translatesAutoresizingMaskIntoConstraints="NO" id="TYc-HH-6id">
<rect key="frame" x="32" y="100.33333333333334" width="364" height="85"/>
<fontDescription key="fontDescription" name="CourierNewPS-BoldMT" family="Courier New" pointSize="75"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" systemColor="systemYellowColor"/>
<constraints>
<constraint firstItem="TYc-HH-6id" firstAttribute="centerX" secondItem="2Xc-0o-ie7" secondAttribute="centerX" id="Mca-tA-1Yt"/>
<constraint firstAttribute="trailing" secondItem="2Xc-0o-ie7" secondAttribute="trailing" id="Vgz-B5-aq3"/>
<constraint firstItem="TYc-HH-6id" firstAttribute="centerY" secondItem="2Xc-0o-ie7" secondAttribute="bottom" multiplier="0.25" id="ZVs-Ut-o2V"/>
<constraint firstItem="TYc-HH-6id" firstAttribute="width" secondItem="2Xc-0o-ie7" secondAttribute="width" multiplier="0.85" id="h5u-Vx-VIZ"/>
<constraint firstAttribute="width" secondItem="XHF-SM-3c4" secondAttribute="height" multiplier="3:4" id="hD5-0n-cot"/>
<constraint firstAttribute="bottom" secondItem="2Xc-0o-ie7" secondAttribute="bottom" id="u7H-o7-HPd"/>
<constraint firstItem="2Xc-0o-ie7" firstAttribute="leading" secondItem="XHF-SM-3c4" secondAttribute="leading" id="v8V-GX-3Aj"/>
<constraint firstItem="2Xc-0o-ie7" firstAttribute="top" secondItem="XHF-SM-3c4" secondAttribute="top" id="xKB-NI-2RP"/>
</constraints>
</view>
</subviews>
<viewLayoutGuide key="safeArea" id="93z-as-uJR"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="XHF-SM-3c4" firstAttribute="centerX" secondItem="93z-as-uJR" secondAttribute="centerX" id="IfB-NL-VTA"/>
<constraint firstItem="XHF-SM-3c4" firstAttribute="width" secondItem="93z-as-uJR" secondAttribute="width" id="Vad-XH-7tx"/>
<constraint firstItem="XHF-SM-3c4" firstAttribute="centerY" secondItem="wLy-zd-hy6" secondAttribute="centerY" id="znr-ky-5ns"/>
</constraints>
</view>
<connections>
<outlet property="holderView" destination="XHF-SM-3c4" id="tIP-go-kGI"/>
<outlet property="hvWidth" destination="Vad-XH-7tx" id="OGg-sX-LqR"/>
<outlet property="theLabel" destination="TYc-HH-6id" id="End-Tr-hNP"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="4eF-f0-IGU" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1536" y="113"/>
</scene>
</scenes>
<resources>
<image name="bkg" width="300" height="400"/>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
<systemColor name="systemYellowColor">
<color red="1" green="0.80000000000000004" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
</resources>
</document>
和一个示例控制器——每次点击任何地方都会减少 5% 的宽度：
class TimerViewController: UIViewController {
@IBOutlet var theLabel: UILabel!
@IBOutlet var holderView: UIView!
@IBOutlet var hvWidth: NSLayoutConstraint!
// start Timer Countdown at 2-hours
var seconds: Int = 60 * 60 * 2
override func viewDidLoad() {
super.viewDidLoad()
self.updateLabel()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { timer in
self.seconds -= 1
if self.seconds < 0 {
timer.invalidate()
}
self.updateLabel()
}
}
func updateLabel() -> Void {
let formatter = DateComponentsFormatter()
formatter.allowedUnits = [.hour, .minute, .second]
formatter.unitsStyle = .positional
formatter.zeroFormattingBehavior = .pad
if let formattedString = formatter.string(from: TimeInterval(self.seconds)) {
self.theLabel.text = formattedString
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
var m = hvWidth.multiplier
m -= 0.05
if m < 0.25 {
m = 1.0
}
hvWidth.isActive = false
hvWidth = holderView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: m)
hvWidth.isActive = true
}
}
在 Xcode 中，我尝试使用 Interface Builder 的自动布局在图像上放置标签。重点是让图像缩放到不同的设备，同时缩放标签，以便它仍然保持在图像上的相同位置。
这是一个与此非常相似的问题，只是减去按钮：
在那 post 中，提问者提到第二个答案与他们解决问题一样接近。它包括使用“填充视图”来约束标签，使其随图像一起移动。但是提问者对如何实施这些约束感到困惑（我也是）。谁能进一步解释如何做到这一点？或者有其他方法吗？
因为您说标签将是“秒表”类型的图像，文本格式为“00:00:00”，所以我假设您使用的是固定宽度的字体。
在这个例子中，我将使用 Courier New Bold，并且假设应用程序 运行 在 iPhone 上处于纵向模式。相同的信息将适用于横向或 iPad...您只需要相应地设置尺寸。
这是我要使用的图像：
它可以是任何尺寸，可以有@2x / @3x 尺寸...重要的是我们知道它的纵横比。在这种情况下，我的图像是 600 x 800，这是 3:4 比率。
我们希望为预期的最宽尺寸设置布局 -- 因此我们将使用 iPhone 13 Pro Max。
在“holder view”中嵌入 imageView 和标签。我们将相对于 imageView 的 bottom 设置标签 y 位置，这将使其保持不变，而不管屏幕上的位置如何。
确保 holder 视图具有与图像匹配的宽高比约束，并将 imageView 的零值约束到 holder 视图的所有四个边。
设置字体，使其适合“标签区域”。将其宽度限制为与 imageView 成比例。在这种情况下，0.85 的乘数效果很好。
将标签的 CenterY 约束到 imageView 的 bottom，并使用一个乘数将其放置到位。在这种情况下，0.25 有效。
在标签上启用自动收缩，最小字体比例为 0.25（尽管它不太可能变得那么小）。
重要提示：将标签的基线设置为 Align Centers ... 这将使文本在我们想要的位置垂直对齐。
这是它在 Storyboard 中的样子：
并且在 运行 时有几个不同的宽度：
这是 Storyboard 的源代码，因此您可以检查约束和元素属性：
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="19455" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Xg6-6D-sKc">
<device id="retina6_7" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19454"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="System colors in document resources" minToolsVersion="11.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Timer View Controller-->
<scene sceneID="gRg-mL-Zeo">
<objects>
<viewController id="Xg6-6D-sKc" customClass="TimerViewController" customModule="SW15Scratch" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="wLy-zd-hy6">
<rect key="frame" x="0.0" y="0.0" width="428" height="926"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="XHF-SM-3c4">
<rect key="frame" x="0.0" y="177.66666666666669" width="428" height="570.66666666666652"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="bkg" translatesAutoresizingMaskIntoConstraints="NO" id="2Xc-0o-ie7" userLabel="ImageView">
<rect key="frame" x="0.0" y="0.0" width="428" height="570.66666666666663"/>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="00:00:00" textAlignment="center" lineBreakMode="tailTruncation" minimumScaleFactor="0.25" translatesAutoresizingMaskIntoConstraints="NO" id="TYc-HH-6id">
<rect key="frame" x="32" y="100.33333333333334" width="364" height="85"/>
<fontDescription key="fontDescription" name="CourierNewPS-BoldMT" family="Courier New" pointSize="75"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" systemColor="systemYellowColor"/>
<constraints>
<constraint firstItem="TYc-HH-6id" firstAttribute="centerX" secondItem="2Xc-0o-ie7" secondAttribute="centerX" id="Mca-tA-1Yt"/>
<constraint firstAttribute="trailing" secondItem="2Xc-0o-ie7" secondAttribute="trailing" id="Vgz-B5-aq3"/>
<constraint firstItem="TYc-HH-6id" firstAttribute="centerY" secondItem="2Xc-0o-ie7" secondAttribute="bottom" multiplier="0.25" id="ZVs-Ut-o2V"/>
<constraint firstItem="TYc-HH-6id" firstAttribute="width" secondItem="2Xc-0o-ie7" secondAttribute="width" multiplier="0.85" id="h5u-Vx-VIZ"/>
<constraint firstAttribute="width" secondItem="XHF-SM-3c4" secondAttribute="height" multiplier="3:4" id="hD5-0n-cot"/>
<constraint firstAttribute="bottom" secondItem="2Xc-0o-ie7" secondAttribute="bottom" id="u7H-o7-HPd"/>
<constraint firstItem="2Xc-0o-ie7" firstAttribute="leading" secondItem="XHF-SM-3c4" secondAttribute="leading" id="v8V-GX-3Aj"/>
<constraint firstItem="2Xc-0o-ie7" firstAttribute="top" secondItem="XHF-SM-3c4" secondAttribute="top" id="xKB-NI-2RP"/>
</constraints>
</view>
</subviews>
<viewLayoutGuide key="safeArea" id="93z-as-uJR"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="XHF-SM-3c4" firstAttribute="centerX" secondItem="93z-as-uJR" secondAttribute="centerX" id="IfB-NL-VTA"/>
<constraint firstItem="XHF-SM-3c4" firstAttribute="width" secondItem="93z-as-uJR" secondAttribute="width" id="Vad-XH-7tx"/>
<constraint firstItem="XHF-SM-3c4" firstAttribute="centerY" secondItem="wLy-zd-hy6" secondAttribute="centerY" id="znr-ky-5ns"/>
</constraints>
</view>
<connections>
<outlet property="holderView" destination="XHF-SM-3c4" id="tIP-go-kGI"/>
<outlet property="hvWidth" destination="Vad-XH-7tx" id="OGg-sX-LqR"/>
<outlet property="theLabel" destination="TYc-HH-6id" id="End-Tr-hNP"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="4eF-f0-IGU" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1536" y="113"/>
</scene>
</scenes>
<resources>
<image name="bkg" width="300" height="400"/>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
<systemColor name="systemYellowColor">
<color red="1" green="0.80000000000000004" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
</resources>
</document>
和一个示例控制器——每次点击任何地方都会减少 5% 的宽度：
class TimerViewController: UIViewController {
@IBOutlet var theLabel: UILabel!
@IBOutlet var holderView: UIView!
@IBOutlet var hvWidth: NSLayoutConstraint!
// start Timer Countdown at 2-hours
var seconds: Int = 60 * 60 * 2
override func viewDidLoad() {
super.viewDidLoad()
self.updateLabel()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { timer in
self.seconds -= 1
if self.seconds < 0 {
timer.invalidate()
}
self.updateLabel()
}
}
func updateLabel() -> Void {
let formatter = DateComponentsFormatter()
formatter.allowedUnits = [.hour, .minute, .second]
formatter.unitsStyle = .positional
formatter.zeroFormattingBehavior = .pad
if let formattedString = formatter.string(from: TimeInterval(self.seconds)) {
self.theLabel.text = formattedString
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
var m = hvWidth.multiplier
m -= 0.05
if m < 0.25 {
m = 1.0
}
hvWidth.isActive = false
hvWidth = holderView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: m)
hvWidth.isActive = true
}
}