Question

I am loading a variable amount of objects (cards) into a UIScrollView. Each card is created programmatically from objects in an array. The idea is that the user would tap a card and it would flip over indicating that it was complete. When I load the objects (cards) into the UIScrollView only the last card will flip. Tapping any of the other cards flips that last card.

I suspect that I need to provide a pointer to the object (card) I want flipped but am unsure how to do that. I have tried assigning a tag to the button that was tapped but didn’t get far with that. How do I target a specific object in the UIScrollView to perform an action on it?

Here is the code I have so far:

// create a cardScrollView
    // if there are not cards for the schedule, display the no cards message.
    // if there are cards then create the scroller, add the cards, and then add to screen.
    if (cardCount == 0) {
        NSLog(@"There are no cards available");
        // place a label on screen that tells user there are no cards on the schedule. with animation.
        // *** TODO: this will eventually be a better graphical message. ***
        UILabel *noScheduleMsg = [[UILabel alloc] initWithFrame:CGRectMake(0, 10, 240, 50)];
        noScheduleMsg.backgroundColor = [UIColor clearColor];
        [noScheduleMsg setText:@"Opps! It doesn't look like there are picture cards on this schedule!"];
        [noScheduleMsg setLineBreakMode:UILineBreakModeCharacterWrap];
        noScheduleMsg.numberOfLines = 2;
        [noScheduleView addSubview:noScheduleMsg];

        // animate the view onto the screen
        [UIView animateWithDuration:.3 animations:^{
            noScheduleView.alpha = 1.0; 
        }];
    }
    else
    {
        NSLog(@"Display schedule cards");
        // check to see if there is a cardview first.
        if (!cardView) {

            // TODO: check for the last known completed card and show the following card in line.

            //create UIView that the scroller will go into.
            cardView = [[UIView alloc] initWithFrame:CGRectMake(0, 100, 320, 250)];
            //set cardView properties
            cardView.backgroundColor = [UIColor clearColor];
            //make sure I hide the cardview so that animation to full alpha is completed. Add to main view.
            cardView.alpha = 0.0;
            [self.view addSubview:cardView];

            //create the cardViewScroller. this is where all the cards will be placed.
            cardScroller = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 250)];
            cardScroller.backgroundColor = [UIColor clearColor];
            cardScroller.alwaysBounceVertical = NO;
            cardScroller.pagingEnabled = YES;
            cardScroller.showsVerticalScrollIndicator = NO;
            cardScroller.showsHorizontalScrollIndicator = NO;
            cardScroller.scrollEnabled = YES;    
            int cardscrollWidth = 120;
            cardScroller.contentSize = CGSizeMake(cardscrollWidth,80); 

            //iterate over the scheduleCards array and load each object into a view
            NSMutableArray *cards = [[NSMutableArray alloc] initWithArray:[selectedSchedule scheduleCards]];

            // this is to create the picture cards. itterate over each object and display in the cardScroller
            for (int i = 0; i < cardCount; i++) {

                // TODO: 
                // create the front of the card and put in a UIView object
                // create the back of the card and put in a UIView object.
                // Add a clear button to each isComplete to each card that is complete. if selected then show the backside of the card.
                // Add the flip logic
                // tie reset button to clear all isComplete values on the cards.

                // pull the right cards from the array at each index
                Cards *theCard = [cards objectAtIndex:i];

                UIButton *frontBtn = [[UIButton alloc] init];
                [frontBtn setFrame:CGRectMake(35, 0, 250, 250)];
                frontBtn.backgroundColor = [UIColor clearColor];
                [frontBtn setTag:i];
                [frontBtn addTarget:self action:@selector(changeTaskStatus:) forControlEvents:UIControlEventTouchUpInside];

                //set card border
                UIImageView *pcImageViewBg = [[UIImageView alloc] initWithFrame:CGRectMake(35, 0, 250, 250)];
                UIImage *bgimg = [UIImage imageNamed:@"bigCardbg@2x"];
                [pcImageViewBg setImage:bgimg];

                // set card image
                UIImageView *pcImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 230, 230)];
                NSString *ik = [theCard imageKey];
                if (ik) {
                    //get the image key from the store
                    UIImage *imageToDisplay = [[ScheduleImageStore sharedStore] imageForKey:ik];
                    // use that image to display in the view
                    [pcImageView setImage:imageToDisplay];
                } else {
                    //set default image.
                    [pcImageView setImage:[UIImage imageNamed:@"card"]];
                }

                // this is the front of the card.
                frontCard = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 255, 255)];

                // back of the card (done state)
                //backCard = [[UIView alloc] initWithFrame:CGRectMake(35, 0, 255, 255)];
                //[backCard addSubview:frontBtn];
                //backCard.backgroundColor = [UIColor redColor];

                // UIview for the flip (container)                
                CGRect frame;
                frame.origin.x = cardScroller.frame.size.width * i - 1;
                frame.origin.y = 0;
                frame.size = cardScroller.frame.size;                
                theCardFlipView = [[UIView alloc] initWithFrame:frame];
                //theCardFlipView.backgroundColor = [UIColor greenColor];

                // add the card views to the interface.                
                [pcImageViewBg addSubview:pcImageView];
                [frontCard addSubview:pcImageViewBg];
                [frontCard addSubview:frontBtn];
                // this is the container holding the frontcard and backcard
                // I need to target the appropriate 'theCardFlipView'
                [theCardFlipView addSubview:frontCard];
                [cardScroller addSubview:theCardFlipView];

                NSLog(@"%i",frontBtn.tag);
            }

            // set the contentsize of the scroller dynamically. it's based on how many cards there are in the schedule.
            cardScroller.contentSize = CGSizeMake(cardScroller.frame.size.width * cardCount, cardScroller.frame.size.height);

            //add scroller to card view.
            [cardView addSubview:cardScroller];

            // animate the cardview into view from transparent to opaque.
            [UIView animateWithDuration:.3 animations:^{ 
                cardView.alpha = 1.0;
            } completion: ^ (BOOL finished) {
                // if I want something to happen after loading the cardView, I could put it here.
            }];

        }

