Search code examples
iosuiimageviewuibuttonuislider

How to add a another image to Thumb of a slider or How to add two thumb images?


I am Building ios app using storyboards.I am facing a critical issue now. I created slider programmatically. I added thumb image as my own custom image. I want to increase and decrease width on button click. These all are working fine. Only thing I want to do is, I want to add an another image under this thumb image. The image newly added should move respective with thumb image.


Solution

  • This method will create lot of complications.Better create custom slider.Everything have to be created programmatically.

    Declare views and frames as shown Below.

    UIView *slider,*timeLine,*mainView;
    UIView *thumb;
    CGRect sliderFrame,thumbFrame;
    -(void)createTimeLine
    {
        timeLine = [[UIView alloc]initWithFrame:CGRectMake(0, 0, mainView.frame.size.width, 10)];
        timeLine.backgroundColor=[UIColor colorWithRed:224.0/255.0f green:224.0/255.0f blue:224.0/255.0f  alpha:1.0];
        [mainView addSubview:timeLine];
    
        [self createSlider];
        [self createThumb];
    
    }
    -(void)createSlider
    {
        sliderFrame=CGRectMake(50, 0, delta, 10);
        slider=[[UIView alloc]initWithFrame:sliderFrame];
        slider.backgroundColor=[UIColor colorWithRed:0.0/255.0f green:102.0/255.0f blue:0.0/255.0f  alpha:1.0];
        [mainView addSubview:slider];
        [slider bringSubviewToFront:mainView];
    }
    -(void)createThumb{
        UIImage * thumbImage = [UIImage imageNamed:@"[email protected]"];
        float actualHeight = thumbImage.size.height;
        float actualWidth = thumbImage.size.width;
        thumbFrame = CGRectMake((fabs(actualWidth - sliderFrame.size.width))/2,timeLine.frame.size.height,actualWidth,actualHeight);
        thumb=[[UIView alloc]initWithFrame:thumbFrame];
        thumb.center = CGPointMake(sliderFrame.origin.x + sliderFrame.size.width/2, sliderFrame.size.height+thumbFrame.size.height/2);
        thumb.backgroundColor= [UIColor colorWithPatternImage:thumbImage];
        thumb.userInteractionEnabled = YES;
    
        [mainView insertSubview:thumb atIndex:mainView.subviews.count];
    
        UIPanGestureRecognizer *move=[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(drag:)];
        move.maximumNumberOfTouches = 1;
        move.minimumNumberOfTouches = 1;
        [thumb addGestureRecognizer:move];
    }
    -(void)drag:(UIPanGestureRecognizer *)panGestureRecognizer {
        CGPoint touchLocation = [panGestureRecognizer locationInView:mainView];
        if (panGestureRecognizer.state == UIGestureRecognizerStateBegan) {
        }
        else if (panGestureRecognizer.state == UIGestureRecognizerStateChanged) {
            if ((touchLocation.x>(timeLine.frame.origin.x-(thumbFrame.size.width/2))) && (touchLocation.x <= (timeLine.frame.size.width-(thumbFrame.size.width/2))))
            {
                thumbFrame.origin.x =touchLocation.x;
                thumb.frame = thumbFrame;
                sliderFrame.origin.x = touchLocation.x + (thumbFrame.size.width - sliderFrame.size.width)/2;
                slider.frame = sliderFrame;
    
            }
    
        } else if (panGestureRecognizer.state == UIGestureRecognizerStateEnded) {
        }
    }
    

    Pangesture is applied for moving the thumbImage.