自定义 UISlidre 创建动态滑块缩略图

   滑块指定了两个缩略图，气泡仅在滑块处于使用中（UIControlStateHighlighted）时才显示，在正常状态下（UIControlStateNormal）

只有较小的矩形缩略图会显示，用户可以点击缩略图查看当前设置。特定于上下文的反馈气泡模拟标准iPhone键盘上的高亮字母显示。

    为适应这些样式变化，滑块在每个手势的开始和结束处更新帧。受到触摸（UIControlEventTouchDown）时，帧的thumbFrame高度扩展60像素，

这个额外空间在交互过程中显示扩展的缩略图提供了足够的空间。

   当手指从屏幕上移除时（UIControlEventTouchUpInside 或 UIControlEventTouchUpOutside），滑块回到其上一次寸，即baseFrame。这会恢复其他屏幕

对象的空间。确保只有在用户直接接触滑块时才激活它。

代码： 构建动态滑块缩略图

#define COOKBOOK_PURPLE_COLOR    [UIColor colorWithRed:0.20392f green:0.19607f blue:0.61176f alpha:1.0f]
#define BARBUTTON(TITLE, SELECTOR)     [[[UIBarButtonItem alloc] initWithTitle:TITLE style:UIBarButtonItemStylePlain target:self action:SELECTOR] autorelease]

@interface TestBedViewController : UIViewController
{
    float previousValue;
    UIImage *simpleThumbImage;
    CGRect baseFrame;
    CGRect thumbFrame;
}
@end

@implementation TestBedViewController
// Draw centered text into the context
void centerText(CGContextRef context, NSString *fontname, float textsize, NSString *text, CGPoint point, UIColor *color)
{
    CGContextSaveGState(context);
    CGContextSelectFont(context, [fontname UTF8String], textsize, kCGEncodingMacRoman);
    
    // Retrieve the text width without actually drawing anything
    CGContextSaveGState(context);
    CGContextSetTextDrawingMode(context, kCGTextInvisible);
    CGContextShowTextAtPoint(context, 0.0f, 0.0f, [text UTF8String], text.length);
    CGPoint endpoint = CGContextGetTextPosition(context);
    CGContextRestoreGState(context);
    
    // Query for size to recover height. Width is less reliable
    CGSize stringSize = [text sizeWithFont:[UIFont fontWithName:fontname size:textsize]];
    
    // Draw the text
    [color setFill];
    CGContextSetShouldAntialias(context, true);
    CGContextSetTextDrawingMode(context, kCGTextFill);
    CGContextSetTextMatrix (context, CGAffineTransformMake(1, 0, 0, -1, 0, 0));
    CGContextShowTextAtPoint(context, point.x - endpoint.x / 2.0f, point.y + stringSize.height / 4.0f, [text UTF8String], text.length);
    CGContextRestoreGState(context);
}

// Create a thumb image using a grayscale/numeric level
- (UIImage *) createImageWithLevel: (float) aLevel
{
    UIGraphicsBeginImageContext(CGSizeMake(40.0f, 100.0f));
    CGContextRef context = UIGraphicsGetCurrentContext();

    float INSET_AMT = 1.5f;

    // Create a filled rect for the thumb
    [[UIColor darkGrayColor] setFill];
    CGContextAddRect(context, CGRectMake(INSET_AMT, 40.0f + INSET_AMT, 40.0f - 2.0f * INSET_AMT, 20.0f - 2.0f * INSET_AMT));
    CGContextFillPath(context);
    
    // Outline the thumb
    [[UIColor whiteColor] setStroke];
    CGContextSetLineWidth(context, 2.0f);    
    CGContextAddRect(context, CGRectMake(2.0f * INSET_AMT, 40.0f + 2.0f * INSET_AMT, 40.0f - 4.0f * INSET_AMT, 20.0f - 4.0f * INSET_AMT));
    CGContextStrokePath(context);

    // Create a filled ellipse for the indicator
    [[UIColor colorWithWhite:aLevel alpha:1.0f] setFill];
    CGContextAddEllipseInRect(context, CGRectMake(0.0f, 0.0f, 40.0f, 40.0f));
    CGContextFillPath(context);
    
    // Label with a number
    NSString *numstring = [NSString stringWithFormat:@"%0.1f", aLevel];
    UIColor *textColor = (aLevel > 0.5f) ? [UIColor blackColor] : [UIColor whiteColor];
    centerText(context, @"Georgia", 20.0f, numstring, CGPointMake(20.0f, 20.0f), textColor);
    
    // Outline the indicator circle
    [[UIColor grayColor] setStroke];
    CGContextSetLineWidth(context, 3.0f);    
    CGContextAddEllipseInRect(context, CGRectMake(INSET_AMT, INSET_AMT, 40.0f - 2.0f * INSET_AMT, 40.0f - 2.0f * INSET_AMT));
    CGContextStrokePath(context);
    
    // Build and return the image
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return theImage;
}

