CODEWITHSUNDEEP
iosopengl-esuibuttoncore-graphicstextures
János
János

Reputation: 35060

How can I draw textured button in iOS?

I would like to draw textured button in iOS app. I would not use Photoshop rather CoreGraphics because I want a general solution that works with buttons that has different size. What is the basic principle of it? What technology do I need?

My first step was to subclass a UIButton, but how can I add i.e. bevel effect to it?

Upvotes: 0

Views: 674

Answers (1)

ilhnctn
ilhnctn

Reputation: 2210

The best approach will be subclassing you button class(your new class must inherit from UIButton). by doing this you can give some customized details too to your button.. Below is a sample ..

//interface of custom button class
 @interface myButton : UIButton
    {
        int orderNo;

        CAGradientLayer *gradientLayer;
        CALayer *wrapperLayer;
        CGColorRef _borderColor;

    }
    @property (assign) int orderNo;
    @property (nonatomic) CGColorRef _borderColor;
    @property (nonatomic, retain) CALayer *wrapperLayer;
    @property (nonatomic, retain) CAGradientLayer *gradientLayer;

    - (void)setBorderColor:(CGColorRef)color;
    - (void)setCornerRadius:(float)radius;

The implementation..

#import "Button.h"

@implementation Button
@synthesize orderNo,wrapperLayer,_borderColor,gradientLayer;

- (id)initWithFrame:(CGRect)frame
{if ((self = [super initWithFrame:frame])) {
    CGFloat radius = self.bounds.size.width / 2;
    CGFloat borderWidth = self.bounds.size.width / 10;

    self.layer.backgroundColor = [[UIColor blackColor] CGColor];
    self.layer.borderColor = [[UIColor whiteColor] CGColor];
    self.layer.borderWidth = borderWidth;
    self.layer.cornerRadius = radius;

    if ([self.layer respondsToSelector:@selector(setShadowOffset:)])
        self.layer.shadowOffset = CGSizeMake(0.25, 0.25);

    if ([self.layer respondsToSelector:@selector(setShadowColor:)])
        self.layer.shadowColor = [[UIColor blackColor] CGColor];

    if ([self.layer respondsToSelector:@selector(setShadowRadius:)])
        self.layer.shadowRadius = borderWidth;

    if ([self.layer respondsToSelector:@selector(setShadowOpacity:)])
        self.layer.shadowOpacity = 0.75;

    [self setNeedsDisplay];
}
    return self;
}
- (void)drawRect:(CGRect)rect {
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetShouldAntialias(ctx, true);

    CGFloat xsize = self.bounds.size.width / 6;
    CGFloat borderWidth = self.bounds.size.width / 10;

    CGContextSaveGState(ctx);

    CGContextSetLineCap(ctx, kCGLineCapRound);
    CGContextSetLineWidth(ctx, borderWidth);
    CGContextSetStrokeColorWithColor(ctx, [[UIColor whiteColor] CGColor]);

    CGFloat width = self.bounds.size.width;
    CGPoint start1 = CGPointMake(width / 2 - xsize, width / 2 - xsize);
    CGPoint end1 = CGPointMake(width / 2 + xsize, width / 2 + xsize);
    CGPoint start2 = CGPointMake(width / 2 + xsize, width / 2 - xsize);
    CGPoint end2 = CGPointMake(width / 2 - xsize, width / 2 + xsize);

    CGContextBeginPath(ctx);
    CGContextMoveToPoint(ctx, start1.x, start1.y);
    CGContextAddLineToPoint(ctx, end1.x, end1.y);
    CGContextStrokePath(ctx);

    CGContextBeginPath(ctx);
    CGContextMoveToPoint(ctx, start2.x, start2.y);
    CGContextAddLineToPoint(ctx, end2.x, end2.y);
    CGContextStrokePath(ctx);

    CGContextRestoreGState(ctx);
}
- (void)setBorderColor:(CGColorRef)color
{
    [[self layer] setBorderColor:color];
    [[self layer] setNeedsDisplay];
}

- (void)setCornerRadius:(float)radius
{
    [[self layer] setCornerRadius:radius];
    // and get the wrapper for the gradient layer too
    [wrapperLayer setCornerRadius:radius];
}

@end

Upvotes: 3

Related Questions