Here is my method based on the button press:

-(void)changeTaskStatus:(UIButton *)sender {

    NSLog(@"button tag: %@",[sender tag]);
    if(toggleIsOn){
        //NSLog(@"incomplete card");
        [UIView transitionWithView:theCardFlipView
                          duration:0.8
                           options:UIViewAnimationOptionTransitionFlipFromRight | UIViewAnimationOptionCurveEaseInOut
                        animations:^{
                            [[[theCardFlipView subviews] objectAtIndex:0] removeFromSuperview],
                            [theCardFlipView addSubview:frontCard];
                        }
                        completion:^(BOOL finished){
                            NSLog(@"card complete");
                        }];       
    }
    else {
        //NSLog(@"complete card");
        [UIView transitionWithView:theCardFlipView
                          duration:0.8
                           options:UIViewAnimationOptionTransitionFlipFromLeft | UIViewAnimationOptionCurveEaseInOut
                        animations:^{
                            [[[theCardFlipView subviews] objectAtIndex:0] removeFromSuperview],
                            [theCardFlipView addSubview:frontCard];
                        }
                        completion:^(BOOL finished){
                            //NSLog(@"front card tag: %i",frontBtn.tag);
                            NSLog(@"card not complete");
                        }];       
    }
    toggleIsOn = !toggleIsOn;

}

Any suggestions? I have a feeling that this is very kludgy code as well so any suggestions would be welcome.

Answer 1

In the loop where you are creating your card views, add this at the bottom:

theCardFlipView.tag = i + 100; // since you're already using i for those button tags

100 is an arbitrary constant which will be okay as long as nothing else is using those tags (and as long as you don’t have over 99 cards).

Then, when you are handling your button press, put this at the very beginning.

thecardFlipView = [cardScrollerView viewWithTag:sender.tag + 100];

The code you have now gives a tag to the button, but not the actual view you want to flip. You are using theCardFlipView without ever changing it to be what you want to flip (it just stays assigned to the last card in your loop).

All of that said, you can actually do this without even making the button, you just need to handle tap gestures on your scroll view and find which card is at the tapped point.

edit:

It also looks like the toggle you are using(toggleIsOn) is not card-specific so you’re going to end up with incorrect flipping behavior. You should keep track of which cards are flipped and which ones aren’t, and check against that. If your cards were instances of a UIView subclass, you could add a flag right in there, otherwise you may want to maintain another array that contains that information.