// Return a base thumb image without the bubble
UIImage *createSimpleThumb()
{
    float INSET_AMT = 1.5f;
    UIGraphicsBeginImageContext(CGSizeMake(40.0f, 100.0f));
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // Create a filled rect for the thumb
    [[UIColor darkGrayColor] setFill];
    CGContextAddRect(context, CGRectMake(INSET_AMT, 40.0f + INSET_AMT, 40.0f - 2.0f * INSET_AMT, 20.0f - 2.0f * INSET_AMT));
    CGContextFillPath(context);
    
    // Outline the thumb
    [[UIColor whiteColor] setStroke];
    CGContextSetLineWidth(context, 2.0f);    
    CGContextAddRect(context, CGRectMake(2.0f * INSET_AMT, 40.0f + 2.0f * INSET_AMT, 40.0f - 4.0f * INSET_AMT, 20.0f - 4.0f * INSET_AMT));
    CGContextStrokePath(context);
    
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return theImage;
}

// Update the thumb images as needed
- (void) updateThumb: (UISlider *) aSlider
{
    // Only update the thumb when registering significant changes, i.e. 10%
    if ((aSlider.value < 0.98) && (ABS(aSlider.value - previousValue) < 0.1f)) return;
    
    // create a new custom thumb image and use it for the highlighted state
    UIImage *customimg = [self createImageWithLevel:aSlider.value];
    [aSlider setThumbImage: simpleThumbImage forState: UIControlStateNormal];
    [aSlider setThumbImage: customimg forState: UIControlStateHighlighted];
    previousValue = aSlider.value;
}

// Expand the slider to accomodate the bigger thumb
- (void) startDrag: (UISlider *) aSlider
{
    aSlider.frame = thumbFrame;
    aSlider.center = CGPointMake(160.0f, 140.0f);
}

// At release, shrink the frame back to normal
- (void) endDrag: (UISlider *) aSlider
{
    aSlider.frame = baseFrame;
    aSlider.center = CGPointMake(160.0f, 140.0f);
}

- (void) viewDidLoad
{
    self.navigationController.navigationBar.tintColor = COOKBOOK_PURPLE_COLOR;
    self.title = @"Custom Slider";

    // Initialize slider settigns
    previousValue = -99.0f;
    simpleThumbImage = [createSimpleThumb() retain];
    thumbFrame = CGRectMake(0.0f, 0.0f, 280.0f, 100.0f);
    baseFrame = CGRectMake(0.0f, 0.0f, 280.0f, 40.0f);    
    
    // Create slider
    UISlider *slider = [[UISlider alloc] initWithFrame:baseFrame];
    slider.center = CGPointMake(160.0f, 140.0f);
    slider.value = 0.0f;
    
    // Create the callbacks for touch, move, and release
    [slider addTarget:self action:@selector(startDrag:) forControlEvents:UIControlEventTouchDown];
    [slider addTarget:self action:@selector(updateThumb:) forControlEvents:UIControlEventValueChanged];
    [slider addTarget:self action:@selector(endDrag:) forControlEvents:UIControlEventTouchUpInside | UIControlEventTouchUpOutside];

    // Present the slider
    [self.view addSubview:slider];
    [self performSelector:@selector(updateThumb:) withObject:slider afterDelay:0.1f];
}
@end