滑桿

UIslider滑塊控件在IOS開發(fā)中會常用到,可用于調(diào)節(jié)音量,字體大小等UI方面的交互,用法總結(jié)如下:

1.初始化一個滑塊:

UISlider * slider = [[UISlider alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];

2.屬性

@property(nonatomic) float value;

這個值是介于滑塊的最大值和最小值之間的,如果沒有設(shè)置邊界值,默認為0-1;

設(shè)置滑塊最小邊界值(默認為0)

@property(nonatomic) float minimumValue;

設(shè)置滑塊最大邊界值(默認為1)

@property(nonatomic) float maximumValue;

設(shè)置滑塊最左端顯示的圖片:

@property(nonatomic,retain) UIImage *minimumValueImage;

設(shè)置滑塊最右端顯示的圖片:

@property(nonatomic,retain) UIImage *maximumValueImage;

設(shè)置滑塊值是否連續(xù)變化(默認為YES)

@property(nonatomic,getter=isContinuous) BOOL continuous;

這個屬性設(shè)置為YES則在滑動時,其value就會隨時變化,設(shè)置為NO,則當(dāng)滑動結(jié)束時,value才會改變。

設(shè)置滑塊左邊(小于部分)線條的顏色

@property(nonatomic,retain) UIColor *minimumTrackTintColor;

設(shè)置滑塊右邊(大于部分)線條的顏色

@property(nonatomic,retain) UIColor *maximumTrackTintColor;

設(shè)置滑塊顏色(影響已劃過一端的顏色)

@property(nonatomic,retain) UIColor *thumbTintColor;

注意這個屬性:如果你沒有設(shè)置滑塊的圖片,那個這個屬性將只會改變已劃過一段線條的顏色,不會改變滑塊的顏色,如果你設(shè)置了滑塊的圖片,又設(shè)置了這個屬性,那么滑塊的圖片將不顯示,滑塊的顏色會改變(IOS7)

手動設(shè)置滑塊的值:

- (void)setValue:(float)value animated:(BOOL)animated;

設(shè)置滑塊的圖片:

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

設(shè)置滑塊劃過部分的線條圖案

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

設(shè)置滑塊未劃過部分的線條圖案

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

對應(yīng)的幾個get方法

- (UIImage *)thumbImageForState:(UIControlState)state;

- (UIImage *)minimumTrackImageForState:(UIControlState)state;

- (UIImage *)maximumTrackImageForState:(UIControlState)state;

對應(yīng)的設(shè)置當(dāng)前狀態(tài)的響應(yīng)屬性的方法

@property(nonatomic,readonly) UIImage* currentThumbImage;

@property(nonatomic,readonly) UIImage* currentMinimumTrackImage;

@property(nonatomic,readonly) UIImage* currentMaximumTrackImage;

添加觸發(fā)事件

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

3.實用舉例

(1)一共四個控件,最大值/最小值/當(dāng)前值label;一個滑桿。

??:滑桿高度設(shè)置為0,不能左右滑動??!


a.創(chuàng)建控件

UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake((SCREENWIDTH - 150) / 2, 200, 150, 20)];

[self.view addSubview:slider];

b.設(shè)置屬性

UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake((SCREENWIDTH - 150) / 2, 200, 150, 20)];

slider.minimumValue = 9;// 設(shè)置最小值

slider.maximumValue = 11;// 設(shè)置最大值

slider.value = (slider.minimumValue + slider.maximumValue) / 2;// 設(shè)置初始值

slider.continuous = YES;// 設(shè)置可連續(xù)變化

//? ? slider.minimumTrackTintColor = [UIColor greenColor]; //滑輪左邊顏色,如果設(shè)置了左邊的圖片就不會顯示

//? ? slider.maximumTrackTintColor = [UIColor redColor]; //滑輪右邊顏色,如果設(shè)置了右邊的圖片就不會顯示

//? ? slider.thumbTintColor = [UIColor redColor];//設(shè)置了滑輪的顏色,如果設(shè)置了滑輪的樣式圖片就不會顯示

[slider addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];// 針對值變化添加響應(yīng)方法

[self.view addSubview:slider];

??:slider.continuous = YES; 這個設(shè)置有什么用呢?設(shè)為YES后,我們才能在拖動滑塊的過程中持續(xù)獲取其值變更事件,如果是NO,則只有在滑動停止時才會獲取變更事件。

c.創(chuàng)建好三個label

// 當(dāng)前值label

self.valueLabel = [[UILabel alloc] initWithFrame:CGRectMake((SCREENWIDTH - 100) / 2, slider.frame.origin.y + 30, 100, 20)];

self.valueLabel.textAlignment = NSTextAlignmentCenter;

self.valueLabel.text = [NSString stringWithFormat:@"%.1f", slider.value];

[self.view addSubview:self.valueLabel];

// 最小值label

UILabel *minLabel = [[UILabel alloc] initWithFrame:CGRectMake(slider.frame.origin.x - 35, slider.frame.origin.y, 30, 20)];

minLabel.textAlignment = NSTextAlignmentRight;

minLabel.text = [NSString stringWithFormat:@"%.1f", slider.minimumValue];

[self.view addSubview:minLabel];

// 最大值label

UILabel *maxLabel = [[UILabel alloc] initWithFrame:CGRectMake(slider.frame.origin.x + slider.frame.size.width + 5, slider.frame.origin.y, 30, 20)];

maxLabel.textAlignment = NSTextAlignmentLeft;

maxLabel.text = [NSString stringWithFormat:@"%.1f", slider.maximumValue];

[self.view addSubview:maxLabel];

??:我們label的值并不是直接定義的,而是獲取滑動條的最大、最小、當(dāng)前值,然后取小數(shù)點前一位顯示的,因為滑動條是連續(xù)變化的,其值是浮點型的連續(xù)小數(shù),如果不取小數(shù)點后的位數(shù),得到的將是沒有規(guī)律的小數(shù)。

d.拖動滑動條的響應(yīng)方法

我們要做到的是當(dāng)前值的label顯示的內(nèi)容隨著滑動條的滑動而變化,那么只需要在滑動條的響應(yīng)方法中設(shè)置label的顯示內(nèi)容就可以了,注意同樣要取小數(shù)點前一位,因為我們continuous設(shè)為了YES,所以顯示的當(dāng)前值會隨著拖動實時改變。

// slider變動時改變label值

- (void)sliderValueChanged:(id)sender {

UISlider *slider = (UISlider *)sender;

self.valueLabel.text = [NSString stringWithFormat:@"%.1f", slider.value];

}

e.引用實例

4.實例

實例2,實例3

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容