CODEWITHSUNDEEP
ioscore-graphics
user2677746
user2677746

Reputation:

How to make a button or label above a CALayer in Xcode?

In my storyboard I added a button & a label. In my ViewController I programmatically defined a CALayer and added it as a sublayer to the ViewController's view. When I test the app the sublayer is above the button and the label but I want to make the sublayer below the button and the label.


here's the code

.h file

// The CALayer declaration
CALayer *graphic;

.m file

//The screen width and height
CGRect screenBound = [[UIScreen mainScreen] bounds];
CGSize screenSize = screenBound.size;
CGFloat screenWidth = screenSize.width;
CGFloat screenHeight = screenSize.height;

//The CALayer definition
graphic = [CALayer layer];
graphic.bounds = CGRectMake(0, 0, screenHeight, screenWidth);
graphic.position = CGPointMake(screenHeight/2, screenWidth/2);
graphic.backgroundColor = [UIColor blackColor].CGColor;
graphic.opacity = 0.1f;
[self.view.layer addSublayer:graphic];

How can I make the sublayer (graphic) appear below the button and label?


Thanks in advance

Upvotes: 3

Views: 5889

Answers (1)

LuisCien
LuisCien

Reputation: 6432

One thing you can do is to add your button and label programmatically to your layer.

EDIT

Ok, I figured out what the problem was. When you added this line: [graphic addSublayer:self.btn.layer]; your application was crashing because your button was already added to the view hierarchy because you were creating it using a Storyboard.

What I did was to declare a new label and button without adding it to the storyboard (see comment "A"). After that I instantiated them inside method viewDidLoad and then added them to the layer you created.

WARNING

This code I'm showing here will effectively display your label and button on top of the CALayer however keep in mind that CALayers are used for drawing and animation, not for user interaction. Unlike a UIView a CALayer doesn't inherit from UIResponder and for this reason it cannot receive the touches a UIView receives.

However, there's a workaround. Instead of using Target-Action mechanism you can use Gesture Recognizers to be able to detect touches and interaction from the user. In this example I added a simple UITapGestureRecognizer to illustrate how it's done. Every time you tap on the button a "Button Tapped" message will be displayed in the console.

// This is the *.m file
#import "ViewController.h"

@interface ViewController ()

// Comment A. Another label and button added to the class without adding them to the
// storyboard
@property (nonatomic, strong) UIButton *firstButton;
@property (nonatomic, strong) UILabel *mylabel;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.firstButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [self.firstButton setTitle:@"Just a Button" forState:UIControlStateNormal];
    self.firstButton.frame = CGRectMake(50, 50, 300, 40);
    UIGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(theAction:)];
    [self.firstButton addGestureRecognizer:tapGesture];

    self.mylabel = [[UILabel alloc] initWithFrame:CGRectMake(50, 120, 200, 40)];
    self.mylabel.text = @"Hello World";
    self.mylabel.backgroundColor = [UIColor cyanColor];

    //The screen width and height
    CGRect screenBound = [[UIScreen mainScreen] bounds];
    CGSize screenSize = screenBound.size;
    CGFloat screenWidth = screenSize.width;
    CGFloat screenHeight = screenSize.height;

    //The CALayer definition
    CALayer *graphic = nil;
    graphic = [CALayer layer];
    graphic.bounds = CGRectMake(0, 0, screenHeight, screenWidth);
    graphic.position = CGPointMake(screenHeight/2, screenWidth/2);
    graphic.backgroundColor = [UIColor whiteColor].CGColor;
    graphic.opacity = 1.0f;
    [graphic addSublayer:self.firstButton.layer];
    [graphic addSublayer:self.mylabel.layer];
    [self.view.layer addSublayer:graphic];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)theAction:(id)sender {

    NSLog(@"Button Tapped");
}
@end

Let me know if you have more questions.

Hope this helps!

Upvotes: 1

Related Questions