UI help for Horizontal Color Picker

Question

I am trying to make color picker by reading pixel of imageview. Right now I have one imageview in the background and retrieving pixel color from it.

But now i am looking to shift my UI like this, so need help in how should I make this UI

Here's what I thought this will loo like UIView->n no of. Imageview and arrow will be on top of it.

But then there are few things that I am not sure how will I do it

1. I have to keep some color unlock as level is crossed colors will get unlock
2. knob should not go outside the bound
3. I have to retrieve the color from the edge of the arrow so that I get the proper pixel value

Answer 1

Here is my suggestion to how to deal with this,

Create a list of images and the color values for each of those in a NSDictionary like,

NSDictionary *colors = @{[UIColor redColor]: [UIImage imageNamed:@"red"], [UIColor greenColor]: [UIImage imageNamed:@"green"], [UIColor yellowColor: [UIImage imageNamed:@"green"]]}

Then create the imageview and add the images to the view and add tap gesture recognizer to each of the imageViews;

UIView *parentView = self.parentView;
CGFloat knobHeight = 20;
CGFloat colorViewHeight = 20;
CGFloat colorViewWidht = 20;
int index = 0;
for(UIColor *color in colors){

 CGRect frame = CGRectMake(index * colorViewWidth, knobHeight, colorViewWidth, colorViewHeight);
 UIImageView *imageView = [[UIImageView alloc] initWithFrame: frame];
 imageView.image = colors[color];
 [parentView addSubView:imageView];
 UITapGestureRecognizer *tapGestureRecognizer = [UITapGestureRecognizer alloc] initWithTarget: self selector:@selector(tappedImage:)];
 imageView.userInteractionEnabled = YES;
 [imageView addGestureRecognizer: tapGestureRecognizer];

}

Initially add knob to the first imageView;

UIImageView *firstImageView = [[parentView subView] firstObject];
CGRect knobFrame = CGRectMake (CGRectGetMidX(firstImageView.frame) - knobWidth / 2, 0, knobWidth, knobHeight);
UIImageView *knobImageView = [[UIImageView alloc] initWithFrame:knobFrame];
[parentView addSubview: knobImageView];

Then, in the tap selector you could animate the knob change as;

- (void)tappedImage:(UITapGestureRecognizer*)tap{
  UIImageView *tappedImageView = tap.view;
  CGRect newKnobFrame = CGRectMake((CGRectGetMidX(tappedImageView.frame) - knobWidth / 2, 0 , knobWidth, knobHeight);
  [UIView animateWithDuration:2.0 animations:^{
    knobImageView.frame = newKnobFrame;
  }];
 }

You could also keep track of the color for which you want to lock selection. Then, do not enable the userInteraction for those images and not add the gesture recognizer. You could set alpha value to show that it is not possible to select it.

This code is directly typed, but it should give you the rough idea of how it could work.