Multiple Images when Button pressed..?? Xcode

Discussion in 'iOS Programming' started by Phloxx1, Feb 21, 2014.

  1. Phloxx1 macrumors newbie

    Joined:
    Jan 28, 2014
    #1
    so here's what i'm trying to do
    [​IMG]

    I'm trying to show different UIimages when a certain button is pressed.
    for example, when one the blue buttons is pressed, then i would like it to show certain images in the piano keyboard. I've already created individual Uiimage placeholders.

    I know this is done in code. but i have no idea what method to use..

    somebody help please?
    Thanks:)
     
  2. xStep, Feb 21, 2014
    Last edited: Feb 22, 2014

    xStep macrumors 68000

    Joined:
    Jan 28, 2003
    Location:
    Less lost in L.A.
    #2
    What have you tried so far? Have you got your keyboard layed out and individual images for it? If so, do you have images for unselected and selected states? EDIT: The company services blocked your image.

    Of the top of my head, each key for the piano keyboard would have two images; one for when the key isn't selected and another one for when it is selected. I'd associate an id for each key, may use the TAG of the UIView for that or a special id in a subclass that I'd created for this.

    For the blue button, I'd have an array that is associated with the keys to select and loop through that to set those keys as selected.
     
  3. xStep macrumors 68000

    Joined:
    Jan 28, 2003
    Location:
    Less lost in L.A.
    #3
    Here is one idea…

    Create a scrap project and place the following into the default view controller to see the effect.

    Here I'm associating a button with keys to be selected by using a dictionary where the dictionary key equals the button title and the value for the key is an array of the keys I want to alter.


    Code:
    - (void)viewDidLoad
    {
        [super viewDidLoad];
    	// Do any additional setup after loading the view, typically from a nib.
    
        // Setup up our key images.
        UIColor * whiteColorUp = [UIColor colorWithRed: 1.0 green: 1.0 blue: 1.0 alpha:1.0];
        UIColor * whiteColorDown = [UIColor colorWithRed: 0.8 green: 0.8 blue: 0.8 alpha:1.0];
    
        UIColor * blackColorUp = [UIColor colorWithRed: 0.0 green: 0.0 blue: 0.0 alpha:1.0];
        UIColor * blackColorDown = [UIColor colorWithRed: 0.6 green: 0.6 blue: 0.6 alpha:1.0];
    
        CGSize whiteKeySize = CGSizeMake(44.0, 100.0);
        UIImage * whiteKeyCUp = [ViewController imageColored: whiteColorUp size: whiteKeySize];
        UIImage * whiteKeyCDown = [ViewController imageColored: whiteColorDown size: whiteKeySize];
    
        CGSize blackKeySize = CGSizeMake(44.0, 50.0);
        UIImage * blackKeyCUp = [ViewController imageColored: blackColorUp size: blackKeySize];
        UIImage * blackKeyCDown = [ViewController imageColored: blackColorDown size: blackKeySize];
    
        // Setup individual keys with pressed and unpressed images.
        UIImageView * whiteKeyC = [[UIImageView alloc] initWithImage: whiteKeyCUp highlightedImage: whiteKeyCDown];
        UIImageView * whiteKeyF = [[UIImageView alloc] initWithImage: whiteKeyCUp highlightedImage: whiteKeyCDown];
        UIImageView * blackKeyC = [[UIImageView alloc] initWithImage: blackKeyCUp highlightedImage: blackKeyCDown];
    
        // White key 1. Will associate with the blue button.
        CGRect frame = whiteKeyC.frame;
        frame.origin.x = 50.0; frame.origin.y = 100.0;
        whiteKeyC.frame = frame;
        [self.view addSubview: whiteKeyC];
    
        // White key 2. Will NOT associate with the blue button.
        frame = whiteKeyF.frame;
        frame.origin.x = whiteKeyC.frame.origin.x + whiteKeyC.frame.size.width + 1.0; frame.origin.y = 100.0;
        whiteKeyF.frame = frame;
        [self.view addSubview: whiteKeyF];
    
        // Black key that we will associate with the blue button.
        frame = blackKeyC.frame;
        frame.origin.x = 50.0 + 25.0; frame.origin.y = 100.0;
        blackKeyC.frame = frame;
        [self.view addSubview: blackKeyC];
        
        // Out blue button.
        buttonC = [UIButton buttonWithType: UIButtonTypeCustom];
        buttonC.frame = CGRectMake(50.0, 65.0, 75.0, 33.0);
        [buttonC setTitle: @"C" forState: UIControlStateNormal];
        buttonC.layer.borderColor = [[UIColor blueColor] CGColor];
        buttonC.layer.borderWidth = 1.0;
        buttonC.layer.cornerRadius = 5.0;
        // Set the action for the blue button.
        [buttonC addTarget: self action: @selector(toggleKeys:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview: buttonC];
        
        // Piano keys I want to associate with a button.
        NSArray * cKeys = @[whiteKeyC,blackKeyC];
        
        // Using the button title as a key a dictionary key to associate keys to it.
        buttonsToKeysDict = [[NSDictionary alloc] initWithObjectsAndKeys:cKeys, buttonC.titleLabel.text, nil];
    }
    
    // This is simplistic code. You'd have to alter other piano keys to reset them when selecting a new set.
    - (void) toggleKeys: (id) sender
    {
        NSString * buttonTitleKey = [(UIButton*)sender titleLabel].text;
        NSArray * theKeys = [buttonsToKeysDict valueForKey: buttonTitleKey];
        for (UIImageView * iv in theKeys) {
            iv.highlighted = (iv.highlighted == YES) ? NO : YES;
        }
    }
    
    // Hack to create some UIImages for testing.
    + (UIImage *)imageColored:(UIColor *)color size:(CGSize)size {
        if (CGSizeEqualToSize(size, CGSizeZero)) return nil;
        if (!color) return nil;
        
        UIImage *newImage = nil;
        CGRect rect = CGRectMake(0.0, 0.0, size.width, size.height);
        
        UIGraphicsBeginImageContextWithOptions(size, YES, 0.0);
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetFillColorWithColor(context, color.CGColor);
        CGContextFillRect(context, rect);
        
        newImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        
        return newImage;
    }
    
     

Share This Page