Skip to content

Commit

Permalink
Fixed layout bug causing misalignment at small sizes.
Browse files Browse the repository at this point in the history 
The checkbox path was being shifted by half the box line width when it
did not need to be.
  • Loading branch information
@Marxon13
Marxon13 committed Sep 28, 2016
1 parent 9a63be8 commit 3e4a4e4
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 10 deletions.
20 changes: 20 additions & 0 deletions M13Checkbox Demo/Assets.xcassets/AppIcon.appiconset/Contents.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
{
"images" : [
{
"idiom" : "iphone",
"size" : "20x20",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "20x20",
"scale" : "3x"
},
{
"size" : "29x29",
"idiom" : "iphone",
Expand Down Expand Up @@ -36,6 +46,16 @@
"filename" : "[email protected]",
"scale" : "3x"
},
{
"idiom" : "ipad",
"size" : "20x20",
"scale" : "1x"
},
{
"idiom" : "ipad",
"size" : "20x20",
"scale" : "2x"
},
{
"size" : "29x29",
"idiom" : "ipad",
Expand Down
21 changes: 13 additions & 8 deletions M13Checkbox Demo/Base.lproj/Main.storyboard
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="lyr-ql-eDx" customClass="M13Checkbox" customModule="M13Checkbox_Demo" customModuleProvider="target">
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="lyr-ql-eDx" customClass="M13Checkbox" customModule="M13Checkbox">
<color key="tintColor" red="0.223007977" green="0.82969284060000004" blue="0.87480789420000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" secondItem="lyr-ql-eDx" secondAttribute="height" multiplier="1:1" identifier="checkAspectRation" id="rAo-kd-UCo"/>
Expand All @@ -44,7 +44,7 @@
<containerView opaque="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="XTB-bm-XDV">
<constraints>
<constraint firstAttribute="height" constant="350" identifier="collectionHeight" id="NOX-U1-ZXm"/>
<constraint firstAttribute="width" priority="250" constant="300" identifier="collectionWidth" id="Tlc-A5-Cue">
<constraint firstAttribute="width" priority="750" constant="300" identifier="collectionWidth" id="Tlc-A5-Cue">
<variation key="heightClass=compact" constant="320"/>
</constraint>
</constraints>
Expand All @@ -66,6 +66,10 @@
</subviews>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="XTB-bm-XDV" firstAttribute="top" secondItem="lyr-ql-eDx" secondAttribute="bottom" priority="750" constant="100" id="06p-V3-dB5">
<variation key="heightClass=compact" constant="20"/>
<variation key="widthClass=compact" constant="40"/>
</constraint>
<constraint firstItem="XTB-bm-XDV" firstAttribute="top" secondItem="gtP-cW-6wj" secondAttribute="top" identifier="collectionTop" id="0U9-Jk-ujz"/>
<constraint firstItem="lyr-ql-eDx" firstAttribute="centerY" secondItem="gtP-cW-6wj" secondAttribute="centerY" identifier="checkHorizontalCenter" id="91H-ph-FAH"/>
<constraint firstItem="gex-gV-rMe" firstAttribute="top" secondItem="XTB-bm-XDV" secondAttribute="bottom" identifier="collectionBottom" id="ExQ-9j-XqN"/>
Expand All @@ -89,6 +93,7 @@
<mask key="constraints">
<exclude reference="0U9-Jk-ujz"/>
<exclude reference="Gct-91-Fve"/>
<exclude reference="LYq-K3-j81"/>
<exclude reference="j5e-VG-tFd"/>
<exclude reference="91H-ph-FAH"/>
<exclude reference="O2z-lE-Y5G"/>
Expand Down Expand Up @@ -260,8 +265,8 @@
<scene sceneID="U5C-bs-e3E">
<objects>
<collectionViewController id="eeR-FI-F2L" sceneMemberID="viewController">
<collectionView key="view" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" delaysContentTouches="NO" dataMode="prototypes" id="gw4-UL-RvN">
<rect key="frame" x="0.0" y="0.0" width="600" height="350"/>
<collectionView key="view" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" misplaced="YES" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" delaysContentTouches="NO" dataMode="prototypes" id="gw4-UL-RvN">
<rect key="frame" x="0.0" y="0.0" width="320" height="600"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" red="0.22300797700881958" green="0.82969284057617188" blue="0.87480789422988892" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="40" minimumInteritemSpacing="0.0" id="tjT-58-xVQ" customClass="CollectionViewLayout" customModule="M13Checkbox_Demo" customModuleProvider="target">
Expand All @@ -272,7 +277,7 @@
</collectionViewFlowLayout>
<cells>
<collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="segmentedControlCell" id="mAw-mk-o0m" customClass="SegmentedControlCollectionViewCell" customModule="M13Checkbox_Demo" customModuleProvider="target">
<rect key="frame" x="0.0" y="15" width="320" height="320"/>
<rect key="frame" x="0.0" y="140" width="320" height="320"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="320" height="320"/>
Expand Down Expand Up @@ -335,7 +340,7 @@
</connections>
</collectionViewCell>
<collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="sliderCell" id="sX9-Sa-Sj4" customClass="SliderCollectionViewCell" customModule="M13Checkbox_Demo" customModuleProvider="target">
<rect key="frame" x="360" y="15" width="320" height="320"/>
<rect key="frame" x="360" y="140" width="320" height="320"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="320" height="320"/>
Expand Down Expand Up @@ -392,7 +397,7 @@
</connections>
</collectionViewCell>
<collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="selectionCell" id="ALO-Fk-Eor" customClass="SelectionCollectionViewCell" customModule="M13Checkbox_Demo" customModuleProvider="target">
<rect key="frame" x="720" y="15" width="320" height="320"/>
<rect key="frame" x="720" y="140" width="320" height="320"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="320" height="320"/>
Expand Down Expand Up @@ -451,7 +456,7 @@
</connections>
</collectionViewCell>
<collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="colorCell" id="gcD-Yj-nan" customClass="ColorCollectionViewCell" customModule="M13Checkbox_Demo" customModuleProvider="target">
<rect key="frame" x="1080" y="15" width="320" height="320"/>
<rect key="frame" x="1080" y="140" width="320" height="320"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="320" height="320"/>
Expand Down
4 changes: 2 additions & 2 deletions Sources/M13CheckboxPathPresets.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,13 +150,13 @@ internal class M13CheckboxPathPresets {
var checkmarkMiddlePoint: CGPoint {
let r = boxType == .circle ? checkmarkProperties.middlePointRadius.circle : checkmarkProperties.middlePointRadius.box
let o = boxType == .circle ? checkmarkProperties.middlePointOffset.circle : checkmarkProperties.middlePointOffset.box
return CGPoint(x: (size / 2.0) + (size * o) + (boxLineWidth / 2.0), y: (size / 2.0 ) + (size * r) + (boxLineWidth / 2.0))
return CGPoint(x: (size / 2.0) + (size * o), y: (size / 2.0 ) + (size * r))
}

var checkmarkShortArmEndPoint: CGPoint {
let r = boxType == .circle ? checkmarkProperties.shortArmRadius.circle : checkmarkProperties.shortArmRadius.box
let o = boxType == .circle ? checkmarkProperties.shortArmOffset.circle : checkmarkProperties.shortArmOffset.box
return CGPoint(x: (size / 2.0) - (size * r) + (boxLineWidth / 2.0), y: (size / 2.0) + (size * o) + (boxLineWidth / 2.0))
return CGPoint(x: (size / 2.0) - (size * r), y: (size / 2.0) + (size * o))
}

//----------------------------
Expand Down

0 comments on commit 3e4a4e4

Please sign in to comment.