iPhone 的自定义 UISlider

Posted 2023-03-11

【中文标题】iPhone 的自定义 UISlider

【英文标题】：custom UISlider for iPhone

【发布时间】：2012-11-02 15:22:17

【问题描述】：

我正在为 iPad 开发一个应用程序，它需要在 UISlider 中选择特定的数据间隔。滑块应该有两个滑块按钮，控件也应该允许间隔移动，即两个滑块按钮之间的区域以选择其他间隔数据。是否有任何自定义 UI 滑块可用于处理此问题。期待您的想法…… 提前致谢

【参考方案1】：

创建UISlider的两种方式

第一种方式

通过编程创建一个 UISlider。

现在您可以根据需要在其上设置图像。

这是在 UISlider 上放置图像的代码..

UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(0.0, 0.0, 100.0, 30.0)];
[slider setColorPicker:colorPicker];
[slider setUseCustomSlider:NO];

[slider setThumbImage:[UIImage imageNamed:@"thumbSlider.png"] forState:UIControlStateNormal];

[slider setThumbImage:[UIImage imageNamed:@"thumbSlider.png"] forState:UIControlStateHighlighted];

[slider setMinimumTrackImage:[[UIImage imageNamed:@"grey_slide.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:0] forState:UIControlStateNormal];

[slider setMaximumTrackImage:[[UIImage imageNamed:@"blue_slide.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:0] forState:UIControlStateNormal];

[self.view addSubview:slider];

另一种创建自定义滑块的方法

现在仅通过 UIPanGestureRecognizer 创建一个带有两个图像的更多滑块。

在其上添加两个图像。一个像条带，另一个像拇指图像。

这里是代码。

先创建 Slider..

UIImageView *imageback = [[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 47)] autorelease];
imageback.image = [UIImage imageNamed:@"strip.png"];
imageback.backgroundColor = [UIColor clearColor];
[sliderView addSubview:imageback];

sliderImg = [[[UIImageView alloc] initWithFrame:CGRectMake(147.5, 27, 25, 25)] autorelease];
sliderImg.contentMode = UIViewContentModeScaleToFill;
sliderImg.image = [UIImage imageNamed:@"dot.png"];
sliderImg.backgroundColor = [UIColor clearColor];
sliderImg.userInteractionEnabled = YES;
[sliderView addSubview:sliderImg];

现在将 UIPanGestureRecognizer 应用到点图像..

UIPanGestureRecognizer *panGestureImg = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panDetectedSlider:)];
[sliderImg addGestureRecognizer:panGestureImg];
[panGestureImg release];

平移手势法。

-(void)panDetectedSlider:(UIPanGestureRecognizer *)panRecognizer

    if ([panRecognizer state] == UIGestureRecognizerStateBegan)
    
        //Start
    
    else if([panRecognizer state] == UIGestureRecognizerStateChanged)
    
        //Change
        CGPoint translation = [panRecognizer translationInView:sliderImg];
        CGPoint imageViewPosition = sliderImg.center;
        imageViewPosition.x += translation.x;
        sliderImg.center = imageViewPosition;
        [panRecognizer setTranslation:CGPointZero inView:sliderImg];
    
    else if([panRecognizer state] == UIGestureRecognizerStateCancelled || [panRecognizer state] == UIGestureRecognizerStateFailed || [panRecognizer state] == UIGestureRecognizerStateEnded)
    
        //End