Add enhancement #4: Ability to set chiclet background.

Author: designatednerd

DNSCastroSegmentedControl/Base.lproj/Main.storyboard

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="6254" systemVersion="14B25" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" initialViewController="vXZ-lx-hvc">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="6254" systemVersion="14C109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" initialViewController="vXZ-lx-hvc">
     <dependencies>
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6247"/>
     </dependencies>
@@ -47,23 +47,34 @@
                                     <action selector="customSegmentedControlChanged:" destination="vXZ-lx-hvc" eventType="valueChanged" id="nO3-JK-DKV"/>
                                 </connections>
                             </view>
+                            <view contentMode="scaleToFill" placeholderIntrinsicWidth="infinite" placeholderIntrinsicHeight="40" translatesAutoresizingMaskIntoConstraints="NO" id="j9m-ls-eiU" customClass="DNSCastroSegmentedControl">
+                                <rect key="frame" x="20" y="266" width="280" height="40"/>
+                                <color key="backgroundColor" white="0.33333333333333331" alpha="1" colorSpace="calibratedWhite"/>
+                                <connections>
+                                    <action selector="customSegmentedControlChanged:" destination="vXZ-lx-hvc" eventType="valueChanged" id="B9U-sC-5HQ"/>
+                                </connections>
+                            </view>
                         </subviews>
                         <color key="backgroundColor" white="0.0" alpha="1" colorSpace="calibratedWhite"/>
                         <constraints>
                             <constraint firstAttribute="trailing" secondItem="XHm-9W-22v" secondAttribute="trailing" constant="20" id="4le-Ud-K0s"/>
                             <constraint firstAttribute="trailing" secondItem="ovI-wb-jw2" secondAttribute="trailing" constant="20" id="9Wu-6r-EUg"/>
                             <constraint firstAttribute="centerX" secondItem="9qE-kh-mCF" secondAttribute="centerX" id="A7n-zP-9Vs"/>
+                            <constraint firstAttribute="trailing" secondItem="j9m-ls-eiU" secondAttribute="trailing" constant="20" id="Cfg-hw-IFt"/>
+                            <constraint firstItem="j9m-ls-eiU" firstAttribute="top" secondItem="9qE-kh-mCF" secondAttribute="bottom" constant="18" id="CqU-Nx-cWV"/>
                             <constraint firstItem="ovI-wb-jw2" firstAttribute="leading" secondItem="kh9-bI-dsS" secondAttribute="leading" constant="20" id="Ks2-ZK-gsx"/>
                             <constraint firstItem="9qE-kh-mCF" firstAttribute="top" secondItem="XHm-9W-22v" secondAttribute="bottom" constant="20" id="YhT-tu-ZUw"/>
                             <constraint firstItem="27t-dN-biq" firstAttribute="top" secondItem="jyV-Pf-zRb" secondAttribute="bottom" constant="20" id="aLq-dN-WFv"/>
                             <constraint firstItem="XHm-9W-22v" firstAttribute="top" secondItem="ovI-wb-jw2" secondAttribute="bottom" constant="20" id="f3C-fx-OzS"/>
                             <constraint firstItem="ovI-wb-jw2" firstAttribute="top" secondItem="27t-dN-biq" secondAttribute="bottom" constant="20" id="hZ5-LF-bmt"/>
                             <constraint firstItem="XHm-9W-22v" firstAttribute="leading" secondItem="kh9-bI-dsS" secondAttribute="leading" constant="20" id="izC-OW-Q5Y"/>
+                            <constraint firstItem="j9m-ls-eiU" firstAttribute="leading" secondItem="kh9-bI-dsS" secondAttribute="leading" constant="20" id="x3P-RV-Jcw"/>
                             <constraint firstAttribute="centerX" secondItem="27t-dN-biq" secondAttribute="centerX" id="yoP-dt-XcW"/>
                         </constraints>
                     </view>
                     <connections>
                         <outlet property="autosizedSegmentedControl" destination="9qE-kh-mCF" id="IDp-BT-59L"/>
