在 Xcode 中，我嘗試使用帶有 Interface Builder 的自動布局在影像上放置標簽。關鍵是讓影像縮放到不同的設備，同時縮放標簽，以便它仍然保持在影像上的相同位置。
這是一個與此非常相似的問題，減去按鈕：
它可以是任何尺寸，可以有@2x / @3x 尺寸……重要的是我們知道它的縱橫比。在這種情況下，我的影像是600 x 800，這是一個3:4比率。
我們希望將布局設定為最寬的預期尺寸——因此我們將使用 iPhone 13 Pro Max。
將 imageView 和標簽嵌入到“持有人視圖”中。我們將設定相對于imageView底部的標簽 y 位置，無論螢屏上的位置如何，這都會使其保持不變。
確保持有人視圖具有與影像匹配的縱橫比約束，并將影像視圖約束為零到持有人視圖的所有四個邊。
設定字體，使其非常適合“標簽區域”。與 imageView 成比例地限制其寬度。在這種情況下，乘數0.85效果很好。
將標簽的 CenterY 約束到 imageView 的底部，并使用乘數將其放置到位。在這種情況下，0.25作業。
在標簽上啟用 Autoshrink，最小字體比例為 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
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/375431.html
下一篇：ValueError：tf.function-decorated函式在使用自定義損失函式時嘗試在非首次呼叫時創建變數