September 21, 2011

ใส่รูปเป็น Background ให้ UINavigationBar

ในเมื่อ UINavigationBar มันทำงานไม่ถูกใจเรา ดังนั้นเราก็สร้าง Category ให้ UINavigationBar ใหม่ แบบนี้


@implementation UINavigationBar (UINavigationBarCategory)
- (void)drawRect:(CGRect)rect {
    UIColor *color = [UIColor orangeColor];
    UIImage *img  = [UIImage imageNamed: @"nav_bar.png"];
    [img drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    self.tintColor = color;
    [super drawRect: rect];
}

@end


override method drawInRect: ให้มันวาดรูปที่เราต้องการลงไปแทน และกำหนดสีให้ property tintColor เพื่อให้ปุ่ม back ใน Navigation bar มีสีเข้ากับรูปที่เราวาดลงไปเป็น background

ปัญหาจะตามมาอีกนิดนึงคือ title ที่อยู่บน Navigation bar อาจมีสีไม่เหมาะสมกับรูปที่เราวาดลงไปเป็น background วิธีแก้ไขก็คือเราจำเป็นต้องไปกำหนดสี และฟอนต์เอง ดังนี้


    CGRect frame = CGRectMake(0, 0, 200, 44);
    UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
    
    label.backgroundColor = [UIColor clearColor];
    label.font = [UIFont systemFontOfSize:18];
    
    label.textAlignment = UITextAlignmentCenter;
    label.textColor = [UIColor blackColor];
    self.navigationItem.titleView = label;
    label.text = @"First View";


เท่านี้เราก็จะได้ UINavigationBar หน้าตาดังรูปนี้



:)