Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix to properly show badge when use with UIView from .xib + layout in programmatically way #24

Open
wants to merge 2 commits into
base: swift2
Choose a base branch
from
Open

Fix to properly show badge when use with UIView from .xib + layout in programmatically way #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8c169d
Update .gitignore file to ignore userdata in fewer lines of code
haxpor Apr 25, 2017
abd4e68
Fix positioning and layouting of badge when used in programmatic
haxpor Apr 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,2 @@

MIBadgeButton.xcodeproj/project.xcworkspace/xcuserdata/MustafaIbrahim.xcuserdatad/UserInterfaceState.xcuserstate

MIBadgeButton.xcodeproj/project.xcworkspace/xcuserdata/MustafaIbrahim.xcuserdatad/UserInterfaceState.xcuserstate

MIBadgeButton.xcodeproj/project.xcworkspace/xcuserdata/MustafaIbrahim.xcuserdatad/UserInterfaceState.xcuserstate
MIBadgeButton.xcodeproj/xcuserdata
MIBadgeButton.xcodeproj/project.xcworkspace/xcuserdata
62 changes: 61 additions & 1 deletion Classes/MIBadgeButton.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ import UIKit
public class MIBadgeButton: UIButton {

private var badgeLabel: UILabel
private var labelWidthConstraint: NSLayoutConstraint?
private var labelHeightConstraint: NSLayoutConstraint?
private var labelCenterXConstraint: NSLayoutConstraint?
private var labelCenterYConstaint: NSLayoutConstraint?

public var badgeString: String? {
didSet {
setupBadgeViewWithString(badgeText: badgeString)
Expand All @@ -34,7 +39,7 @@ public class MIBadgeButton: UIButton {
badgeLabel.textColor = badgeTextColor
}
}

override public init(frame: CGRect) {
badgeLabel = UILabel()
super.init(frame: frame)
Expand Down Expand Up @@ -84,6 +89,44 @@ public class MIBadgeButton: UIButton {
setupBadgeStyle()
addSubview(badgeLabel)

if (self.isProgrammaticConstraint(self.superview)) {
// code creates constraints
badgeLabel.translatesAutoresizingMaskIntoConstraints = false

// if there are existing constraints then remove them first
if (self.labelWidthConstraint != nil) {
self.removeConstraint(self.labelWidthConstraint!)
}
if (self.labelHeightConstraint != nil) {
self.removeConstraint(self.labelHeightConstraint!)
}
if (self.labelCenterXConstraint != nil) {
self.removeConstraint(self.labelCenterXConstraint!)
}
if (self.labelCenterYConstaint != nil) {
self.removeConstraint(self.labelCenterYConstaint!)
}

self.labelWidthConstraint = NSLayoutConstraint(item: self.badgeLabel, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: CGFloat(width))
self.labelHeightConstraint = NSLayoutConstraint(item: self.badgeLabel, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 0.5, constant: CGFloat(height))

if let badgeInset = self.badgeEdgeInsets {
vertical = Double(badgeInset.top) - Double(badgeInset.bottom)
horizontal = Double(badgeInset.left) - Double(badgeInset.right)

self.labelCenterXConstraint = NSLayoutConstraint(item: self.badgeLabel, attribute: .CenterX, relatedBy: .Equal, toItem: self, attribute: .CenterX, multiplier: 1.0, constant: (CGFloat(bounds.size.width/2) - 10 + CGFloat(horizontal!)))
self.labelCenterYConstaint = NSLayoutConstraint(item: self.badgeLabel, attribute: .CenterY, relatedBy: .Equal, toItem: self, attribute: .CenterY, multiplier: 1.0, constant: -CGFloat(bounds.size.height/2) - (CGFloat(badgeSize.height) / 2) + 10 + CGFloat(vertical!))
}
else {
self.labelCenterXConstraint = NSLayoutConstraint(item: self.badgeLabel, attribute: .CenterX, relatedBy: .Equal, toItem: self, attribute: .CenterX, multiplier: 1.0, constant: (CGFloat(bounds.size.width/2) - 10))
self.labelCenterYConstaint = NSLayoutConstraint(item: self.badgeLabel, attribute: .CenterY, relatedBy: .Equal, toItem: self, attribute: .CenterY, multiplier: 1.0, constant: -CGFloat(bounds.size.height/2) - (CGFloat(badgeSize.height) / 2) + 10)
}

self.addConstraints([self.labelWidthConstraint!, self.labelHeightConstraint!, self.labelCenterXConstraint!, self.labelCenterYConstaint!])
self.layoutIfNeeded()
// -- end of code creates constraints
}

if let text = badgeText {
badgeLabel.hidden = text != "" ? false : true
} else {
Expand All @@ -92,6 +135,23 @@ public class MIBadgeButton: UIButton {

}

// check if the view hierarchy (starting from its superview) is went on with programmatic approach or not
// which means user conduct layouting of ui elements via code with constraints
// normally send argument to this fuction with its superview
private func isProgrammaticConstraint(startingParent: UIView?) -> Bool {
var view = startingParent

if (view == nil) {
return false
}
if (view!.translatesAutoresizingMaskIntoConstraints == false) {
return true
}
else {
return self.isProgrammaticConstraint(view!.superview)
}
}

private func setupBadgeStyle() {
badgeLabel.textAlignment = .Center
badgeLabel.backgroundColor = badgeBackgroundColor
Expand Down
84 changes: 84 additions & 0 deletions CustomView.xib
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="11762" systemVersion="16F60a" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="11757"/>
<capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<objects>
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
<view contentMode="scaleToFill" id="iN0-l3-epB" customClass="CustomView" customModule="MIBadgeButton" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="425" height="88"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="7Gh-zb-5I7">
<rect key="frame" x="0.0" y="0.0" width="212.5" height="88"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="facebook" translatesAutoresizingMaskIntoConstraints="NO" id="lTP-D7-ykx">
<rect key="frame" x="-0.5" y="0.0" width="213" height="88"/>
</imageView>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="aFa-n6-XNV" customClass="MIBadgeButton" customModule="MIBadgeButton" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="212.5" height="88"/>
</button>
</subviews>
<constraints>
<constraint firstItem="lTP-D7-ykx" firstAttribute="width" secondItem="7Gh-zb-5I7" secondAttribute="width" id="2mj-Gj-ndW"/>
<constraint firstItem="lTP-D7-ykx" firstAttribute="centerX" secondItem="7Gh-zb-5I7" secondAttribute="centerX" id="2zb-xU-Opa"/>
<constraint firstItem="lTP-D7-ykx" firstAttribute="centerY" secondItem="7Gh-zb-5I7" secondAttribute="centerY" id="3o8-7L-ZtX"/>
<constraint firstItem="lTP-D7-ykx" firstAttribute="height" secondItem="7Gh-zb-5I7" secondAttribute="height" id="7Ky-D5-rRN"/>
<constraint firstItem="aFa-n6-XNV" firstAttribute="height" secondItem="7Gh-zb-5I7" secondAttribute="height" id="BeZ-Rx-tWT"/>
<constraint firstItem="aFa-n6-XNV" firstAttribute="centerX" secondItem="7Gh-zb-5I7" secondAttribute="centerX" id="CIb-Yj-WQE"/>
<constraint firstItem="aFa-n6-XNV" firstAttribute="width" secondItem="7Gh-zb-5I7" secondAttribute="width" id="fw2-Mn-roI"/>
<constraint firstItem="aFa-n6-XNV" firstAttribute="centerY" secondItem="7Gh-zb-5I7" secondAttribute="centerY" id="ujt-1L-yYP"/>
</constraints>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Htw-zR-tcX">
<rect key="frame" x="212.5" y="0.0" width="212.5" height="88"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="twitter" translatesAutoresizingMaskIntoConstraints="NO" id="ghW-yc-a20">
<rect key="frame" x="-0.5" y="0.0" width="213" height="88"/>
</imageView>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="FXp-xA-fm9" customClass="MIBadgeButton" customModule="MIBadgeButton" customModuleProvider="target">
<rect key="frame" x="-0.5" y="0.0" width="212.5" height="88"/>
</button>
</subviews>
<constraints>
<constraint firstItem="ghW-yc-a20" firstAttribute="centerX" secondItem="Htw-zR-tcX" secondAttribute="centerX" id="ETi-Gr-sZl"/>
<constraint firstItem="FXp-xA-fm9" firstAttribute="centerX" secondItem="Htw-zR-tcX" secondAttribute="centerX" id="H2N-mq-3Nv"/>
<constraint firstItem="ghW-yc-a20" firstAttribute="height" secondItem="Htw-zR-tcX" secondAttribute="height" id="Kci-5O-KE2"/>
<constraint firstItem="FXp-xA-fm9" firstAttribute="height" secondItem="Htw-zR-tcX" secondAttribute="height" id="V8j-hB-Jfy"/>
<constraint firstItem="ghW-yc-a20" firstAttribute="centerY" secondItem="Htw-zR-tcX" secondAttribute="centerY" id="XCi-Uv-beD"/>
<constraint firstItem="FXp-xA-fm9" firstAttribute="width" secondItem="Htw-zR-tcX" secondAttribute="width" id="d2p-ln-fWk"/>
<constraint firstItem="FXp-xA-fm9" firstAttribute="centerY" secondItem="Htw-zR-tcX" secondAttribute="centerY" id="p9Y-sD-cls"/>
<constraint firstItem="ghW-yc-a20" firstAttribute="width" secondItem="Htw-zR-tcX" secondAttribute="width" id="x5T-gC-iwT"/>
</constraints>
</view>
</subviews>
<constraints>
<constraint firstItem="Htw-zR-tcX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="centerY" id="9Of-RT-aFD"/>
<constraint firstItem="Htw-zR-tcX" firstAttribute="width" secondItem="iN0-l3-epB" secondAttribute="width" multiplier="0.5" id="Rtg-9k-gt1"/>
<constraint firstItem="Htw-zR-tcX" firstAttribute="leading" secondItem="7Gh-zb-5I7" secondAttribute="trailing" id="fwU-DY-ZYB"/>
<constraint firstItem="7Gh-zb-5I7" firstAttribute="width" secondItem="iN0-l3-epB" secondAttribute="width" multiplier="0.5" id="keo-VE-dkQ"/>
<constraint firstItem="Htw-zR-tcX" firstAttribute="height" secondItem="iN0-l3-epB" secondAttribute="height" id="svK-YM-lS6"/>
<constraint firstItem="7Gh-zb-5I7" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="tA0-qd-Z2t"/>
<constraint firstItem="7Gh-zb-5I7" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="centerY" id="tLU-GP-CdK"/>
<constraint firstItem="7Gh-zb-5I7" firstAttribute="height" secondItem="iN0-l3-epB" secondAttribute="height" id="tSH-TU-nKg"/>
</constraints>
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
<connections>
<outlet property="facebookButton" destination="aFa-n6-XNV" id="M7b-Rx-niR"/>
<outlet property="twitterButton" destination="FXp-xA-fm9" id="yUt-7Y-3pr"/>
</connections>
<point key="canvasLocation" x="49.5" y="-238"/>
</view>
</objects>
<resources>
<image name="facebook" width="128" height="128"/>
<image name="twitter" width="128" height="128"/>
</resources>
</document>
18 changes: 18 additions & 0 deletions MIBadgeButton.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
objects = {

/* Begin PBXBuildFile section */
1E3EBACD1EAF401E00F97804 /* CustomView.xib in Resources */ = {isa = PBXBuildFile; fileRef = 1E3EBACC1EAF401E00F97804 /* CustomView.xib */; };
1E3EBAD01EAF428600F97804 /* CustomView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1E3EBACF1EAF428600F97804 /* CustomView.swift */; };
3DCA509D19AE63610002F2E6 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3DCA509C19AE63610002F2E6 /* AppDelegate.swift */; };
3DCA509F19AE63610002F2E6 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3DCA509E19AE63610002F2E6 /* ViewController.swift */; };
3DCA50A219AE63610002F2E6 /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 3DCA50A019AE63610002F2E6 /* Main.storyboard */; };
Expand All @@ -26,6 +28,8 @@
/* End PBXContainerItemProxy section */

/* Begin PBXFileReference section */
1E3EBACC1EAF401E00F97804 /* CustomView.xib */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.xib; path = CustomView.xib; sourceTree = "<group>"; };
1E3EBACF1EAF428600F97804 /* CustomView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; name = CustomView.swift; path = MIBadgeButton/CustomView.swift; sourceTree = "<group>"; };
3DCA509719AE63610002F2E6 /* MIBadgeButton.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = MIBadgeButton.app; sourceTree = BUILT_PRODUCTS_DIR; };
3DCA509B19AE63610002F2E6 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
3DCA509C19AE63610002F2E6 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -56,9 +60,19 @@
/* End PBXFrameworksBuildPhase section */

/* Begin PBXGroup section */
1E3EBACE1EAF425A00F97804 /* CustomView */ = {
isa = PBXGroup;
children = (
1E3EBACF1EAF428600F97804 /* CustomView.swift */,
);
name = CustomView;
sourceTree = "<group>";
};
3DCA508E19AE63610002F2E6 = {
isa = PBXGroup;
children = (
1E3EBACE1EAF425A00F97804 /* CustomView */,
1E3EBACC1EAF401E00F97804 /* CustomView.xib */,
3DCA50A019AE63610002F2E6 /* Main.storyboard */,
3DCA50A319AE63610002F2E6 /* Images.xcassets */,
3DCA50BA19AE64370002F2E6 /* Controllers */,
Expand Down Expand Up @@ -212,6 +226,7 @@
files = (
3DCA50A219AE63610002F2E6 /* Main.storyboard in Resources */,
3DCA50A419AE63610002F2E6 /* Images.xcassets in Resources */,
1E3EBACD1EAF401E00F97804 /* CustomView.xib in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
Expand All @@ -230,6 +245,7 @@
buildActionMask = 2147483647;
files = (
3DCA509F19AE63610002F2E6 /* ViewController.swift in Sources */,
1E3EBAD01EAF428600F97804 /* CustomView.swift in Sources */,
3DCA50BC19AE66180002F2E6 /* MIBadgeButton.swift in Sources */,
3DCA509D19AE63610002F2E6 /* AppDelegate.swift in Sources */,
);
Expand Down Expand Up @@ -356,6 +372,7 @@
PRODUCT_BUNDLE_IDENTIFIER = "com.youxel.${PRODUCT_NAME:rfc1034identifier}";
PRODUCT_NAME = "$(TARGET_NAME)";
SWIFT_OBJC_BRIDGING_HEADER = "";
SWIFT_VERSION = 2.3;
TARGETED_DEVICE_FAMILY = 1;
};
name = Debug;
Expand All @@ -370,6 +387,7 @@
PRODUCT_BUNDLE_IDENTIFIER = "com.youxel.${PRODUCT_NAME:rfc1034identifier}";
PRODUCT_NAME = "$(TARGET_NAME)";
SWIFT_OBJC_BRIDGING_HEADER = "";
SWIFT_VERSION = 2.3;
TARGETED_DEVICE_FAMILY = 1;
};
name = Release;
Expand Down
5 changes: 0 additions & 5 deletions ...tton.xcodeproj/xcuserdata/mustafaibrahim.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist
View file
Open in desktop

This file was deleted.

Loading