Custom uipicker- dealing with image size

Question

enter image description here

-(UIView *)pickerView:(UIPickerView *)pickerView
           viewForRow:(NSInteger)row
         forComponent:(NSInteger)component reusingView:(UIView *)view
{
    //NSLog(@"%d",component);
   // NSLog(@"tag: %d",pickerView.tag);

    if([pickerView isEqual:picker1])

    {


        NSString *arrayName = [[NSString alloc] initWithFormat:@"column%d",component+1];
        NSArray *array1 = [self valueForKey:arrayName];
        UIImageView *imageView = [array1 objectAtIndex:row];
        if ([pickerView selectedRowInComponent:component] == row) {
            imageView.frame = CGRectMake(60,60,40,80);//set bigger frame
        } else {
            //imageView.frame = CGRectMake(30,30,20,60);//set normal frame
        }
        return imageView;
        }

}

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component
{
    return 80.0;

}

I am implementing custom uipicker to achieve the first following image. I have three images to be chosen with uipicker. However, all of them are shown on the screen in the second image below. I want only in middle shown occupy bigger size rather than other images as shown image.

enter image description here

Please post any code and what is the exact issue when you are setting the frame for those images? — iDev, Nov 27 '12 at 00:01
What is happening when you set frame for `barView` as `barView.frame = CGRectMake(...` ? You need to set a bigger frame for only middle one. — iDev, Nov 27 '12 at 00:04
`UIImageView *barView = [[UIImageView alloc] initWithImage:bar];` `barView.frame = CGRectMake(.. //set frame here` — iDev, Nov 27 '12 at 00:07
and also how to disable/hide blue rectangle as it comes default? — , Nov 27 '12 at 00:12
Check my answer. You have to set `showsSelectionIndicator` property. — iDev, Nov 27 '12 at 00:18

iDev · Accepted Answer · 2012-11-27T01:49:51.593

1

Update: As per your comment, you need to make the middle row to be bigger one.

Modify your viewForRow method as,

- (UIView *)pickerView:(UIPickerView *)pickerView
           viewForRow:(NSInteger)row
         forComponent:(NSInteger)component reusingView:(UIView *)view
{
    //NSLog(@"%d",component);
    NSLog(@"tag: %d",pickerView.tag);

    if(pickerView.tag==1)
    {   NSString *arrayName = [[NSString alloc] initWithFormat:@"column%d",component+1];
        NSArray *array1 = [self valueForKey:arrayName];
        UIImageView *imageView = [array1 objectAtIndex:row];
        if ([pickerView selectedRowInComponent:component] == row) {
           imageView.frame = CGRectMake(..);//set bigger frame
        } else {
           imageView.frame = CGRectMake(..);//set normal frame
        }
        return imageView;
    }

Implement pickerView:rowHeightForComponent: method and set suitable height for rows.

    - (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component {

In order to hide the Selection Indicator, set showsSelectionIndicator property of UIPickerView. For more details check apple doc.

Based on your comment,

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
      [pickerView reloadComponent:component];
}

edited Nov 27 '12 at 01:49

answered Nov 27 '12 at 00:12

iDev

23,310
7
60
85

Thanks for providing your solution with code, appreciated. However, once I implemented it does not give me exact solution that I want. What I want is chosen part would be more dominant than others. Please see my updated screenshot above. – Nov 27 '12 at 00:20
also once you make imagesize bigger, than two images are overlapping. – Nov 27 '12 at 00:22
1

I think, I misunderstood your question. By middle, I assumed it as middle pickerview. In that case you need to set the frame in pickerview delegate method. – iDev Nov 27 '12 at 00:23
How should I do? I would be very appreciated if you could give me in detail answer, please? – Nov 27 '12 at 00:25
Thanks a lot for giving such a fabolus answer with code. I am very impressed. I have just attached latest screenshot above, once another image comes to middle, it does not get bigger size. Could u please guide me? – Nov 27 '12 at 01:05
@user1724168, Is the above method getting called when scrolling occurs? – iDev Nov 27 '12 at 01:14
@user1724168, is going inside this if condition `if ([pickerView selectedRowInComponent:component] == row) {`? – iDev Nov 27 '12 at 01:21
Once it initalize images in uipicker, it goes into that code. However, once I scroll picker, it does not go into that code! – Nov 27 '12 at 01:28
@user1724168, So is it calling the delegate method while scrolling? If yes, can you try printing `[pickerView selectedRowInComponent:component]` in an NSLog and check what is the value of that while scrolling in that delegate method? Is it same as row or not? – iDev Nov 27 '12 at 01:35
no it is not calling that delegate method while I am scrolling. – Nov 27 '12 at 01:40
1

@user1724168, In that case try implementing `- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component` method and see if that is getting called while scrolling. If yes, do this in that `[pickerView reloadComponent:component];` – iDev Nov 27 '12 at 01:45
could you give me a small portion of code please to see the clear picture? sorry for bothering you. – Nov 27 '12 at 01:48
1

@user1724168, Check the answer. Is it calling the above `didSelectRow` method while scrolling? If yes, check if the above fixes your issue. – iDev Nov 27 '12 at 01:50
cool. now scrolling image getting bigger. However, once I scroll back, it is not getting back to normal size! – Nov 27 '12 at 01:54
1

@user1724168, Is it calling the else part `else { imageView.frame = CGRectMake(..);//set normal frame }` for the other rows? – iDev Nov 27 '12 at 01:56
My fault, sorry. It works flawlessly :-) thanks a lot. owe u a starbucks coffee but dont know how to deliver !! :-) – Nov 27 '12 at 02:03
I have one bounty question, if you know any idea, you're welcome!http://stackoverflow.com/questions/13364758/flickering-mapoverlay-after-zoom-out-and-zoom-in-ios – Nov 27 '12 at 02:16
I will check it later. Looks like Alex has already answered it. What was the issue with his code? – iDev Nov 27 '12 at 02:22
it flickers. I have tested with iphone 4s it did not flick, once I tested with iphone 5 it flicker because of processor speed. I dont know how to prevent this flickering! – Nov 27 '12 at 02:24

