Move image in PressableButton on highlight, add documentation around …

…insets
TakeScoop · Jan 18, 2018 · f9ec59a · f9ec59a
1 parent d6e8552
commit f9ec59a
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,9 @@ Change Log
 
 ## [master]
 
+ - Fixed an issue that would cause images in `PressableButton` to not move properly on highlight.
+   [#14](https://github.com/TakeScoop/SwiftyButton/issues/14)
+
 ## [0.8.0]
 
  - Added Swift 4 support.

diff --git a/.../SwiftyButtonExample/SwiftyButtonExample/Assets.xcassets/AppIcon.appiconset/Contents.json b/.../SwiftyButtonExample/SwiftyButtonExample/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -1,5 +1,15 @@
 {
   "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "3x"
+    },
     {
       "idiom" : "iphone",
       "size" : "29x29",
@@ -29,6 +39,11 @@
       "idiom" : "iphone",
       "size" : "60x60",
       "scale" : "3x"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "size" : "1024x1024",
+      "scale" : "1x"
     }
   ],
   "info" : {

diff --git a/...onExample/SwiftyButtonExample/Assets.xcassets/icFavoriteOrangeOn16.imageset/Contents.json b/...onExample/SwiftyButtonExample/Assets.xcassets/icFavoriteOrangeOn16.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icFavoriteOrangeOn16.pdf"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
diff --git a/...wiftyButtonExample/Assets.xcassets/icFavoriteOrangeOn16.imageset/icFavoriteOrangeOn16.pdf b/...wiftyButtonExample/Assets.xcassets/icFavoriteOrangeOn16.imageset/icFavoriteOrangeOn16.pdf
diff --git a/Examples/SwiftyButtonExample/SwiftyButtonExample/Base.lproj/Main.storyboard b/Examples/SwiftyButtonExample/SwiftyButtonExample/Base.lproj/Main.storyboard
@@ -1,8 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="11201" systemVersion="16A323" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="11161"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
         <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -20,11 +23,13 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="DCF-7Z-a9u" customClass="PressableButton" customModule="SwiftyButton">
+                                <rect key="frame" x="133.5" y="40" width="108" height="50"/>
                                 <constraints>
                                     <constraint firstAttribute="height" constant="50" id="JIt-2M-lPL"/>
                                     <constraint firstAttribute="width" constant="200" id="kYA-B2-qyN"/>
                                 </constraints>
-                                <state key="normal" title="Press me">
+                                <inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="50" maxY="0.0"/>
+                                <state key="normal" title="Press me" image="icFavoriteOrangeOn16">
                                     <color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                 </state>
                                 <userDefinedRuntimeAttributes>
@@ -42,6 +47,7 @@
                                 </variation>
                             </button>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="0VC-Tk-Okj">
+                                <rect key="frame" x="251.5" y="40" width="107.5" height="50"/>
                                 <constraints>
                                     <constraint firstAttribute="width" constant="200" id="bUp-Qm-6IM"/>
                                     <constraint firstAttribute="height" constant="50" id="mNo-GQ-HZ4"/>
@@ -53,6 +59,7 @@
                                 </variation>
                             </view>
                             <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="0vH-Wp-tiw" customClass="FlatButton" customModule="SwiftyButton">
+                                <rect key="frame" x="16" y="40" width="107.5" height="50"/>
                                 <constraints>
                                     <constraint firstAttribute="height" constant="50" id="KnS-bA-CKM"/>
                                     <constraint firstAttribute="width" constant="200" id="fY5-Is-knb"/>
@@ -94,4 +101,7 @@
             <point key="canvasLocation" x="515" y="407"/>
         </scene>
     </scenes>
+    <resources>
+        <image name="icFavoriteOrangeOn16" width="16" height="16"/>
+    </resources>
 </document>
diff --git a/Examples/SwiftyButtonPlayground.playground/Resources/icFavoriteOrangeOn16.pdf b/Examples/SwiftyButtonPlayground.playground/Resources/icFavoriteOrangeOn16.pdf
diff --git a/README.md b/README.md
@@ -127,7 +127,14 @@ label.autoPinEdgesToSuperviewEdges(with: UIEdgeInsets(top: 10, left: 0, bottom:
 label.autoPinEdge(.left, to: .right, of: indicator, withOffset: 10)
 label.text = "Loading..."
 label.textColor = .white
-``` 
+```
+
+### Known limitations
+
+ - `PressableButton` only works with plain colors (no alpha / transparency) because of the way its background image is rendered. See [#2](https://github.com/TakeScoop/SwiftyButton/issues/2)
+ - `PressableButton` manages title and image insets automatically (`titleEdgeInsets` and `imageEdgeInsets`). See [#5](https://github.com/TakeScoop/SwiftyButton/issues/15)
+    - User-specified inset values for `top` and `bottom` will be overridden.
+    - You may specify inset values for `left` and `right`.
 
 More examples
 -------------

diff --git a/SwiftyButton/PressableButton.swift b/SwiftyButton/PressableButton.swift
@@ -52,6 +52,7 @@ open class PressableButton: UIButton {
         didSet {
             updateBackgroundImages()
             updateTitleInsets()
+            updateImageInsets()
         }
     }
 
@@ -60,6 +61,7 @@ open class PressableButton: UIButton {
         didSet {
             updateBackgroundImages()
             updateTitleInsets()
+            updateImageInsets()
         }
     }
 
@@ -70,6 +72,18 @@ open class PressableButton: UIButton {
         }
     }
 
+    open override var titleEdgeInsets: UIEdgeInsets {
+        didSet {
+            updateTitleInsets()
+        }
+    }
+
+    open override var imageEdgeInsets: UIEdgeInsets {
+        didSet {
+            updateImageInsets()
+        }
+    }
+
     // MARK: - UIButton
 
     public override init(frame: CGRect) {
@@ -87,6 +101,7 @@ open class PressableButton: UIButton {
     override open var isHighlighted: Bool {
         didSet {
             updateTitleInsets()
+            updateImageInsets()
         }
     }
 
@@ -100,7 +115,13 @@ open class PressableButton: UIButton {
     func updateTitleInsets() {
         let topPadding = isHighlighted ? shadowHeight * CGFloat(depth) : 0
         let bottomPadding = isHighlighted ? shadowHeight * (1 - CGFloat(depth)) : shadowHeight
-        titleEdgeInsets = UIEdgeInsets(top: topPadding, left: 0, bottom: bottomPadding, right: 0)
+        super.titleEdgeInsets = UIEdgeInsets(top: topPadding, left: titleEdgeInsets.left, bottom: bottomPadding, right: titleEdgeInsets.right)
+    }
+
+    func updateImageInsets() {
+        let topPadding = isHighlighted ? shadowHeight * CGFloat(depth) : 0
+        let bottomPadding = isHighlighted ? shadowHeight * (1 - CGFloat(depth)) : shadowHeight
+        super.imageEdgeInsets = UIEdgeInsets(top: topPadding, left: imageEdgeInsets.left, bottom: bottomPadding, right: imageEdgeInsets.right)
     }
 
     fileprivate func updateBackgroundImages() {