翻译文章

两个旋钮的UISlider

有时系统提供的控件不能满足需求时，可以考虑自定义控件。
比如，你需要开发一个控件能让用户过滤商品的价格，你可以使用一对UISlider，其中一个设置价格区间的最小值，一个设置价格区间的最大值，

两个UISlider设置价格区间

然而，这个设计对用户不太友好。给用户提供一个带两个旋钮的slider是更好的，一个旋钮表示最低价，一个旋钮表示最高价，如下所示：

slider

开始

本节引导你创建一个slider的基本结构，你可以在模拟器上看到一个简单的slider。
打开xcode，新建一个工程名CERangeSlider。
首先，自定义的控件必须是UIView的子类。查看一下UIKit里的类，许多控件比如UILabel和UIWebView都是UIView的子类，也有一小部分比如UIButton和UISwitch是UIControl的子类，如下面的结构图：

UIControl实现了target-action模式。这是一种通知订购者变化的机制。UIControl也有一些和控制状态相关的属性（UIControlState）。我们的自定义控件将使用target-action模式。

新建一个继承自UIControl的类命名为CERangeSlider，打开CEViewController.m，引入CERangeSlider的头文件：

#import "CERangeSlider.h"

在 CEViewController.m里添加实例变量：

@implementation CEViewController
{
    CERangeSlider* _rangeSlider;
}

在CEViewController.m里添加下面的代码：

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.
    
    NSUInteger margin = 20;
    CGRect sliderFrame = CGRectMake(margin, margin, self.view.frame.size.width - margin * 2, 30);
    _rangeSlider = [[CERangeSlider alloc] initWithFrame:sliderFrame];
    _rangeSlider.backgroundColor = [UIColor redColor];
    
    [self.view addSubview:_rangeSlider];
}
上面的代码会创建CERangeSlider的实例变量并添加到view上，背景色是红色，如果不设置背景色，这个控件的颜色是clear，clear是看不到的。

运行模拟器，你可以看到：

我们需要一些属性来记录控件上的一些信息。

添加一些默认的属性

在CERangeSlider.h里添加下面的属性：

@property (nonatomic) float maximumValue;
@property (nonatomic) float minimumValue;
@property (nonatomic) float upperValue;
@property (nonatomic) float lowerValue;

这四个属性用来描述控件的状态，maximumValue和minimumValue是slider的最大值和最小值，upperValue和lowerValue用来描述用户设置的区间值。
打开CERangeSlider.m，在初始化方法里添加下面的代码：

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        _maximumValue = 10.0;
        _minimumValue = 0.0;
        _upperValue = 8.0;
        _lowerValue = 2.0;
    }
    return self;
}

Images vs CoreGraphics

有两种方式来渲染自定义的控件：

1. Images - 使用图片来代替控件上的一些元素；
2. CoreGraphics - 使用layer和CoreGraphics来渲染你的控件。

Core Graphics -使用Core Graphics来构建控件意味着你要自己写一些渲染控件的代码，这样有助于你创建更灵活的API。
使用Core Graphics，你可以用参数来表示你的控件的属性，比如颜色，边框的宽度，曲率等。也方便别的开发者根据需要使用你的控件。
接下来将会介绍使用Core Graphics来渲染控件。
打开CERangeSlider.m，添加下面的实例变量：

@implementation CERangeSlider
{
    CALayer* _trackLayer;
    CALayer* _upperKnobLayer;//slider左边的滑块
    CALayer* _lowerKnobLayer;//slider右边边的滑块
    
    float _knobWidth;
    float _useableTrackLength;
}

_trackLayer、_upperKnobLayer和_lowerKnobLayer用于渲染slider上的组件，_knobWidth和_useableTrackLength用于布局。
接下来，在CERangeSlider.m的initWithFrame:的方法添加下面的代码来初始化这些实例变量，添加到if (self) { }里：

_trackLayer = [CALayer layer];
_trackLayer.backgroundColor = [UIColor blueColor].CGColor;
[self.layer addSublayer:_trackLayer];
        
_upperKnobLayer = [CALayer layer];
_upperKnobLayer.backgroundColor = [UIColor greenColor].CGColor;
[self.layer addSublayer:_upperKnobLayer];
        
_lowerKnobLayer = [CALayer layer];
_lowerKnobLayer.backgroundColor = [UIColor greenColor].CGColor;
[self.layer addSublayer:_lowerKnobLayer];
                                           