score 0 · Answer 2 · answered Nov 27 '12 at 02:11

whomever needs to help! Here is the solution. All Credits go to @ACB!!!

-(UIView *)pickerView:(UIPickerView *)pickerView
               viewForRow:(NSInteger)row
             forComponent:(NSInteger)component reusingView:(UIView *)view
    {
        //NSLog(@"%d",component);
       // NSLog(@"tag: %d",pickerView.tag);

        if(pickerView.tag==1)

        {


            NSString *arrayName = [[NSString alloc] initWithFormat:@"column%d",component+1];
            NSArray *array1 = [self valueForKey:arrayName];
            UIImageView *imageView = [array1 objectAtIndex:row];
            if ([pickerView selectedRowInComponent:component] == row) {
                imageView.frame = CGRectMake(60,60,40,80);//set bigger frame
            } else {
                imageView.frame = CGRectMake(30,30,20,60);//set normal frame
            }
            return imageView;

            //NSString *arrayName = [[NSString alloc] initWithFormat:@"column%d",component+1];
            //NSArray *array1 = [self valueForKey:arrayName];
            //return [array1 objectAtIndex:row];
        }
        else if([pickerView isEqual:picker2])
        {
            NSString *arrayName = [[NSString alloc] initWithFormat:@"column%d",component+5];
            NSArray *array1 = [self valueForKey:arrayName];
            UIImageView *imageView = [array1 objectAtIndex:row];
            if ([pickerView selectedRowInComponent:component] == row) {
                imageView.frame = CGRectMake(60,60,40,80);//set bigger frame
            } else {
                imageView.frame = CGRectMake(30,30,20,60);//set normal frame
            }
            return imageView;


            /* NSString *arrayName = [[NSString alloc] initWithFormat:@"column%d",component+5];
            NSArray *array2 = [self valueForKey:arrayName];
            return [array2 objectAtIndex:row];*/
        }
        else
        {
            NSString *arrayName = [[NSString alloc] initWithFormat:@"column%d",component+9];
            NSArray *array1 = [self valueForKey:arrayName];
            UIImageView *imageView = [array1 objectAtIndex:row];
            if ([pickerView selectedRowInComponent:component] == row) {
                imageView.frame = CGRectMake(60,60,40,80);//set bigger frame
            } else {
                imageView.frame = CGRectMake(30,30,20,60);//set normal frame
            }
            return imageView;



           /* NSString *arrayName = [[NSString alloc] initWithFormat:@"column%d",component+9];
            NSArray *array3 = [self valueForKey:arrayName];
            return [array3 objectAtIndex:row];*/
        }

    }

    - (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component
    {
        return 120.0;

    }

    - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
        [pickerView reloadComponent:component];
    }

Custom uipicker- dealing with image size

2 Answers2