[아이폰개발]UISegmentedControl의 배경색과 글자색 바꾸기

UISegmentedControl을 기본 스킨만 사용하는 경우야 문제는 없습니다.
하지만 대부분의 경우 그렇지 못하죠.
저처럼 아이폰 개발을 처음 하는 경우에는 전체 개발의 80%이상은 UI에 시간을 쏟아붙는듯 합니다.
분명 시간이 매우 아깝지만 익숙해지면 20~30%로 내릴 수 있을것이라 생각합니다.

각설하고....
UISegmentedControl의 기본 스킨은 다음과 같습니다. UIToolBar에 [[UIBarButtonItem alloc]initWithCustomView:]를 이용해 등록하면 아래와 같이 됩니다.

기본스킨을 사용하면 아무 문제없이 선택이 잘됩니다.

하지만 UISegmentedControl의 tintColor를 [UIColor blackColor]로 지정하면 아래 처럼 보이게 되는데 실제로 실행해보면 선택되어지지 않습니다. 정말 난감해지는 순간입니다. 선택했을때 색, 선택되지 않았을때 색, 글자색 뭐 이런것들을 직접 다룰 수 있는 함수나 속성이 전혀 있지 않아 매우 난감했습니다. 다른 분들은 이것을 어찌 해결하셨는지 궁금할 정도입니다.

제가 하고자 했던 목표는 글자크기를 크게하고 선택이 될 수 있는 모습을 보고 싶다는 겁니다.
아주 아주 단순한 요구사항인데도 불구하고 속성변경으로 단순하게 처리할 수 없어 너무 답답합니다. 어쨌든...
해결하기 위해 구글신의 도움을 빌릴 수 밖에 없더군요. 그러다가 다음 내용을 찾았습니다.

iPhone: UISegmentedControl with custom colors
iPhone – Get Class Name
Change font size for text in UISegmentedControl

(아래 내용은 설명이라고 적었지만 소스를 먼저 분석하시고 보시는 편이 더 좋을 것 같습니다. ^^)
첫번째 내용은 UISegmentedControl을 확장해서 선택할때 배경색이 바뀌도록 한 것입니다. 이 사람은 이것을 쓴 어플이 문제없이 등록승인되었다고 하네요. 그러니 우리도 쓸 수 있습니다. ^^ 단지 이 소스의 단점은 UISegmentedControl의 selectedSegmentIndex를 0이 아닌 1,2 등으로 지정하면 오동작 한다는 겁니다. 당신의 어플에서 기본 0이 항상 선택되어야 하는 경우라면 전혀 문제 없겠지만 1, 2 등이 선택되어야 한다면 당연히 문제가 생기므로 이 마저도 수정해야합니다. 제가 선택한 방식은 UIView의 tag를 이용한 것입니다. UISegmentedControl의 내부에 생성된 것들은 검사해 보니 UISegment입니다. 이 클래스는 private로 지정되어 애플 정책상 직접 사용하는 것이 금지됩니다. 하지만 문제 해결을 위한 참조정도는 가능한가 봅니다. 이 UISegment가 "하나","둘","셋" 순서대로 인덱스를 0,1,2로 지정되어 있으면 문제 없는데 또 그런 것도 아닌 것 같더군요. UIView의 subviews속성을 통해 얻어온 자식들을 가지고 손쓰면 안된다는 것을 의미합니다. 그래서 UIView의 tag 를 사용합니다. ^^

세번째 내용은 폰트를 설정하기 위해 사용합니다. 내용을 보면 changeUISegmentFont 라는 함수를 설명하고 있는데요. 이것은 재귀함수로 UISegmentContoller에 자식뷰를 전부 돌면서 UISegmentLabel을 찾아 폰트를 수정해주는 식입니다. 하지만 이것은 직접쓰면 안되고 클래스의 이름을 가져오는 과정에서 두번째 내용이 필요하고 직접 쓴다고 해서 폰트가 변경되는 시점은 비동기적으로 동작하기 때문에 처음 생성시 변경해준다고 해서 되는 문제는 아닙니다. 첫번째 내용에 이 함수를 함께 쓴다면 어느정도 문제 해결의 실마리를 찾게 되더군요.

이제 소스 들어갑니다.
헤더 입니다. 이름은 CustomSegmentedControl이라 정했습니다.

//

//  CustomSegmentedControl.h

//

//  Created by Yongho Ji on 10. 9. 15..

//

#import <Foundation/Foundation.h>

@interface CustomSegmentedControl : UISegmentedControl {

UIColor *offColor; //off시 배경색

UIColor *onColor; //on시 배경색

UIColor *onTextColor; //off시 글자색

UIColor *offTextColor; //on시 글자색

int fontSize; //글자의 크기 

}

-(id)initWithItems:(NSArray*)items 

  offColor:(UIColor*)offcolor 

  onColor:(UIColor*)oncolor 

  offTextColor:(UIColor*)offtextcolor 

  onTextColor:(UIColor*)ontextcolor 

  fontSize:(int)fontsize;

@end

다음은 구현부입니다. 천천히 따라가 보시면 해석하시는데 무리는 없을겁니다.

//

//  CustomSegmentedControl.m

//

//  Created by Yongho Ji on 10. 9. 15..

//

#import "CustomSegmentedControl.h"

@implementation CustomSegmentedControl

//UISegment계열 폰트의 색과 크기를 조절시켜준다. 재귀적으로 찾아가는 것을 눈여겨 보자.

- (void)_changeUISegmentFont:(UIView*) aView 

fontSize:(int)fontsize 

  textColor:(UIColor*)textcolor 

