ios - 如何在 ImageView 周围制作圆形边框

Question

我有一个垂直堆栈 View ，它将前导、顶部和尾随对齐到安全区域，因此它具有最大宽度。

除其他外，它还包含另一个垂直堆栈 View ，该 View 在其父 View 30 的尾随和前导空间中包含(仅)两个非常相似的水平堆栈 View 。

两者都没有额外的限制，间距均为 30。
第一个包含三个图像，所有图像的约束比均为 1:1，并且图像源也是二次的。它们设置为宽高比，并具有运行时属性layer.borderWidth: 1。

为了获得白色圆圈作为边框，我为第一个水平堆栈 View 创建了一个导出并调用:

let white = UIColor(white:1, alpha:1).cgColor
for v in imageStackView.subviews {
    v.layer.borderColor = white
    v.layer.cornerRadius = (v.layer.bounds.size.width/2)
    v.layer.masksToBounds = true
}

在我的函数viewDidLoad()中。编辑:按照建议，我将其移至 viewDidLayoutSubviews()

当我启动应用程序时，我得到圆角，但没有完整的圆。我发现这个方法可以在网上建立一个圈子，它曾经对我有用。这次我做错了什么？

这是我的完整场景:

    <scene sceneID="l8R-Sc-Iim">
        <objects>
            <viewController id="glE-1m-7jE" customClass="MenuViewController" customModule="MyProjekt" customModuleProvider="target" sceneMemberID="viewController">
                <view key="view" contentMode="scaleToFill" id="wz6-0R-OiW">
                    <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
                    <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                    <subviews>
                        <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="30" translatesAutoresizingMaskIntoConstraints="NO" id="ZNX-E4-fJI">
                            <rect key="frame" x="0.0" y="20" width="320" height="278.5"/>
                            <subviews>
                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Titel" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="uJa-bI-tyq">
                                    <rect key="frame" x="63" y="0.0" width="194.5" height="20.5"/>
                                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                    <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                    <nil key="highlightedColor"/>
                                </label>
                                <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="auto" translatesAutoresizingMaskIntoConstraints="NO" id="TUi-ah-W5J">
                                    <rect key="frame" x="0.0" y="50.5" width="320" height="100.5"/>
                                    <constraints>
                                        <constraint firstAttribute="width" secondItem="TUi-ah-W5J" secondAttribute="height" multiplier="1946:613" id="9o7-vb-64J"/>
                                    </constraints>
                                </imageView>
                                <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="CK2-GV-eAN">
                                    <rect key="frame" x="30" y="181" width="260" height="97.5"/>
                                    <subviews>
                                        <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="30" translatesAutoresizingMaskIntoConstraints="NO" id="4ag-dE-MkJ">
                                            <rect key="frame" x="0.0" y="0.0" width="260" height="67"/>
                                            <subviews>
                                                <imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="sonne" translatesAutoresizingMaskIntoConstraints="NO" id="rKB-oI-ZlW">
                                                    <rect key="frame" x="0.0" y="0.0" width="66.5" height="67"/>
                                                    <gestureRecognizers/>
                                                    <constraints>
                                                        <constraint firstAttribute="width" secondItem="rKB-oI-ZlW" secondAttribute="height" multiplier="1:1" id="Yjh-dy-ha5"/>
                                                    </constraints>
                                                    <userDefinedRuntimeAttributes>
                                                        <userDefinedRuntimeAttribute type="number" keyPath="layer.BorderWidth">
                                                            <integer key="value" value="1"/>
                                                        </userDefinedRuntimeAttribute>
                                                        <userDefinedRuntimeAttribute type="boolean" keyPath="userInteractionEnabled" value="YES"/>
                                                    </userDefinedRuntimeAttributes>
                                                    <connections>
                                                        <outletCollection property="gestureRecognizers" destination="JyJ-E7-IQF" appends="YES" id="Z9S-0C-Vb1"/>
                                                    </connections>
                                                </imageView>
                                                <imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="schnee" translatesAutoresizingMaskIntoConstraints="NO" id="TNu-EP-zpf">
                                                    <rect key="frame" x="96.5" y="0.0" width="67" height="67"/>
                                                    <gestureRecognizers/>
                                                    <constraints>
                                                        <constraint firstAttribute="width" secondItem="TNu-EP-zpf" secondAttribute="height" multiplier="1:1" id="uWO-vX-Y9D"/>
                                                    </constraints>
                                                    <userDefinedRuntimeAttributes>
                                                        <userDefinedRuntimeAttribute type="number" keyPath="layer.borderWidth">
                                                            <integer key="value" value="1"/>
                                                        </userDefinedRuntimeAttribute>
                                                    </userDefinedRuntimeAttributes>
                                                </imageView>
                                                <imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="sonne schnee" translatesAutoresizingMaskIntoConstraints="NO" id="SLM-td-gnU">
                                                    <rect key="frame" x="193.5" y="0.0" width="66.5" height="67"/>
                                                    <gestureRecognizers/>
                                                    <constraints>
                                                        <constraint firstAttribute="width" secondItem="SLM-td-gnU" secondAttribute="height" multiplier="1:1" id="1RH-Xt-phM"/>
                                                    </constraints>
                                                    <userDefinedRuntimeAttributes>
                                                        <userDefinedRuntimeAttribute type="number" keyPath="layer.borderWidth">
                                                            <integer key="value" value="1"/>
                                                        </userDefinedRuntimeAttribute>
                                                    </userDefinedRuntimeAttributes>
                                                </imageView>
                                            </subviews>
                                        </stackView>
                                        <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="20" translatesAutoresizingMaskIntoConstraints="NO" id="1GK-qd-V3k">
                                            <rect key="frame" x="0.0" y="77" width="260" height="20.5"/>
                                            <subviews>
                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text1" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="eWU-mM-aQq">
                                                    <rect key="frame" x="0.0" y="0.0" width="73.5" height="20.5"/>
                                                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                    <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                                    <nil key="highlightedColor"/>
                                                    <userDefinedRuntimeAttributes>
                                                        <userDefinedRuntimeAttribute type="boolean" keyPath="adjustsFontSizeToFitWidth" value="YES"/>
                                                    </userDefinedRuntimeAttributes>
                                                </label>
                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text2" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="wyW-jR-92l">
                                                    <rect key="frame" x="93.5" y="0.0" width="73" height="20.5"/>
                                                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                    <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                                    <nil key="highlightedColor"/>
                                                    <userDefinedRuntimeAttributes>
                                                        <userDefinedRuntimeAttribute type="boolean" keyPath="adjustsFontSizeToFitWidth" value="YES"/>
                                                    </userDefinedRuntimeAttributes>
                                                </label>
                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text3" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xU9-ez-ESX">
                                                    <rect key="frame" x="186.5" y="0.0" width="73.5" height="20.5"/>
                                                    <fontDescription key="fontDescription" type="system" pointSize="11"/>
                                                    <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                                    <nil key="highlightedColor"/>
                                                    <userDefinedRuntimeAttributes>
                                                        <userDefinedRuntimeAttribute type="boolean" keyPath="adjustsFontSizeToFitWidth" value="YES"/>
                                                    </userDefinedRuntimeAttributes>
                                                </label>
                                            </subviews>
                                        </stackView>
                                    </subviews>
                                    <color key="backgroundColor" red="0.17254901959999999" green="0.1843137255" blue="0.21960784310000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                </stackView>
                            </subviews>
                            <constraints>
                                <constraint firstItem="CK2-GV-eAN" firstAttribute="leading" secondItem="ZNX-E4-fJI" secondAttribute="leading" constant="30" id="Rao-NT-glY"/>
                                <constraint firstAttribute="trailing" secondItem="CK2-GV-eAN" secondAttribute="trailing" constant="30" id="pcQ-0c-3S0"/>
                            </constraints>
                        </stackView>
                    </subviews>
                    <color key="backgroundColor" name="BackGroundColor"/>
                    <constraints>
                        <constraint firstItem="ZNX-E4-fJI" firstAttribute="top" secondItem="g2X-8E-oXv" secondAttribute="top" id="UcU-d5-McW"/>
                        <constraint firstItem="ZNX-E4-fJI" firstAttribute="leading" secondItem="g2X-8E-oXv" secondAttribute="leading" id="vTj-Mg-hRR"/>
                        <constraint firstAttribute="trailing" secondItem="ZNX-E4-fJI" secondAttribute="trailing" id="xoI-wD-OZz"/>
                    </constraints>
                    <viewLayoutGuide key="safeArea" id="g2X-8E-oXv"/>
                </view>
                <connections>
                    <outlet property="imgbtnContainer" destination="4ag-dE-MkJ" id="4Lu-zC-X56"/>
                    <outlet property="sommerImage" destination="rKB-oI-ZlW" id="9vz-9A-XjX"/>
                    <outlet property="titleLabel" destination="uJa-bI-tyq" id="xl7-VX-CR4"/>
                </connections>
            </viewController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="75A-bF-ATY" userLabel="First Responder" sceneMemberID="firstResponder"/>
            <tapGestureRecognizer id="JyJ-E7-IQF">
                <connections>
                    <segue destination="AeH-xq-It1" kind="presentation" id="tXW-Ch-LPs"/>
                </connections>
            </tapGestureRecognizer>
        </objects>
        <point key="canvasLocation" x="1759" y="117"/>
    </scene>

Answer 1

当您执行这段代码时，您的 View 很可能没有布局。您应该在 viewDidLayoutSubviews 中运行舍入代码:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    let white = UIColor(white:1, alpha:1).cgColor
    [...]
}