Ginso89
Reputation: 149
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.
Both have no additional constrains and a spacing of 30.
The first one contains three images all having only the constrains ratio 1:1 and an image source that is also quadratic. They are set to aspect fit and have the runtime attribute 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(). edit: as suggested i moved it to 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>
Upvotes: 0
Views: 85
Answers (1)
glyvox
Reputation: 58029
It's likely that your views are not laid out when you execute this code. You should run the rounding code in viewDidLayoutSubviews:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let white = UIColor(white:1, alpha:1).cgColor
[...]
}
Upvotes: 1
Related Questions
- Draw border around content of UIImageView
- Set border around UIImageView
- How to make UIImageView as a circle [iOS]
- How to create a circular image with border (UIGraphics)?
- draw circle around an image, bigger than the image in xcode
- Create UIImageView with circle border iOS
- Adding border around an UIImage
- Add border to a rounded UIImage
- adding white border along a circle UIImage
- Draw Border around UIImage