Alternative for UIPicker

Question

Is there any other method for a SLOT-MACHINE app? This because a UIPICKER method doesn't have a slow animation effect.

Answer 1

This could be done using CALayer animation.

Your main slotMachineView layer's class will need to be CATransformLayer to allow 3D transforms of the sublayers.

Let's say you have 10 square images that represent the symbols on the reel. For each of your images, create a CALayer who's contents property is one of your images. Then to each layer you'll need to apply 2 transforms:

• First you'll need to rotate each layer (2 * PI) / 10 about its X axis
• Then translate some distance (which you'll need to calculate) along the Z axis.

Now add these layers to your view's layer. You should now see a get "cylinder" of images around the X axis.

To rotate the cylinder you'll need to adjust the first transform - either with a CAAnimation or by using a timer and adjusting the X axis rotation by an offset she the timer fires.

I'll leave it to you to figure out the full implementation details - but here's some code to load and create an initial "reel"

    int imageCount = 16;

    for (int i = 0; i < imageCount; i++) {
        // Load image from the bundle

        NSString * fileName = [NSString stringWithFormat: @"Image-%d", i];
        NSString * filePath = [[NSBundle mainBundle] pathForResource: fileName ofType: @"jpeg"];

        UIImage * image = [UIImage imageWithContentsOfFile: filePath];

        // Create a layer with the image as content - My image size was 60x60

        CALayer * imageLayer = [CALayer layer];
        imageLayer.bounds = (CGRect){CGPointZero, {60.0, 60.0}};
        imageLayer.contents = (id)image.CGImage;
        imageLayer.position = (CGPoint){CGRectGetMidX(self.view.bounds), CGRectGetMidY(self.view.bounds)};

        // Set the initial image transform - I've hardcoded the translate along the
        // z-axis to 150, but this will vary depending on the number of images
        // and their size - you'll need to do some maths to work it out... sines or 
        // cosines or somesuch
        CGFloat angle = (2.0 * M_PI) / imageCount * i;
        CATransform3D transform = CATransform3DMakeRotation(angle, 1.0, 0.0, 0.0);
        transform = CATransform3DTranslate(transform, 0.0, 0.0, 150.0);  
        imageLayer.transform = transform;

        [self.layers addObject: imageLayer];

        [self.view.layer addSublayer: imageLayer];
    }
}

To rotate it, all you need to do is change the rotation part of the transform. For extra credit, you could add an increasing shadow to the layers as they move away from the centre.

Answer 2

You could use UIImageView for each digit/symbol, and animate the movement of the images that yo display. Using UIPicker there would be limited to letters and digits; with UIImageView you could add other typical slot-machine visuals, such as cherries, etc.

Answer 3

Are we doing your homework?

Use vertical UIScrollViews side by side, have paging enabled, UIImageViews for the views.

It will look flat by default - but it would be functionally equivalent.

You'd need a bit of Core Animation / Core Graphics to make it look more like the UIPickerView.