{

NSString *typeName = NSStringFromClass([aView class]);

if([typeName compare:@"UISegmentLabel" options:NSLiteralSearch] == NSOrderedSame) {

UILabel *label = (UILabel*)aView;

UIFont *font = [UIFont boldSystemFontOfSize:fontSize];

[label setFont:font]; //글자크기 지정 

[label setTextColor:textcolor]; //글자색 지정 

//글자크기에 따라 위치/크기 보정 

CGSize size = [label.text sizeWithFont:font forWidth:320 lineBreakMode:UILineBreakModeClip];

[label setFrame:CGRectMake(0, 0, size.width, size.height)];

[label setCenter:CGPointMake(label.superview.frame.size.width/2, label.superview.frame.size.height/2)];

}

NSArray *subs = [aView subviews];  

NSEnumerator* iter = [subs objectEnumerator];

UIView *subView;

while (subView = [iter nextObject]) {

[self _changeUISegmentFont:subView fontSize:fontsize textColor:textcolor];

}

} 

//색이 바뀔때마다 Segment의 배경색과 폰트색을 바꿔준다.

-(void)_setToggleHiliteColors {

//NSLog(@"%d",self.selectedSegmentIndex);

int index = self.selectedSegmentIndex;

int numSegments = [self.subviews count];

id subview;

//리셋 및 선택 처리 

//   깜박임이 존재하는 것은 UISegmentedControl 내부적으로 폰트 및 색을 그렸다가 

//   여기서 또 강제로 다시한번 지정하기 때문에 그렇다. 

//   어찌할 방법을 찾지는 못했지만 그럭저럭 쓸만함 

for (int i=0; i<numSegments; i++) {

subview = [self viewWithTag:i];

if (i==index) { //선택

[subview setTintColor:nil];

[subview setTintColor:onColor];

[self _changeUISegmentFont:subview fontSize:fontSize textColor:onTextColor];

} else { //리셋

[subview setTintColor:nil];

[subview setTintColor:offColor];

[self _changeUISegmentFont:subview fontSize:fontSize textColor:offTextColor];

}

}

}

//초기화 함수 

-(id)initWithItems:(NSArray*)items 

  offColor:(UIColor*)offcolor 

  onColor:(UIColor*)oncolor 

  offTextColor:(UIColor*)offtextcolor 

  onTextColor:(UIColor*)ontextcolor 

  fontSize:(int)fontsize 

{

if (self = [super initWithItems:items]) {

//색 및 폰트크기 지정 

offColor = [offcolor retain]; 

onColor = [oncolor retain];

offTextColor = [offtextcolor retain];

onTextColor = [ontextcolor retain];

fontSize = fontsize;

//스타일 고정 

[self setBackgroundColor:[UIColor clearColor]];

[self setSegmentedControlStyle:UISegmentedControlStyleBar];

//루프를 돌면서 태그를 달아줌 

id subview;

for (int i=0; i<[self.subviews count]; i++) {

subview = [self.subviews objectAtIndex:i];

[subview setTag:i];

}

//listen for updates

[self addTarget:self action:@selector(_setToggleHiliteColors) forControlEvents:UIControlEventValueChanged];

//비동기적으로 한번 호출해준다. 글자크기/배경색 적용을 위해...

[self performSelector:@selector(_setToggleHiliteColors) withObject:nil afterDelay:0.1];

}

return self;

}

//메모리 dealloc

-(void)dealloc {

[offColor release];offColor=nil;

[onColor release];onColor=nil;

[onTextColor release];onColor=nil;

[offTextColor release];offTextColor=nil;

[super dealloc];

}

@end

이제 만들어진  CustomSegmentedControl을 사용하는 예제 호스트 코드입니다.  복잡해 보이지만 IB에서 ToolBar 붙이고 거기에 UISegmentedControl을 중앙에 붙이기 위한 작업을 코드로 옮겨 넣은 것 뿐입니다.

UIToolbar *tb = [[[UIToolbar alloc]init]autorelease];

[tb setFrame:CGRectMake(0, 480-49, 320, 49)];

[tb setBarStyle:UIBarStyleBlack];

[window addSubview:tb];

CustomSegmentedControl *segControl;

segControl= [[CustomSegmentedControl alloc]initWithItems:[NSArray arrayWithObjects:@"하나 ",@"둘 ",@"셋 ",nil] 

  offColor:[UIColor blackColor]

  onColor:[UIColor colorWithRed:120.0f/255.0f green:120.0f/255.0f blue:120.0f/255.0f alpha:1]

  offTextColor:[UIColor colorWithRed:153.0f/255.0f green:153.0f/255.0f blue:152.0f/255.0f alpha:1] 

  onTextColor:[UIColor whiteColor]

  fontSize:15];

segControl.frame = CGRectMake(0, 0, 250, 35);

segControl.selectedSegmentIndex=1;

//[segControl addTarget:self action:@selector(_valueChanged) forControlEvents:UIControlEventValueChanged];

UIBarButtonItem *segControlItem = [[[UIBarButtonItem alloc]initWithCustomView:segControl]autorelease];

UIBarButtonItem *leftItem = [[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil]autorelease];

UIBarButtonItem *rightItem = [[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil]autorelease];

[tb setItems:[NSArray arrayWithObjects:leftItem, segControlItem, rightItem, nil]];

[segControl release];

아래와 같이 선택했을때 색변경과 글자크기 변경이 가능해졌습니다.

좋은 지식이 되었으면 하며, 다른 의견 있으시면 댓글 부탁합니다. ^^

글쓴이 : 지돌스타(http://blog.jidolstar.com)