[self setLayerFrames];

上面的代码创建了三个layer并且把他们添加到了自定义控件的根layer上；
接下来，在CERangeSlider.m添加下面的方法：

- (void) setLayerFrames
{
    _trackLayer.frame = CGRectInset(self.bounds, 0, self.bounds.size.height / 3.5);
    [_trackLayer setNeedsDisplay];

    _knobWidth = self.bounds.size.height;
    _useableTrackLength = self.bounds.size.width - _knobWidth;

//现根据滑块对应的的值计算滑块center的x值，然后设置滑块的frame
    float upperKnobCentre = [self positionForValue:_upperValue];
    _upperKnobLayer.frame = CGRectMake(upperKnobCentre - _knobWidth / 2, 0, _knobWidth, _knobWidth);

    float lowerKnobCentre = [self positionForValue:_lowerValue];
    _lowerKnobLayer.frame = CGRectMake(lowerKnobCentre - _knobWidth / 2, 0, _knobWidth, _knobWidth);

    [_upperKnobLayer setNeedsDisplay];
    [_lowerKnobLayer setNeedsDisplay];
}
 
//根据滑块对应的值来计算滑块center的x的值                                          
- (float) positionForValue:(float)value
{
    return _useableTrackLength * (value - _minimumValue) /
        (_maximumValue - _minimumValue) + (_knobWidth / 2);
}

setLayerFrames根据slider的值设置了两个滑块和轨迹layer的frame。
positionForValue使用了简单的比率来计算滑块中心点的值。

添加交互逻辑

新建一个CALayer的子类命名为CERangeSliderKnobLayer，打开CERangeSliderKnobLayer.h文件添加下面的代码：

#import <QuartzCore/QuartzCore.h>

@class CERangeSlider;

@interface CERangeSliderKnobLayer : CALayer

@property BOOL highlighted;
@property (weak) CERangeSlider* slider;//使用weak避免循环引用

@end

这里添加了两个属性，highlighted表示滑块是否是高亮的，当滑块被用户拖动时是YES；slider表示它所在的slider。
接下来，改变CERangeSlider.m的实例变量的定义：

CERangeSliderKnobLayer* _upperKnobLayer;
CERangeSliderKnobLayer* _lowerKnobLayer;

同时改变initWithFrame::

_upperKnobLayer = [CERangeSliderKnobLayer layer];
_upperKnobLayer.slider = self;
_upperKnobLayer.backgroundColor = [UIColor greenColor].CGColor;
[self.layer addSublayer:_upperKnobLayer];

_lowerKnobLayer = [CERangeSliderKnobLayer layer];
_lowerKnobLayer.slider = self;
_lowerKnobLayer.backgroundColor = [UIColor greenColor].CGColor;
[self.layer addSublayer:_lowerKnobLayer];

上面的方法使用CERangeSliderKnobLayer替换了CALayer来创建滑块，并且设置了layer.slider 属性。
运行模拟器和之前看到的一样：

Todo-1.png

接下来为slider添加触摸事件。

添加触摸事件

打开 CERangeSlider.m，在_useableTrackLength下面添加一个新的实例变量：

CGPoint _previousTouchPoint;

这个变量用于记录用户触摸的位置。
UIControl提供了几个方法用于记录touches，UIControl的子类可以重写这几个方发来添加它们自己的交互逻辑在CERangeSlider.m里添加下面的方法：

- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
{
    _previousTouchPoint = [touch locationInView:self];
    
    // hit test the knob layers
   //判断是否触摸到了滑块
    if(CGRectContainsPoint(_lowerKnobLayer.frame, _previousTouchPoint))
    {
        _lowerKnobLayer.highlighted = YES;
        [_lowerKnobLayer setNeedsDisplay];
    }
    else if(CGRectContainsPoint(_upperKnobLayer.frame, _previousTouchPoint))
    {
        _upperKnobLayer.highlighted = YES;
        [_upperKnobLayer setNeedsDisplay];
    }
    return _upperKnobLayer.highlighted || _lowerKnobLayer.highlighted;
}

