一、UISlider
UIslider滑塊控件在IOS開發中會常用到,可用於調節音量,字體大小等UI方面的交互;UISlider實例提供一個控件,讓用戶通過左右拖動一個滑塊(可稱其為“縮略圖”)來選擇一個值。默認情況下,滑塊的最小值為0.0,最大值為1.0。當然可以在屬性面板中通過設置minimumValue和maximumValue來進行定制這兩個值。如果要為控件兩端設置樣式,可以添加一對相關圖像(minimumValueImage和maximumValueImage屬性)來加強該設置,也可在代碼中通過setMimimumTrackImage: forState: 和setMaximumTrackImage: forState: 方法來添加設置兩端圖片。
UISwitch對象提供一個簡單的開/關切換,允許用戶選擇一個布爾值。
常見屬性:
1、value:
這個值是介於滑塊的最大值和最小值之間的,如果沒有設置邊界值,默認為0-1;
2、minimumValue:
設置滑塊最小邊界值(默認為0)
3、maximumValue:
設置滑塊最大邊界值(默認為1)
4、minimumValueImage:
設置滑塊最左端顯示的圖片
5、maximumValueImage
設置滑塊最右端顯示的圖片
6、continuous(BOOL)
設置滑塊值是否連續變化(默認為YES)
7、minimumTrackTintColor
設置滑塊左邊(小於部分)線條的顏色
8、maximumTrackTintColor:
設置滑塊右邊(大於部分)線條的顏色
9、thumbTintColor
設置滑塊顏色(影響已划過一端的顏色),注意這個屬性:如果你沒有設置滑塊的圖片,那個這個屬性將只會改變已划過一段線條的顏色,不會改變滑塊的顏色,如果你設置了滑塊的圖片,又設置了這個屬性,那么滑塊的圖片將不顯示,滑塊的顏色會改變。
常用方法:
手動設置滑塊的值:
- (void)setValue:(float)value animated:(BOOL)animated;
設置滑塊的圖片:
- (void)setThumbImage:(UIImage *)image forState:(UIControlState)state;
設置滑塊划過部分的線條圖案
- (void)setMinimumTrackImage:(UIImage *)image forState:(UIControlState)state;
設置滑塊未划過部分的線條圖案
- (void)setMaximumTrackImage:(UIImage *)image forState:(UIControlState)state;
對應的幾個get方法
- (UIImage *)thumbImageForState:(UIControlState)state;
- (UIImage *)minimumTrackImageForState:(UIControlState)state;
- (UIImage *)maximumTrackImageForState:(UIControlState)state;
對應的設置當前狀態的響應屬性的方法
@property(nonatomic,readonly) UIImage* currentThumbImage;
@property(nonatomic,readonly) UIImage* currentMinimumTrackImage;
@property(nonatomic,readonly) UIImage* currentMaximumTrackImage;
//初始化 mySlider = [[UISlider alloc] initWithFrame:(CGRect){10,80,100,20}]; //最小邊界值 mySlider.minimumValue = 10; //最大邊界值 mySlider.maximumValue = 100; //這個值是介於滑塊的最大值和最小值之間的,如果沒有設置邊界值,默認為0-1 mySlider.value =0.5; //設置滑塊值是否連續變化(默認為YES) mySlider.continuous= YES; //設置滑塊最左端顯示的圖片 mySlider.minimumValueImage = [UIImage imageNamed:@""]; //設置滑塊最右端顯示的圖片 mySlider.maximumValueImage = [UIImage imageNamed:@""]; //設置滑塊左邊(小於部分)線條的顏色 mySlider.minimumTrackTintColor = [UIColor blueColor]; //設置滑塊右邊(大於部分)線條的顏色 mySlider.maximumTrackTintColor = [UIColor greenColor]; //設置滑塊顏色(影響已划過一端的顏色) mySlider.thumbTintColor = [UIColor grayColor]; //加入視圖 [self.view addSubview:mySlider]; //添加點擊事件 [mySlider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
二、UIProgressView
//初始化 progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault]; //加入視圖 [self.view addSubview:progressView]; //設置位置,尺寸 progressView.frame = (CGRect){20,100,200,50}; //設置進度條顏色 progressView.trackTintColor = [UIColor blueColor]; //設置進度默認值,這個相當於百分比,范圍在0~1之間,不可以設置最大最小值 progressView.progress = 0.1; //設置進度條上進度的顏色 progressView.progressTintColor = [UIColor yellowColor]; //設置進度條的背景圖片 progressView.trackImage = [UIImage imageNamed:@""]; //設置進度條上進度的背景圖片 progressView.progressImage = [UIImage imageNamed:@""]; //設置進度值並動畫顯示 [progressView setProgress:0.7 animated:YES];
如圖:
三、UISwich
UISwitch 的作用是給用戶提供開關,在系統的設置界面很常見,控件也很簡單。
常見屬性:
1、onTintColor
開關開啟狀態時的顏色
2、tintColor
開關風格顏色
3、thumbTintColor
開關按鈕顏色
4、BOOL on
開關的狀態
1 //初始化 2 swicthView = [[UISwitch alloc] initWithFrame:(CGRect){50,50,100,30}]; 3 swicthView.on = YES; 4 //設置開關開啟狀態時的顏色 5 swicthView.onTintColor = [UIColor yellowColor]; 6 //設置開關風格顏色 7 swicthView.tintColor = [UIColor blueColor]; 8 //設置開關按鈕顏色 9 swicthView.thumbTintColor = [UIColor purpleColor]; 10 //設置開關開啟狀態時的圖片 11 swicthView.onImage = [UIImage imageNamed:@"pic1"]; 12 //設置開關關閉狀態時的圖片 13 swicthView.offImage = [UIImage imageNamed:@"pic2"]; 14 //加入視圖 15 [self.view addSubview:swicthView];
添加監聽事件:
1 [swicthView addTarget:self action:@selector(swicthAction:) forControlEvents:UIControlEventValueChanged]; 2 3 - (void)swicthAction:(UISwitch *)mySwicth{ 4 UILabel *lastLabel = (UILabel*)[self.view viewWithTag:100]; 5 [lastLabel removeFromSuperview]; 6 7 UISwitch *switchButton = mySwicth; 8 BOOL isButtonOn = [switchButton isOn]; 9 10 UILabel *switchLabel = [[UILabel alloc] initWithFrame:(CGRect){70,100,100,30}]; 11 switchLabel.font = [UIFont systemFontOfSize:25]; 12 switchLabel.tag = 100; 13 [self.view addSubview:switchLabel]; 14 if (isButtonOn) { 15 switchLabel.text = @"是"; 16 }else 17 switchLabel.text = @"否"; 18 }