如何在图像视图周围制作圆形边框
Posted
技术标签:
【中文标题】如何在图像视图周围制作圆形边框【英文标题】：How to make a circle border around an image view 【发布时间】：2017-12-13 15:46:35 【问题描述】：我有一个垂直堆栈视图，它将前导、顶部和尾随对齐到安全区域，因此它具有最大宽度。
除其他外，它还包含另一个垂直堆栈视图，该视图具有到其父视图 30 的尾随和前导空间，并且包含（仅）两个非常相似的水平堆栈视图。
两者都没有额外的约束，间距为 30。
第一个包含三个图像，所有图像都只有 1:1 的约束比和一个也是二次的图像源。它们设置为 aspect fit 并具有运行时属性 layer.borderWidth: 1。
为了获得一个白色圆圈作为边框，我为第一个水平堆栈视图创建了一个出口并调用：
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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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>
【问题讨论】：
看看这里：***.com/questions/34984966/… 【参考方案1】：执行此代码时，您的视图可能没有布局。您应该在viewDidLayoutSubviews 中运行舍入代码：
override func viewDidLayoutSubviews()
super.viewDidLayoutSubviews()
let white = UIColor(white:1, alpha:1).cgColor
[...]
【讨论】：
没有帮助。我在评论中添加了场景以上是关于如何在图像视图周围制作圆形边框的主要内容，如果未能解决你的问题，请参考以下文章