上面的方法当用户第一次触摸到slider的时候会调用。
首先，它转换了touch event 到控件的坐标系统上，接下来，它会查看触摸点是否在滑块的frame内。上面这个方法的返回值会通知UIControl的父类是否继续记录随后的触摸事件。
如果有一个滑块的highlighted是YES，则触摸事件的记录将会继续。setNeedsDisplay这个方法会是layer调用
drawInContext方法来重新绘制,稍后你会看到它的重要性。
现在你有了一个初始化的触摸事件，你需要继续处理用户在屏幕上移动他们手指引发的事件，添加下列的代码在 CERangeSlider.m里：

#define BOUND(VALUE, UPPER, LOWER)  MIN(MAX(VALUE, LOWER), UPPER)

- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
{
    CGPoint touchPoint = [touch locationInView:self];
    
    // 1. determine by how much the user has dragged
    float delta = touchPoint.x - _previousTouchPoint.x;
    float valueDelta = (_maximumValue - _minimumValue) * delta / _useableTrackLength;
    
    _previousTouchPoint = touchPoint;
    
    // 2. update the values
    if (_lowerKnobLayer.highlighted)
    {
        _lowerValue += valueDelta;
        _lowerValue = BOUND(_lowerValue, _upperValue, _minimumValue);
    }
    if (_upperKnobLayer.highlighted)
    {
        _upperValue += valueDelta;
        _upperValue = BOUND(_upperValue, _maximumValue, _lowerValue);
    }
    
    // 3. Update the UI state
    [CATransaction begin];
    [CATransaction setDisableActions:YES] ;
    
    [self setLayerFrames];
    
    [CATransaction commit];
        
    return YES;
}

分析一下上面的代码：
1.首先计算了delta是现在的point.x与第一次触碰的point.x的差值，然后基于控件maximum和minimum把它转换成滑块需要滑动的值。
2.基于用户滑动的位置调整滑块的值，这里使用了BOUND宏避免滑块的值超出slider最小或最大值
3.这一部分设置了CATransaction的disabledActions flag，者可以保证每一个layer的frame的变化会立即更新，最后，setLayerFrames被调用来更改滑块的frame。
最后我们需要处理触摸事件的结束：

- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
{
    _lowerKnobLayer.highlighted = _upperKnobLayer.highlighted = NO;
    [_lowerKnobLayer setNeedsDisplay];
    [_upperKnobLayer setNeedsDisplay];
}

上面的代码把滑块设置为非高亮的状态。
运行你的代码，现在你可以拖动滑块了：

你会注意到，当slider正在跟踪触摸事件时，你可以将你的手指拖动到slider的bounds外，然后再返回到slider的bounds内时触摸事件不会丢失。

改变通知

现在用户可以拖动滑块了，我们现在考虑如何把滑块的变化传递给app来让app知道slider的变化。
如果你研究过UIKit的controls，你会发现它们没有使用NSNotification或者KVO，UIKit里广泛地使用了delegate模式和target-action模式。

Delegate模式 -使用代理模式需要提供一个协议，这个协议包含了用于通知的方法。控件通常会有一个命名为delegate的属性，delegate可以是任何实现了这个协议的类。UITableView提供了UITableViewDelegate协议。控件只能有一个delegate，delegate方法可以传递任意数量的参数，你可以根据需要传递尽可能多的信息。

Target-action模式 -target-action模式是UIControl的基类提供的，当控件状态发生变化时，target会受到通知，你可以给控件提供多个target，可以创建自定义的事件([UIControlEventApplicationReserved]),但自定义的事件数量限制为4个。action无法通过event发送任何信息，因此不能用于传递额外的信息。

两种模式主要的不同点在于：
多播：delegate只能有一个delegate实例，而target-action可以设置多个target，这些target都可以收到event变化。
灵活性：使用代理模式，你可以在协议的方法里控制传递的信息量，target-action无法传递额外的信息。
我们的slider控件不需要传递大量的信息，这里使用target-action模式。
slider的滑块的值是在continueTrackingWithTouch:withEvent:这个方法里更新的，我们在这里添加变化的通知。
在 CERangeSlider.m的continueTrackingWithTouch:withEvent:里，在return YES之前添加下面的代码：
[self sendActionsForControlEvents:UIControlEventValueChanged];
这个方法会是所有的target收到这个变化的通知。
打开CEViewController.m在viewDidLoad的末尾添加下面的代码：
[_rangeSlider addTarget:self action:@selector(slideValueChanged:) forControlEvents:UIControlEventValueChanged];
每一次slider发送UIControlEventValueChanged action时slideValueChanged:方法都会被调用。
接下来添加下面的方法在CEViewController.m里：

