Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Phloxx1

macrumors newbie
Original poster
Jan 28, 2014
6
0
so here's what i'm trying to do


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:)
 

xStep

macrumors 68020
Jan 28, 2003
2,031
143
Less lost in L.A.
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.
 
Last edited:

xStep

macrumors 68020
Jan 28, 2003
2,031
143
Less lost in L.A.
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;
}
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.