[Catalog] Bigger sliders in component example

Summary: Our sliders were too small! Real world sliders would likely take up a full screen width or nearly that, so I've updated our example in the Catalog to be longer. New look: {F5962} Reviewers: randallli, O1 Material components iOS Reviewed By: randallli, O1 Material components iOS Subscribers: randallli Tags: #material_components_ios Differential Revision: http://codereview.cc/D1249
material-components · Jul 18, 2016 · e1b7f86 · e1b7f86
1 parent 32614d0
commit e1b7f86
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 42 deletions.
diff --git a/components/Slider/examples/SliderTypicalUse.m b/components/Slider/examples/SliderTypicalUse.m
@@ -38,7 +38,7 @@ - (void)viewDidLoad {
   // Discrete slider
 
   self.discreteSlider = [[MDCSlider alloc] initWithFrame:sliderFrame];
-  self.discreteSlider.numberOfDiscreteValues = 5;
+  self.discreteSlider.numberOfDiscreteValues = 7;
   [self.discreteSlider addTarget:self
                           action:@selector(didChangeSliderValue:)
                 forControlEvents:UIControlEventValueChanged];

diff --git a/components/Slider/examples/supplemental/SliderTypicalUseSupplemental.m b/components/Slider/examples/supplemental/SliderTypicalUseSupplemental.m
@@ -45,7 +45,7 @@ - (void)setupExampleViews {
   discreteSliderLabel.alpha = [MDCTypography captionFontOpacity];
   [discreteSliderLabel sizeToFit];
   discreteSliderLabel.translatesAutoresizingMaskIntoConstraints = NO;
-  [self.view addSubview:discreteSliderLabel];
+  [self.view insertSubview:discreteSliderLabel belowSubview:self.discreteSlider];
 
   UILabel *disabledSliderLabel = [[UILabel alloc] init];
   disabledSliderLabel.text = @"Slider Disabled";
@@ -71,64 +71,52 @@ - (void)setupExampleViews {
     @"sliderHeight" : @(self.slider.bounds.size.height)
   };
 
-  // Vertical column of sliders
-  NSString *sliderLayoutConstraints =
-      @"V:[slider]-smallVMargin-[discreteSlider]-smallVMargin-[disabledSlider]";
+  // Vertical column
+  NSString *columnConstraints =
+      @"V:[label(sliderHeight)]-smallVMargin-[slider]-largeVMargin-[discreteSliderLabel("
+      @"sliderHeight)]-smallVMargin-[discreteSlider]-largeVMargin-[disabledSliderLabel("
+      @"sliderHeight)]-smallVMargin-[disabledSlider]";
 
-  // Vertical column of labels
-  NSString *labelLayoutConstraints = @"V:[label(sliderHeight)]-smallVMargin-[discreteSliderLabel("
-                                     @"sliderHeight)]-smallVMargin-[disabledSliderLabel("
-                                     @"sliderHeight)]";
-
-  // Horizontal alignment between the two columns
-  NSString *columnConstraints = @"[label(100)]-smallHMargin-[slider]";
+  // Center view vertically
+  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.discreteSlider
+                                                        attribute:NSLayoutAttributeBottom
+                                                        relatedBy:NSLayoutRelationEqual
+                                                           toItem:self.view
+                                                        attribute:NSLayoutAttributeCenterY
+                                                       multiplier:1.f
+                                                         constant:0.f]];
 
-  // Center view horizontally on the left edge of one of the sliders
-  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.disabledSlider
+  // Left-align views
+  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:sliderLabel
                                                         attribute:NSLayoutAttributeLeft
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:self.view
-                                                        attribute:NSLayoutAttributeCenterX
+                                                        attribute:NSLayoutAttributeLeft
                                                        multiplier:1.f
-                                                         constant:12.f]];
+                                                         constant:24.f]];
 
-  // Center view vertically
-  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.disabledSlider
-                                                        attribute:NSLayoutAttributeBottom
+  // Right-align views
+  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:sliderLabel
+                                                        attribute:NSLayoutAttributeRight
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:self.view
-                                                        attribute:NSLayoutAttributeCenterY
+                                                        attribute:NSLayoutAttributeRight
                                                        multiplier:1.f
-                                                         constant:0.f]];
+                                                         constant:-24.f]];
 
-  // Center sliders in their column
+  // All views have same left
   [self.view
-      addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:sliderLayoutConstraints
-                                                             options:NSLayoutFormatAlignAllCenterX
+      addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:columnConstraints
+                                                             options:NSLayoutFormatAlignAllLeft
                                                              metrics:metrics
                                                                views:views]];
 
-  // Left align labels in their column
+  // All views have same right
   [self.view
-      addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:labelLayoutConstraints
-                                                             options:NSLayoutFormatAlignAllLeft
+      addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:columnConstraints
+                                                             options:NSLayoutFormatAlignAllRight
                                                              metrics:metrics
                                                                views:views]];
-
-  // Vertically align first element in label column to first element in slider column
-  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.slider
-                                                        attribute:NSLayoutAttributeCenterY
-                                                        relatedBy:NSLayoutRelationEqual
-                                                           toItem:sliderLabel
-                                                        attribute:NSLayoutAttributeCenterY
-                                                       multiplier:1.f
-                                                         constant:0.f]];
-
-  // Position label column left of slider column, wide enough to accommodate label text
-  [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:columnConstraints
-                                                                    options:0
-                                                                    metrics:metrics
-                                                                      views:views]];
 }
 
 @end