- (void)slideValueChanged:(id)control
{
    NSLog(@"Slider value changed: (%.2f,%.2f)",
          _rangeSlider.lowerValue, _rangeSlider.upperValue);
}

这个方法打印了slider的范围区间。
运行程序并且滑动slider的滑块，可以再控制台看到下面的信息：

DebugOutput.png

使用CoreGraphics绘制控件

首先，你需要更新滑块移动的轨迹的图形
新建一个CALayer的子类命名为CERangeSliderTrackLayer，打开CERangeSliderTrackLayer.h，添加下面的代码：

#import <QuartzCore/QuartzCore.h>

@class CERangeSlider;

@interface CERangeSliderTrackLayer : CALayer

@property (weak) CERangeSlider* slider;

@end

打开CERangeSlider.m 并且引入头文件：

#import "CERangeSliderTrackLayer.h"

打开CERangeSlider.m，把_trackLayer的类替换成CERangeSliderTrackLayer：

CERangeSliderTrackLayer* _trackLayer;

然后在initWithFrame:修改：

_trackLayer = [CERangeSliderTrackLayer layer];
_trackLayer.slider = self;
[self.layer addSublayer:_trackLayer];

_upperKnobLayer = [CERangeSliderKnobLayer layer];
_upperKnobLayer.slider = self;
[self.layer addSublayer:_upperKnobLayer];

_lowerKnobLayer = [CERangeSliderKnobLayer layer];
_lowerKnobLayer.slider = self;
[self.layer addSublayer:_lowerKnobLayer];

上面的代码隐藏了背景色。
然后移除slider的背景色。
打开CEViewController.m，移除viewDidLoad的代码：

_rangeSlider.backgroundColor = [UIColor redColor];

现在运行程序：

Screenshot-3.png

给slider添加一些属性，是开发者能自定义它的外观。
打开CERangeSlider.h添加下列的代码：

@property (nonatomic) UIColor* trackColour;
@property (nonatomic) UIColor* trackHighlightColour;
@property (nonatomic) UIColor* knobColour;
@property (nonatomic) float curvaceousness;

- (float) positionForValue:(float)value;

给上面的属性添加默认值
打开CERangeSlider.m在initWithFrame:添加下面的代码：

_trackHighlightColour = [UIColor colorWithRed:0.0 green:0.45 blue:0.94 alpha:1.0];
_trackColour = [UIColor colorWithWhite:0.9 alpha:1.0];
_knobColour = [UIColor whiteColor];
_curvaceousness = 1.0;
_maximumValue = 10.0;
_minimumValue = 0.0;

接下来，打开CERangeSliderTrackLayer.m并且引入头文件：

#import "CERangeSlider.h"

这个layer渲染了滑块滑动的轨迹，为了绘制这个轨迹，你需要实现drawInContext: 并且使用Core Graphics APIs 来进行渲染。
在CERangeSliderTrackLayer.m添加下面的方法：

- (void)drawInContext:(CGContextRef)ctx
{
    // clip  给layer绘制圆角
    float cornerRadius = self.bounds.size.height * self.slider.curvaceousness / 2.0;
    UIBezierPath *switchOutline = [UIBezierPath bezierPathWithRoundedRect:self.bounds
                                                             cornerRadius:cornerRadius];
    CGContextAddPath(ctx, switchOutline.CGPath);
    CGContextClip(ctx);
    
    // 1) fill the track 给整个layer填充颜色
    CGContextSetFillColorWithColor(ctx, self.slider.trackColour.CGColor);
    CGContextAddPath(ctx, switchOutline.CGPath);
    CGContextFillPath(ctx);
    
    // 2) fill the highlighed range 计算两个滑块的位置，并把滑块中间的轨迹填充高亮的颜色
    CGContextSetFillColorWithColor(ctx, self.slider.trackHighlightColour.CGColor);
    float lower = [self.slider positionForValue:self.slider.lowerValue];
    float upper = [self.slider positionForValue:self.slider.upperValue];
    CGContextFillRect(ctx, CGRectMake(lower, 0, upper - lower, self.bounds.size.height));
 
    // 3) add a highlight over the track
    CGRect highlight = CGRectMake(cornerRadius/2, self.bounds.size.height/2,
                                  self.bounds.size.width - cornerRadius, self.bounds.size.height/2);
    UIBezierPath *highlightPath = [UIBezierPath bezierPathWithRoundedRect:highlight
                                                             cornerRadius:highlight.size.height * self.slider.curvaceousness / 2.0];
    CGContextAddPath(ctx, highlightPath.CGPath);
    CGContextSetFillColorWithColor(ctx, [UIColor colorWithWhite:1.0 alpha:0.4].CGColor);
    CGContextFillPath(ctx);
 
    // 4) inner shadow
    CGContextSetShadowWithColor(ctx, CGSizeMake(0, 2.0), 3.0, [UIColor grayColor].CGColor);
    CGContextAddPath(ctx, switchOutline.CGPath);
    CGContextSetStrokeColorWithColor(ctx, [UIColor grayColor].CGColor);
    CGContextStrokePath(ctx);
 
    // 5) outline the track
    CGContextAddPath(ctx, switchOutline.CGPath);
    CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);
    CGContextSetLineWidth(ctx, 0.5);
    CGContextStrokePath(ctx); 
}

