Custom UISlider

เราสามารถเปลี่ยนหน้าตาของ UISlider ให้เข้ากับ UI ของ iOS Application ที่เรากำลังพัฒนาอยู่ได้ด้วยการกำหนดรูปภาพด้านซ้ายของปุ่มเลื่อน ขวาของปุ่มเลื่อน และปุ่มสำหรับเลื่อนให้มันผ่าน method 3 ตัวนี้

- (void)setMaximumTrackImage:(UIImage *)image 
                    forState:(UIControlState)state
- (void)setMinimumTrackImage:(UIImage *)image 
                    forState:(UIControlState)state
- (void)setThumbImage:(UIImage *)image 
             forState:(UIControlState)state

เริ่มจากกำหนดรูปเหล่านี้ให้กับ UISlider

min.png

max.png

center.png

ดังนี้

UIImage *minImage = [UIImage imageNamed: @"min.png"];

UIImage *maxImage = [UIImage imageNamed: @"max.png"];

UIImage *center = [UIImage imageNamed: @"center.png"];

minImage = [minImage stretchableImageWithLeftCapWidth: 10.0 

                                    topCapHeight: 0.0];

maxImage = [maxImage stretchableImageWithLeftCapWidth: 10.0 

                                    topCapHeight: 0.0];

UISlider *slider = [[UISlider alloc] init];

[slider setMinimumTrackImage: minImage forState: UIControlStateNormal];

[slider setMaximumTrackImage: maxImage forState: UIControlStateNormal];

[slider setThumbImage: center forState: UIControlStateNormal];

slider.frame = CGRectMake(0, 480/2, 300, 44);

[self.view addSubview: slider];

[slider release];

จะได้ slider หน้าตาใหม่ออกมาแบบนี้ โดยด้านบนเป็น default UI ของ iOS เอง ส่วนด้านล่างเป็นแบบที่ทำขึ้นมาใหม่

เท่านี้เราก็สามารถสร้าง UISlider ที่มี UI เป็นไปในทางเดียวกับ Application ของเราได้แล้ว

ตัวอย่าง

Related Link from Roti