+                        <outlet property="coloredSelectionBackgroundSegmentedControl" destination="j9m-ls-eiU" id="YXZ-Mj-wPR"/>
                         <outlet property="segmentedControl" destination="ovI-wb-jw2" id="SlU-vZ-SMX"/>
                         <outlet property="stairsSegmentedControl" destination="XHm-9W-22v" id="bHJ-hG-Enq"/>
                         <outlet property="standardSegmentedControl" destination="27t-dN-biq" id="215-Vk-YsG"/>

DNSCastroSegmentedControl/Library/DNSCastroSegmentedControl.h

@@ -27,6 +27,9 @@
 ///The border color of the slider. If nil, defaults to the tintColor of this view. 
 @property (nonatomic) UIColor *selectionViewColor;
 
+///The background color of the selection chiclet. If nil, defaults to [UIColor clearColor].
+@property (nonatomic) UIColor *selectionBackgroundColor;
+
 /**
  *  Sets the given selected index. 
  * 

DNSCastroSegmentedControl/Library/DNSCastroSegmentedControl.m

@@ -18,6 +18,7 @@
 
 @interface DNSCastroSegmentedControl()
 @property (nonatomic) UIView *selectionView;
+@property (nonatomic) UIView *selectionBackgroundView;
 @property (nonatomic) NSArray *sectionViews;
 @property (nonatomic) CGPoint initialTouchPoint;
 @property (nonatomic) NSLayoutConstraint *selectionLeftConstraint;
@@ -41,6 +42,7 @@ - (void)layoutSubviews
         [self setupKVO];
         [self setupSectionViews];
         [self setupSelectionView];
+        [self setupSelectionBackgroundView];
         [self roundAllTheThings];
         [self setSelectedSegmentIndex:self.selectedSegmentIndex animated:NO];
     }
@@ -125,11 +127,52 @@ - (void)setupSelectionView
     [self addConstraint:self.selectionLeftConstraint];
 }
 
+- (void)setupSelectionBackgroundView
+{
+    self.selectionBackgroundView = [[UIView alloc] init];
+    self.selectionBackgroundView.translatesAutoresizingMaskIntoConstraints = NO;
+    
+    if (self.selectionBackgroundColor) {
+        self.selectionBackgroundView.backgroundColor = self.selectionBackgroundColor;
+    } else {
+        self.selectionBackgroundView.backgroundColor = [UIColor clearColor];
+    }
+    
+    //Insert below the labels
+    [self insertSubview:self.selectionBackgroundView belowSubview:[self.sectionViews firstObject]];
+    
+    //Pin in all directions to the chiclet.
+    [self pinView:self.selectionBackgroundView
+      toOtherView:self.selectionView
+        attribute:NSLayoutAttributeRight];
+    [self pinView:self.selectionBackgroundView
+      toOtherView:self.selectionView
+        attribute:NSLayoutAttributeLeft];
+    [self pinView:self.selectionBackgroundView
+      toOtherView:self.selectionView
+        attribute:NSLayoutAttributeTop];
+    [self pinView:self.selectionBackgroundView
+      toOtherView:self.selectionView
+        attribute:NSLayoutAttributeBottom];
+}
+
 - (void)roundAllTheThings
 {
     CGFloat cornerRadius = (CGRectGetHeight(self.frame) / 2);
     self.layer.cornerRadius = cornerRadius;
     self.selectionView.layer.cornerRadius = cornerRadius - SelectionViewPadding;
+    self.selectionBackgroundView.layer.cornerRadius = cornerRadius - SelectionViewPadding;
+}
+
+- (void)pinView:(UIView *)view1 toOtherView:(UIView *)view2 attribute:(NSLayoutAttribute)attribute
+{
+    [self addConstraint:[NSLayoutConstraint constraintWithItem:view1
+                                                     attribute:attribute
+                                                     relatedBy:NSLayoutRelationEqual
+                                                        toItem:view2
+                                                     attribute:attribute
+                                                    multiplier:1
+                                                      constant:0]];
 }
 
 - (void)pinViewToWidth:(UIView *)view withPadding:(CGFloat)padding
@@ -383,6 +426,15 @@ - (void)setSelectionViewColor:(UIColor *)selectionViewColor
     }
 }
 
+- (void)setSelectionBackgroundColor:(UIColor *)selectionBackgroundColor
+{
+    _selectionBackgroundColor = selectionBackgroundColor;
+    
+    if (self.selectionBackgroundView) {
+        self.selectionBackgroundView.backgroundColor = selectionBackgroundColor;
+    }
+}
+
 - (void)setSelectedSegmentIndex:(NSInteger)selectedSegmentIndex
 {
     if (_selectedSegmentIndex != selectedSegmentIndex) {
@@ -412,6 +464,7 @@ - (void)animateSelectionViewUpIfNeeded:(BOOL)shorten
                             options:UIViewAnimationOptionCurveEaseOut
                          animations:^{
                              self.selectionView.transform = CGAffineTransformMakeScale(scaleXPercentage, scaleYPercentage);
+                             self.selectionBackgroundView.transform = CGAffineTransformMakeScale(scaleXPercentage, scaleYPercentage);
                              [self layoutIfNeeded];
                          }
                          completion:nil];
@@ -497,6 +550,7 @@ - (void)touchesEndedOrCancelled
                         options:UIViewAnimationOptionCurveEaseIn
                      animations:^{
                          self.selectionView.transform = CGAffineTransformIdentity;
+                         self.selectionBackgroundView.transform = CGAffineTransformIdentity;
                          //Calls LayoutIfNeeded - no need to call it seperately.
                          [self snapToCurrentSection:NO];
                      }

DNSCastroSegmentedControl/ViewController.m

@@ -15,6 +15,7 @@ @interface ViewController ()
 @property (nonatomic, weak) IBOutlet DNSCastroSegmentedControl *segmentedControl;
 @property (nonatomic, weak) IBOutlet DNSCastroSegmentedControl *stairsSegmentedControl;
 @property (nonatomic, weak) IBOutlet DNSCastroSegmentedControl *autosizedSegmentedControl;
+@property (nonatomic, weak) IBOutlet DNSCastroSegmentedControl *coloredSelectionBackgroundSegmentedControl;
 @property (nonatomic) DNSCastroSegmentedControl *programmaticSegmentedControl;
 @end
 
@@ -61,6 +62,15 @@ - (void)viewDidLoad
 
     self.autosizedSegmentedControl.choiceColor = [UIColor greenColor];
     self.autosizedSegmentedControl.selectionViewColor = [UIColor greenColor];
+    
+    self.coloredSelectionBackgroundSegmentedControl.choices = @[
+                                                                @"Colored",
+                                                                @"Background",
+                                                                ];
+    //Use a red background and no outline.
+    self.coloredSelectionBackgroundSegmentedControl.selectionBackgroundColor = [UIColor redColor];
+    self.coloredSelectionBackgroundSegmentedControl.selectionViewColor = [UIColor clearColor];
+    self.coloredSelectionBackgroundSegmentedControl.choiceColor = [UIColor whiteColor];
 }
 
 - (void)viewDidLayoutSubviews
@@ -74,11 +84,11 @@ - (void)viewDidLayoutSubviews
         self.programmaticSegmentedControl.backgroundColor = self.stairsSegmentedControl.backgroundColor;
         [self.view addSubview:self.programmaticSegmentedControl];
 
-        //Pin to bottom of the autosized SC
+        //Pin to bottom of the colored SC
         [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.programmaticSegmentedControl
                                                               attribute:NSLayoutAttributeTop
                                                               relatedBy:NSLayoutRelationEqual
-                                                                 toItem:self.autosizedSegmentedControl
+                                                                 toItem:self.coloredSelectionBackgroundSegmentedControl
                                                               attribute:NSLayoutAttributeBottom
                                                              multiplier:1
                                                                constant:40]];