上面的代码分成了五个步骤，我么看下每个步骤分别显示的：

TrackLayer.jpg

上面的编号和代码里注释的编号是对应的，解释如下：
1.绘制圆角并填充背景色；
2.填充滑块之间的轨迹为高亮色；
3.添加了一个亮色
4.添加了阴影
5.添加边框
一步步地展开，你可以很清晰的看到CERangeSlider的属性是如何影响layer的渲染的。
运行你的程序，可以看到：

Screenshot-4.png

接下来绘制滑块：
打开CERangeSliderKnobLayer.m 文件并且引入头文件：

#import "CERangeSlider.h"

在CERangeSliderKnobLayer.m里添加下面的方法：

• (void)drawInContext:(CGContextRef)ctx
  {
  CGRect knobFrame = CGRectInset(self.bounds, 2.0, 2.0);

  UIBezierPath *knobPath = [UIBezierPath bezierPathWithRoundedRect:knobFrame
  cornerRadius:knobFrame.size.height * self.slider.curvaceousness / 2.0];

  // 1) fill - with a subtle shadow
  CGContextSetShadowWithColor(ctx, CGSizeMake(0, 1), 1.0, [UIColor grayColor].CGColor);
  CGContextSetFillColorWithColor(ctx, self.slider.knobColour.CGColor);
  CGContextAddPath(ctx, knobPath.CGPath);
  CGContextFillPath(ctx);

  // 2) outline
  CGContextSetStrokeColorWithColor(ctx, [UIColor grayColor].CGColor);
  CGContextSetLineWidth(ctx, 0.5);
  CGContextAddPath(ctx, knobPath.CGPath);
  CGContextStrokePath(ctx);

// 3) inner gradient
CGRect rect = CGRectInset(knobFrame, 2.0, 2.0);
UIBezierPath *clipPath = [UIBezierPath bezierPathWithRoundedRect:rect
                                                    cornerRadius:rect.size.height * self.slider.curvaceousness / 2.0];

CGGradientRef myGradient;
CGColorSpaceRef myColorspace;
size_t num_locations = 2;
CGFloat locations[2] = { 0.0, 1.0 };
CGFloat components[8] = { 0.0, 0.0, 0.0 , 0.15,  // Start color
    0.0, 0.0, 0.0, 0.05 }; // End color

myColorspace = CGColorSpaceCreateDeviceRGB();
myGradient = CGGradientCreateWithColorComponents (myColorspace, components,
                                                  locations, num_locations);

CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

CGContextSaveGState(ctx);
CGContextAddPath(ctx, clipPath  .CGPath);
CGContextClip(ctx);
CGContextDrawLinearGradient(ctx, myGradient, startPoint, endPoint, 0);

CGGradientRelease(myGradient);
CGColorSpaceRelease(myColorspace);
CGContextRestoreGState(ctx);

// 4) highlight
if (self.highlighted)
{
    // fill
    CGContextSetFillColorWithColor(ctx, [UIColor colorWithWhite:0.0 alpha:0.1].CGColor);
    CGContextAddPath(ctx, knobPath.CGPath);
    CGContextFillPath(ctx);
}

}
看一下上面的代码每一步之后的显示效果：

KnobLayer.jpg

1.绘制成圆形的并添加了阴影；
2.天加了边框
3.内部添加了颜色；
4.高亮状态下的颜色；
运行程序后可以看到：

Screenshot-5.png