如何在图像视图周围制作圆形边框
[英]How to make a circle border around an image view
问题描述
I have a vertical stack view that aligns leading, top and trailing to safe area, so it has max width. 
我有一个垂直的堆栈视图，该视图将前，后和尾对齐到安全区域，因此它具有最大宽度。
Among others it contains another vertical stack view which has trailing and leading space to its superview 30 and contains (only) two very similar horizontal stack views. 其中，它包含另一个垂直堆栈视图，该垂直堆栈视图具有到其超级视图30的尾部和前导空间，并且包含（仅）两个非常相似的水平堆栈视图。
Both have no additional constrains and a spacing of 30. 两者都没有其他约束，间距为30。
The first one contains three images all having only the constrains ratio 1:1 and an image source that is also quadratic. 第一个图像包含三个图像，所有图像均仅具有1：1的约束比，并且图像源也是二次的。 They are set to aspect fit and have the runtime attribute layer.borderWidth: 1 . 它们设置为适合方面，并具有运行时属性layer.borderWidth: 1 。
To get a white circle as a border, I created an outlet for the first horizontal stack view and called: 为了获得白色圆圈作为边界，我为第一个水平堆栈视图创建了一个出口，并称为：
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
}
in my func viewDidLoad() . 在我的func viewDidLoad() 。 edit: as suggested i moved it to viewDidLayoutSubviews() 编辑：按照建议，我将其移至viewDidLayoutSubviews()
When I start the app, I get round corners, but no complete circle. 启动应用程序时，出现圆角，但没有完整的圆圈。 I found this method to get a circle online and it used to work for me. 我发现这种方法可以使圈子在线，并且对我有用。 What am I doing wrong this time? 这次我在做什么错？
Here is my complete Scene: 这是我完整的场景：
<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>
1 个解决方案
解决方案1
1 2017-12-13 15:50:05
It's likely that your views are not laid out when you execute this code. 执行此代码时，您的视图可能未布置。 You should run the rounding code in viewDidLayoutSubviews : 您应该在viewDidLayoutSubviews运行舍入代码：
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let white = UIColor(white:1, alpha:1).cgColor
[...]
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何用圆圈遮盖方形图像并在图像周围放置黑色边框 - How can I mask a square image with a circle and also put a black border around the image
如何在 UICollectionView Swift4+ 中围绕圆创建实心矩形边框 - How to create a solid rectangle border around the circle in UICollectionView Swift4+
视图周围未对齐的边框 - Misaligned border around the view
如何在矢量化图像周围制作动画渐变边框（iPad的Objective-C）？ - How to make an animated gradient border around the vectorized image (Objective-C for iPad)?
iOS如何通过动画使iPhone指南针航向旋转一圈？ - iOS how to make iPhone compass heading move around a circle with animation?
如何使边框颜色仅在圆形的UIButton顶部？ - how to make border color only in the circle UIButton top?
如何在UI按钮/文本标签中的字母周围设置边框？ - How to make a border around a letter in UI Button/Text Label?
如何围绕UIView制作自定义边框？ - How do I make a custom border around a UIView?
图像边框周围的切边 - Chopped edge around border of image
圆形图像视图 - Circle Image View
相关标签