Custom Play Pause Button Iphone

Question

Heya,

I'd like to ask what is the best way to achieve the following coding with cocoa for IPhone.

As a learning exercise I'd like to make a very simple mp3 player. The part I'm most interested in at the moment is the custom visual components for this player.

In particular how would I make a custom play pause button with mouseover and mousedown states?

In addition I would like to have a "drawer" that opens and closes depending on the play/pause button is showing its play or pause state.

When play is hit the buttons icon changes to a pause icon and the drawer slides open. When pause is hit the pause icon changes to a play icon and the drawer closes.

SHould I be looking at quartz for this?

Answer 1

No need to use Quartz.

Start with UIButton. You can assign just one image to a button (and it will handle highlighting it on touch) or assign a different image for each button state if you want to customize how it looks when highlighted (setImage:forState:). To achieve the toggle effect between play and pause, you should replace the button's images whenever it is tapped (in your action for UIControlEventTouchUpInside).

For the drawer animation, create a UIView that will serve as the drawer and add it to your main view. Adjust its frame so that it is placed offscreen. Then, when you want to animate it onto the screen, use a simple animation block:

[UIView beginAnimations:nil context:nil];
drawerView.center = CGPointMake(...); // set coordinate to the end position
[UIView commitAnimations];

Try to read up on all this in the documentation. Then ask more specific questions if you still have problems.

Answer 2

Hi Ole,

I've taken on your suggestions and have visited the dev reference center. Changing the state of the play pause pause button has been a breeze.

However adding my panel subviews to my UIVIEWController and animating is proving very difficult for me (objective -c novice).

First of all when I try to make my panel views I get warnings saying that the panel UIView may not respond to initWithFrame. (initwithframe is a function of UIView ?)

Secondly I can't add an image to my panel UIView. I get warning saying

warning: passing argument 1 of 'addSubview:' from distinct Objective-C type

.

Finally when trying to apply animation to my panel I get errors saying

UIView' may not respond to '-commitAnimations' and any other animation related method I try to add.

Can you help? I think mainly I don't understand why I'm getting these "may not respond to method" warnings seeing as I'm calling the method on the correct type (or so I think)

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];

    // SET UP THE PLAY PAUSE BUTTON
    playPause = [UIButton buttonWithType:UIButtonTypeCustom];
    playPause.frame = CGRectMake(-20,280, 100,100);
    [playPause setImage:[UIImage imageNamed:@"play.png"] forState:UIControlStateNormal];
    [playPause addTarget:self action:@selector(buttonPushed:) 
        forControlEvents:UIControlEventTouchUpInside];
    playing=NO;

    //SET UP THE AUDIO PLAYER
    NSLog(@"Set up theAudio");
    NSURL *url = [NSURL fileURLWithPath:[NSString stringWithFormat:@"%@/DumpTheChump.mp3", [[NSBundle mainBundle] resourcePath]]];  
    NSError *error;
    audioPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:url error:&error];
    audioPlayer.numberOfLoops = -1;

    //SETUP THE BOTTOM part of the PANEL
    UIImage *panelBottomImage=[UIImage imageNamed:@"panel_bottom.png"];
    panelBottom=[UIView initWithFrame:(CGRectMake(-20, 280, 285, 128))];
    [panelBottom addSubview:panelBottomImage];

    //SETUP THE TOP PART OF THE PANEL. (THE ONE THAT SHOULD SLIDE UP AND DOWN)

    UIImage *panelTopImage=[UIImage imageNamed:@"panel_top.png"];
    panelTop=[UIView initWithFrame:(CGRectMake(-20, 280, 285, 128))];
    [panelTop addSubview:panelTopImage];


    [self.view addSubview:panelBottom];
    [self.view addSubview:panelTop];
    [self.view addSubview:playPause];

//  285*128

}

- (void) buttonPushed:(id)sender
{
    NSLog(@"It works!");

    switch (playing) {
        case NO:
            playing=YES;
            [audioPlayer play];
            [playPause setImage:[UIImage imageNamed:@"pause.png"] forState:UIControlStateNormal];
            [panelTop beginAnimations:nil context:nil];
            [panelTop setAnimationDuration:2];
            [panelTop setAnimationDelegate:self];
            //UIView setAnimationDidStopSelector:@selector(onAnimationC omplete:finished:context;

            // set the position where button will move to
            panelTop.frame = CGRectMake(-20, 100, 285, 128);    

            [panelTop commitAnimations];
            break;
        case YES:
            playing=NO;
            [audioPlayer pause];
              [playPause setImage:[UIImage imageNamed:@"play.png"] forState:UIControlStateNormal];
            [playPause setImage:[UIImage imageNamed:@"pause.png"] forState:UIControlStateNormal];
            [panelTop beginAnimations:nil context:nil];
            [panelTop setAnimationDuration:2];
            [panelTop setAnimationDelegate:self];
            //UIView setAnimationDidStopSelector:@selector(onAnimationC omplete:finished:context;

            // set the position where button will move to
            panelTop.frame = CGRectMake(-20, 280, 285, 128);    

            [panelTop commitAnimations];

            break;
        default:
            break;
    }
}