iOS: Constraints on unselected view in iCarousel

Question

I am using iCarousel to display instances of a custom view I have created in IB. When the carousel loads, the first view in the carousel displays correctly, like this:

However, the other indexes seem to be ignoring my constraints, like this:

Once I click on this view, the layout corrects itself. Also notice that the first index now has a screwed up layout:

Any idea how to correct this? My code relating to the carousel:

- (NSUInteger)numberOfItemsInCarousel:(iCarousel *)carousel
{
    //return the total number of items in the carousel
    NSLog(@"size=%d",audio.count);
    return audio.count;
}

- (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSUInteger)index reusingView:(UIView *)view
{
    NSLog(@"get view for index %d",index);
    Audio *aud = [audio objectAtIndex:index];

    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenWidth = screenRect.size.width;
    CGFloat screenHeight = screenRect.size.height;

    AudioView *aView;

    float height = screenWidth*.5;
    float width = height * (16.0/9.0);

    //create new view if no view is available for recycling
    if (view == nil)
    {


        aView = [[[NSBundle mainBundle] loadNibNamed:@"AudioView" owner:self options:nil] objectAtIndex:0];
        [aView setFrame:CGRectMake(0, 0, width, height)];


    }else{
        aView=(AudioView *)view;
    }
    aView.layer.cornerRadius=8;
    NSLog(@"%f",aView.frame.size.height);
    NSLog(@"%f",aView.frame.size.width);


    aView.backgroundColor=[UIColor alizarinColor];
    aView.textLabel.text=aud.text;
    aView.titleLabel.text=aud.name;

    if (rowCurrentlyPlaying==index&&isPlaying) {
        aView.imageView.image = [UIImage imageNamed:@"pause.png"];
    }else{
        aView.imageView.image = [UIImage imageNamed:@"play.png"];
    }



    return aView;
}

- (CGFloat)carousel:(iCarousel *)carousel valueForOption:(iCarouselOption)option withDefault:(CGFloat)value
{
    if (option == iCarouselOptionSpacing)
    {
        return value * 1.1f;
    }
    return value;
}

- (void)carousel:(iCarousel *)carousel didSelectItemAtIndex:(NSInteger)index{
    NSLog(@"Clicked");
    if(index==self.carousel.currentItemIndex){
        Audio *aud = [audio objectAtIndex:index];
        NSURL *audUrl = [NSURL URLWithString:aud.audioUrl];

        if (rowCurrentlyPlaying==index) {
            if (isPlaying) {
                [anAudioStreamer pause];
                isPlaying=NO;
            }else{
                [anAudioStreamer play];
                isPlaying=YES;
            }
        }else{
            rowCurrentlyPlaying=index;
            isPlaying=YES;


            aPlayerItem = [[AVPlayerItem alloc] initWithURL:audUrl];
            anAudioStreamer = [[AVPlayer alloc] initWithPlayerItem:aPlayerItem];
            [anAudioStreamer play];
        }


        [carousel reloadData];

    }

}

EDIT:I tried this on iPad as well, and I thought these screenshots might help shed some light (please ignore the hilarious font sizes). It looks like it's just not stretching to the full width when not selected.

Correct layout:

Incorrect layout:

Answer 1

i haven't looked at iCarousel in a while, but this is from the readMe file in whatever version I have here

iCarousel supports the following built-in display types:

- iCarouselTypeLinear
- iCarouselTypeRotary
- iCarouselTypeInvertedRotary
- iCarouselTypeCylinder
- iCarouselTypeInvertedCylinder
- iCarouselTypeWheel
- iCarouselTypeInvertedWheel
- iCarouselTypeCoverFlow
- iCarouselTypeCoverFlow2
- iCarouselTypeTimeMachine
- iCarouselTypeInvertedTimeMachine

You can also implement your own bespoke carousel styles using `iCarouselTypeCustom` and the `carousel:itemTransformForOffset:baseTransform:` delegate method.

NOTE: The difference between `iCarouselTypeCoverFlow` and `iCarouselTypeCoverFlow2` types is quite subtle, however the logic for `iCarouselTypeCoverFlow2` is substantially more complex. If you flick the carousel they are basically identical, but if you drag the carousel slowly with your finger the difference should be apparent. `iCarouselTypeCoverFlow2` is designed to simulate the standard Apple CoverFlow effect as closely as possible and may change subtly in future in the interests of that goal.

Im not sure if you understand that the iCourousel is applying transforms to those views that are not the current selection, this is deliberate. Its having a stab at emulating Apple's cover flow api, (which is unavailable to us)..

ok so your carousel object has a property of type iCarouselType called type, from the enum above, best bet is trying each of these to find the one which suits you.

Answer 2

I have been scouring all day long for an answer to this question - the same thing was happening to me. Setting the frame of the Custom UIView does not work.

The solution is a bit strange:

1. Go to the xib file for the Custom UIView. I'll also assume that you have corresponding subclass (.h and .m files) for the Custom UIVIew
2. Add a subview that covers the whole view. I'll call this the background view.
3. Add the text views, etc as subviews of the background view and set the constraints relative to the background view.
4. For the background view, add the following constraints: Top Space to Superview, Leading Space to Superview, Width Equals: , Height Equals:
5. Create two outlets, one from the width constraint and one for the height constraint from step 4. These outlets should be in the .h file of the Custom UIView.

6. In the viewForItemAtIndex method you have above, continue to allocate and initialize the Custom View using the loadNibNamed method. However, after that, set the width and height constraint constants based on the bounds of the carousel (or whatever width and height you desire). For example,

   CustomView *customView = (CustomView *) view;
   customView.widthConstraint.constant = carousel.bounds.size.width;
   customView.heightConstraint.constant = carousel.bounds.size.height;
   

Answer 3

I have figure out a thing that looks different than the usual implementation of iCarousel.

In method - (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSUInteger)index reusingView:(UIView *)view

I guess you need to use : objectAtIndex:index]; instead of objectAtIndex:0];

if (view == nil)
{
    aView = [[[NSBundle mainBundle] loadNibNamed:@"AudioView" owner:self options:nil] objectAtIndex:0];
    [aView setFrame:CGRectMake(0, 0, width, height)];
}

I have a simple piece of code that I have used in my live app as :

- (UIView *)carousel:(iCarousel *)_carousel viewForItemAtIndex:(NSUInteger)index reusingView:(UIView *)view
{
if (view == nil)
{
    view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
    view.contentMode = UIViewContentModeCenter;
    [view addSubview:[items objectAtIndex:index]];
}
else
{
    view = [items objectAtIndex:index];
}

view = [items objectAtIndex:index];

return view;
}

Hope that helps.

Answer 4

when you crate Audio view in "viewForItemAtIndex", you just set frame of view

[aView setFrame:CGRectMake(0, 0, width, height)];

I think you have to set frame of titlelabel and textlabel of aView, to get full width text.

For Second issue , when you click on view, that view display properly but previous view's text get cut.

I think you have are reloading all carousel view on click ,

[carousel reloadData];

instead of that you have to reload only that view on which you are clicked. for that you can use

• (void)reloadItemAtIndex:(NSInteger)index animated:(BOOL)animated;

May this line solve your issue.

Enjoy....

Answer 5

For me helped next:

Move function with iCarousel configuring (dataSource and etc.) to viewDidAppearfunction. Otherwise, my frames were not correct.

Then just write something like this:

currentView?.frame.size.width  = carouselView.bounds.size.width
currentView?.frame.size.height = carouselView.bounds.size.height

Hope it helps to someone