Skip to content

Commit

Permalink
Merge pull request #15 from gligorkot/customisations
Browse files Browse the repository at this point in the history 
Customisations
  • Loading branch information
@gligorkot
gligorkot authored May 15, 2019
2 parents ad1ef4b + c7762b1 commit 740dcf4
Show file tree
Hide file tree
Showing 5 changed files with 199 additions and 28 deletions.
6 changes: 5 additions & 1 deletion Classes/PinBubble.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@ import UIKit
@IBDesignable
final class PinBubble: UIView {

private let borderSize: CGFloat = 1
@IBInspectable var borderSize: CGFloat = 1 {
didSet {
draw(bounds)
}
}

@IBInspectable var isFilled: Bool = false {
didSet {
Expand Down
167 changes: 165 additions & 2 deletions Classes/PinView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ public final class PinView: UIView {
@IBOutlet weak var rootView: UIView!
@IBOutlet weak var visualEffectBackground: UIVisualEffectView!
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var titleLabelHeightConstraint: NSLayoutConstraint!
@IBOutlet weak var loadingIndicator: UIActivityIndicatorView!
@IBOutlet weak var pinBubbleOne: PinBubble!
@IBOutlet weak var pinBubbleTwo: PinBubble!
Expand Down Expand Up @@ -88,6 +89,42 @@ public final class PinView: UIView {
titleLabel.text = title
}
}

/**
The height of the title showing at the top of the `PinView`
*/
@IBInspectable public var titleHeight: CGFloat = 21 {
didSet {
titleLabelHeightConstraint.constant = titleHeight
}
}

/**
The font of the title showing at the top of the `PinView`
*/
@IBInspectable public var titleFontName: String = "System" {
didSet {
updateTitleFont()
}
}

/**
The font size of the title showing at the top of the `PinView`
*/
@IBInspectable public var titleFontSize: CGFloat = 20 {
didSet {
updateTitleFont()
}
}

/**
The color that controls the color of the title showing at the top of the `PinView`
*/
@IBInspectable public var titleTintColor: UIColor = .white {
didSet {
titleLabel.textColor = titleTintColor
}
}

/**
The boolean value specifying whether or not the `PinView` will have a blurred background or not
Expand All @@ -108,7 +145,16 @@ public final class PinView: UIView {
@IBInspectable public var lettersFontName: String = "System" {
didSet {
// font size is not important so we just init the font with size 10
updateLettersFont(UIFont(name: fontName, size: 10) ?? UIFont.systemFont(ofSize: 10))
updateLettersFont(UIFont(name: lettersFontName, size: 10) ?? UIFont.systemFont(ofSize: 10))
}
}

/**
The boolean value specifying whether or not the keypad buttons will show letters or not
*/
@IBInspectable public var hideKeypadLetters: Bool = false {
didSet {
updateKeypadLettersVisible()
}
}

Expand All @@ -120,6 +166,33 @@ public final class PinView: UIView {
updateViewsTintColor()
}
}

/**
The width and height of the pin bubbles
*/
@IBInspectable public var bubblesBorderSize: CGFloat = 1 {
didSet {
updateBubblesConstraints()
}
}

/**
The width and height of the pin bubbles
*/
@IBInspectable public var bubblesSize: CGFloat = 12 {
didSet {
updateBubblesConstraints()
}
}

/**
The margin between the pin bubbles
*/
@IBInspectable public var bubblesMargin: CGFloat = 15 {
didSet {
updateBubblesConstraints()
}
}

/**
The color that controls the color of the `PinView` elements
Expand All @@ -141,7 +214,7 @@ public final class PinView: UIView {
}

// MARK: - State
fileprivate var enteredPin = "" {
private var enteredPin = "" {
didSet {
if let delegate = delegate, enteredPin.length == 4 {
showLoading()
Expand Down Expand Up @@ -200,6 +273,20 @@ public final class PinView: UIView {
public func hideForgotMyPinButton() {
forgotMyPinButton.isHidden = true
}

// constraints
private var pinBubbleOneWidthConstraint: NSLayoutConstraint!
private var pinBubbleOneHeightConstraint: NSLayoutConstraint!
private var pinBubbleTwoWidthConstraint: NSLayoutConstraint!
private var pinBubbleTwoHeightConstraint: NSLayoutConstraint!
private var pinBubbleThreeWidthConstraint: NSLayoutConstraint!
private var pinBubbleThreeHeightConstraint: NSLayoutConstraint!
private var pinBubbleFourWidthConstraint: NSLayoutConstraint!
private var pinBubbleFourHeightConstraint: NSLayoutConstraint!
private var pinBubbleOneMarginConstraint: NSLayoutConstraint!
private var pinBubbleTwoMarginConstraint: NSLayoutConstraint!
private var pinBubbleThreeMarginConstraint: NSLayoutConstraint!
private var pinBubbleFourMarginConstraint: NSLayoutConstraint!

}

Expand All @@ -215,6 +302,36 @@ private extension PinView {
// update views tint color to the self.tintColor
updateViewsTintColor()
addSubview(view)
// init bubble constraints
pinBubbleOneWidthConstraint = pinBubbleOne.widthAnchor.constraint(equalToConstant: bubblesSize)
pinBubbleOneHeightConstraint = pinBubbleOne.heightAnchor.constraint(equalToConstant: bubblesSize)
pinBubbleTwoWidthConstraint = pinBubbleTwo.widthAnchor.constraint(equalToConstant: bubblesSize)
pinBubbleTwoHeightConstraint = pinBubbleTwo.heightAnchor.constraint(equalToConstant: bubblesSize)
pinBubbleThreeWidthConstraint = pinBubbleThree.widthAnchor.constraint(equalToConstant: bubblesSize)
pinBubbleThreeHeightConstraint = pinBubbleThree.heightAnchor.constraint(equalToConstant: bubblesSize)
pinBubbleFourWidthConstraint = pinBubbleFour.widthAnchor.constraint(equalToConstant: bubblesSize)
pinBubbleFourHeightConstraint = pinBubbleFour.heightAnchor.constraint(equalToConstant: bubblesSize)
NSLayoutConstraint.activate([
pinBubbleOneWidthConstraint,
pinBubbleOneHeightConstraint,
pinBubbleTwoWidthConstraint,
pinBubbleTwoHeightConstraint,
pinBubbleThreeWidthConstraint,
pinBubbleThreeHeightConstraint,
pinBubbleFourWidthConstraint,
pinBubbleFourHeightConstraint
])
let centerXDiff = (bubblesMargin / 2) + (bubblesSize / 2)
pinBubbleOneMarginConstraint = pinBubbleOne.trailingAnchor.constraint(equalTo: pinBubbleTwo.leadingAnchor, constant: -bubblesMargin)
pinBubbleTwoMarginConstraint = pinBubbleTwo.centerXAnchor.constraint(equalTo: rootView.centerXAnchor, constant: -centerXDiff)
pinBubbleThreeMarginConstraint = pinBubbleThree.centerXAnchor.constraint(equalTo: rootView.centerXAnchor, constant: centerXDiff)
pinBubbleFourMarginConstraint = pinBubbleFour.leadingAnchor.constraint(equalTo: pinBubbleThree.trailingAnchor, constant: bubblesMargin)
NSLayoutConstraint.activate([
pinBubbleOneMarginConstraint,
pinBubbleTwoMarginConstraint,
pinBubbleThreeMarginConstraint,
pinBubbleFourMarginConstraint
])
}

func viewFromNib() -> UIView {
Expand All @@ -225,6 +342,14 @@ private extension PinView {
}
fatalError("Could not initialise PinView from nib.")
}

func updateTitleFont() {
var boldFont = UIFont(name: titleFontName, size: titleFontSize) ?? UIFont.boldSystemFont(ofSize: titleFontSize)
if let fontDescriptor = boldFont.fontDescriptor.withSymbolicTraits(.traitBold) {
boldFont = UIFont(descriptor: fontDescriptor, size: titleFontSize)
}
titleLabel.font = boldFont
}

func updateViewsTintColor() {
for subview in rootView.subviews {
Expand Down Expand Up @@ -270,6 +395,19 @@ private extension PinView {
buttonNine.lettersFont = font
buttonZero.lettersFont = font
}

func updateKeypadLettersVisible() {
buttonOne.hideKeypadLetters = hideKeypadLetters
buttonTwo.hideKeypadLetters = hideKeypadLetters
buttonThree.hideKeypadLetters = hideKeypadLetters
buttonFour.hideKeypadLetters = hideKeypadLetters
buttonFive.hideKeypadLetters = hideKeypadLetters
buttonSix.hideKeypadLetters = hideKeypadLetters
buttonSeven.hideKeypadLetters = hideKeypadLetters
buttonEight.hideKeypadLetters = hideKeypadLetters
buttonNine.hideKeypadLetters = hideKeypadLetters
buttonZero.hideKeypadLetters = hideKeypadLetters
}

// MARK: IBActions
@IBAction func cancelOrForgotPinTapDown(_ sender: UIButton) {
Expand All @@ -295,6 +433,31 @@ private extension PinView {
enteredPin = "\(enteredPin)\(sender.digit)"
}
}

func updateBubblesConstraints() {
// border size
pinBubbleOne.borderSize = bubblesBorderSize
pinBubbleTwo.borderSize = bubblesBorderSize
pinBubbleThree.borderSize = bubblesBorderSize
pinBubbleFour.borderSize = bubblesBorderSize

// width and height
pinBubbleOneWidthConstraint.constant = bubblesSize
pinBubbleOneHeightConstraint.constant = bubblesSize
pinBubbleTwoWidthConstraint.constant = bubblesSize
pinBubbleTwoHeightConstraint.constant = bubblesSize
pinBubbleThreeWidthConstraint.constant = bubblesSize
pinBubbleThreeHeightConstraint.constant = bubblesSize
pinBubbleFourWidthConstraint.constant = bubblesSize
pinBubbleFourHeightConstraint.constant = bubblesSize

// margin
let centerXDiff = (bubblesMargin / 2) + (bubblesSize / 2)
pinBubbleOneMarginConstraint.constant = -bubblesMargin
pinBubbleTwoMarginConstraint.constant = -centerXDiff
pinBubbleThreeMarginConstraint.constant = centerXDiff
pinBubbleFourMarginConstraint.constant = bubblesMargin
}

func updateBubbles() {
switch enteredPin.length {
Expand Down
2 changes: 1 addition & 1 deletion GKPinView.podspec
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
Pod::Spec.new do |s|

s.name = 'GKPinView'
s.version = '0.9.8'
s.version = '0.9.9'
s.summary = 'A lock screen Pin/Passcode View for iPhone and iPad.'
s.description = <<-DESC
* A customisable Pin/Passcode View for iPhone or iPad
Expand Down
11 changes: 7 additions & 4 deletions GKPinViewExample/GKPinViewExample/Base.lproj/Main.storyboard
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13196" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="hX8-S8-V8m">
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14490.70" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="hX8-S8-V8m">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13173"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14490.49"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
Expand Down Expand Up @@ -38,7 +38,7 @@
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="5Pn-jS-f6g">
<rect key="frame" x="129.5" y="114" width="115" height="30"/>
<rect key="frame" x="130" y="114" width="115" height="30"/>
<state key="normal" title="Open Pin Screen"/>
<connections>
<action selector="openPinScreenTapped:" destination="LDy-lk-yuV" eventType="touchUpInside" id="Dhh-Qj-bQF"/>
Expand Down Expand Up @@ -83,9 +83,12 @@
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="string" keyPath="fontName" value="Futura"/>
<userDefinedRuntimeAttribute type="color" keyPath="bubblesTintColor">
<color key="value" red="1" green="0.80392156859999997" blue="0.1960784314" alpha="1" colorSpace="calibratedRGB"/>
<color key="value" red="0.97346514463424683" green="0.83798927068710327" blue="0.36457616090774536" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="string" keyPath="lettersFontName" value="SFProDisplay"/>
<userDefinedRuntimeAttribute type="color" keyPath="titleTintColor">
<color key="value" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</view>
</subviews>
Expand Down
Loading

0 comments on commit 740dcf4

Please sign in to comment.