Skip to content

Commit 9cd0f57

Browse files
raulrieraraulriera
committed
Further improvements to Yoshiko
1 parent 70fd9cc commit 9cd0f57

File tree

3 files changed

+50
-44
lines changed

3 files changed

+50
-44
lines changed

‎Screenshots/Yoshiko.gif‎

-6.4 KB
Loading

‎TextFieldEffects/TextFieldEffects/YoshikoTextField.swift‎

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,47 +8,68 @@
88

99
import UIKit
1010

11+
/**
12+
An YoshikoTextField is a subclass of the TextFieldEffects object, is a control that displays an UITextField with a customizable visual effect around the edges and background of the control.
13+
*/
1114
@IBDesignable public class YoshikoTextField: TextFieldEffects {
1215

1316
private let borderLayer = CALayer()
1417
private let textFieldInsets = CGPoint(x: 6, y: 0)
1518
private let placeHolderInsets = CGPoint(x: 6, y: 0)
16-
private let outerBackgroundView = UIView()
17-
19+
20+
/**
21+
The size of the border.
22+
23+
This property applies a thickness to the border of the control. The default value for this property is 2 points.
24+
*/
1825
@IBInspectable public var borderSize: CGFloat = 2.0 {
1926
didSet {
2027
updateBorder()
2128
}
2229
}
23-
24-
@IBInspectable dynamic public var activeColor: UIColor = .blueColor() {
30+
31+
/**
32+
The color of the border when it has content.
33+
34+
This property applies a color to the edges of the control. The default value for this property is a clear color.
35+
*/
36+
@IBInspectable dynamic public var activeBorderColor: UIColor = .clearColor() {
2537
didSet {
2638
updateBorder()
2739
updateBackground()
2840
updatePlaceholder()
2941
}
3042
}
31-
32-
@IBInspectable dynamic public var inactiveColor: UIColor = .lightGrayColor() {
43+
44+
/**
45+
The color of the border when it has no content.
46+
47+
This property applies a color to the edges of the control. The default value for this property is a clear color.
48+
*/
49+
@IBInspectable dynamic public var inactiveBorderColor: UIColor = .clearColor() {
3350
didSet {
3451
updateBorder()
3552
updateBackground()
3653
updatePlaceholder()
3754
}
3855
}
3956

40-
@IBInspectable dynamic public var outerBackgroundColor: UIColor = .lightGrayColor() {
41-
didSet {
42-
updateBorder()
43-
}
44-
}
45-
46-
@IBInspectable dynamic public var activeInnerBackgroundColor: UIColor = .clearColor() {
57+
/**
58+
The color of the input's background when it has content. When it's not focused it reverts to the color of the `inactiveBorderColor`
59+
60+
This property applies a color to the background of the input.
61+
*/
62+
@IBInspectable dynamic public var activeBackgroundColor: UIColor = .clearColor() {
4763
didSet {
4864
updateBackground()
4965
}
5066
}
51-
67+
68+
/**
69+
The color of the placeholder text.
70+
71+
This property applies a color to the complete placeholder string. The default value for this property is a black color.
72+
*/
5273
@IBInspectable dynamic public var placeholderColor: UIColor = .darkGrayColor() {
5374
didSet {
5475
updatePlaceholder()
@@ -66,23 +87,14 @@ import UIKit
6687
private func updateBorder() {
6788
borderLayer.frame = rectForBounds(bounds)
6889
borderLayer.borderWidth = borderSize
69-
borderLayer.borderColor = (isFirstResponder() || text!.isNotEmpty) ? activeColor.CGColor : inactiveColor.CGColor
90+
borderLayer.borderColor = (isFirstResponder() || text!.isNotEmpty) ? activeBorderColor.CGColor : inactiveBorderColor.CGColor
7091
}
7192

7293
private func updateBackground() {
73-
outerBackgroundView.frame = CGRect(origin: bounds.origin, size: CGSize(width: bounds.width, height: placeholderHeight))
74-
outerBackgroundView.backgroundColor = outerBackgroundColor
75-
76-
if !subviews.contains(outerBackgroundView) {
77-
addSubview(outerBackgroundView)
78-
}
79-
80-
backgroundColor = .clearColor()
81-
8294
if isFirstResponder() || text!.isNotEmpty {
83-
layer.backgroundColor = activeInnerBackgroundColor.CGColor
95+
borderLayer.backgroundColor = activeBackgroundColor.CGColor
8496
} else {
85-
layer.backgroundColor = inactiveColor.CGColor
97+
borderLayer.backgroundColor = inactiveBorderColor.CGColor
8698
}
8799
}
88100

@@ -94,7 +106,7 @@ import UIKit
94106
if isFirstResponder() || text!.isNotEmpty {
95107
placeholderLabel.font = placeholderFontFromFontAndPercentageOfOriginalSize(font: font!, percentageOfOriginalSize: 0.5)
96108
placeholderLabel.text = placeholder?.uppercaseString
97-
placeholderLabel.textColor = activeColor
109+
placeholderLabel.textColor = activeBorderColor
98110
} else {
99111
placeholderLabel.font = placeholderFontFromFontAndPercentageOfOriginalSize(font: font!, percentageOfOriginalSize: 0.7)
100112
placeholderLabel.textColor = placeholderColor
@@ -158,8 +170,8 @@ import UIKit
158170
updateBorder()
159171
updateBackground()
160172

161-
addSubview(placeholderLabel)
162173
layer.addSublayer(borderLayer)
174+
addSubview(placeholderLabel)
163175
}
164176

165177
public override func placeholderRectForBounds(bounds: CGRect) -> CGRect {

‎TextFieldEffects/TextFieldsDemo/Base.lproj/Main.storyboard‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2-
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="8191" systemVersion="15A284" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="kzy-mN-NiP">
2+
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="9059" systemVersion="15B42" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="kzy-mN-NiP">
33
<dependencies>
44
<deployment identifier="iOS"/>
5-
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="8154"/>
5+
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="9049"/>
66
<capability name="Constraints to layout margins" minToolsVersion="6.0"/>
77
</dependencies>
88
<scenes>
@@ -627,17 +627,14 @@
627627
<userDefinedRuntimeAttribute type="number" keyPath="borderSize">
628628
<real key="value" value="1"/>
629629
</userDefinedRuntimeAttribute>
630-
<userDefinedRuntimeAttribute type="color" keyPath="activeColor">
630+
<userDefinedRuntimeAttribute type="color" keyPath="activeBorderColor">
631631
<color key="value" red="0.37647058820000001" green="0.34901960780000002" blue="0.62745098040000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
632632
</userDefinedRuntimeAttribute>
633-
<userDefinedRuntimeAttribute type="color" keyPath="inactiveColor">
633+
<userDefinedRuntimeAttribute type="color" keyPath="inactiveBorderColor">
634634
<color key="value" red="0.93725490199999995" green="0.93333333330000001" blue="0.93333333330000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
635635
</userDefinedRuntimeAttribute>
636-
<userDefinedRuntimeAttribute type="color" keyPath="outerBackgroundColor">
637-
<color key="value" red="0.93725001809999997" green="0.93725001809999997" blue="0.95686000589999998" alpha="1" colorSpace="calibratedRGB"/>
638-
</userDefinedRuntimeAttribute>
639-
<userDefinedRuntimeAttribute type="color" keyPath="activeInnerBackgroundColor">
640-
<color key="value" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
636+
<userDefinedRuntimeAttribute type="color" keyPath="activeBackgroundColor">
637+
<color key="value" white="1" alpha="1" colorSpace="calibratedWhite"/>
641638
</userDefinedRuntimeAttribute>
642639
<userDefinedRuntimeAttribute type="color" keyPath="placeholderColor">
643640
<color key="value" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
@@ -673,17 +670,14 @@
673670
<userDefinedRuntimeAttribute type="number" keyPath="borderSize">
674671
<real key="value" value="1"/>
675672
</userDefinedRuntimeAttribute>
676-
<userDefinedRuntimeAttribute type="color" keyPath="activeColor">
673+
<userDefinedRuntimeAttribute type="color" keyPath="activeBorderColor">
677674
<color key="value" red="0.37647058820000001" green="0.34901960780000002" blue="0.62745098040000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
678675
</userDefinedRuntimeAttribute>
679-
<userDefinedRuntimeAttribute type="color" keyPath="inactiveColor">
676+
<userDefinedRuntimeAttribute type="color" keyPath="inactiveBorderColor">
680677
<color key="value" red="0.93725490199999995" green="0.93333333330000001" blue="0.93333333330000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
681678
</userDefinedRuntimeAttribute>
682-
<userDefinedRuntimeAttribute type="color" keyPath="outerBackgroundColor">
683-
<color key="value" red="0.93725001809999997" green="0.93725001809999997" blue="0.95686000589999998" alpha="1" colorSpace="calibratedRGB"/>
684-
</userDefinedRuntimeAttribute>
685-
<userDefinedRuntimeAttribute type="color" keyPath="activeInnerBackgroundColor">
686-
<color key="value" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
679+
<userDefinedRuntimeAttribute type="color" keyPath="activeBackgroundColor">
680+
<color key="value" white="1" alpha="1" colorSpace="calibratedWhite"/>
687681
</userDefinedRuntimeAttribute>
688682
<userDefinedRuntimeAttribute type="color" keyPath="placeholderColor">
689683
<color key="value" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>

0 commit comments

Comments
 (0)