在Code4app網站中找到一個不錯的特效包--ASProgressPopupView
點此連結到Code4app
上面寫的很簡單,但實際使用起來卻不是這樣
"
使用方法:
self.progressView.font = [UIFont fontWithName:@"Futura-CondensedExtraBold" size:26];
self.progressView.popUpViewAnimatedColors = @[[UIColor redColor], [UIColor orangeColor], [UIColor greenColor]];
self.progressView.popUpViewCornerRadius = 16.0;"
實際在github上的描述是:
github
How to use it
It’s very simple. Drag a UIProgressView into your Storyboard/nib and set its class to ASProgressPopUpView – that's it. The example below demonstrates how to customize the appearance.
self.progressView.font = [UIFont fontWithName:@"Futura-CondensedExtraBold" size:26];
self.progressView.popUpViewAnimatedColors = @[[UIColor redColor], [UIColor orangeColor], [UIColor greenColor]];
self.progressView.popUpViewCornerRadius = 16.0;
To show the popUpView, just call:
[self.progressView showPopUpViewAnimated:YES];
And to hide:
[self.progressView hidePopUpViewAnimated:YES];
You update the value exactly as you would normally use a UIProgressView, just update theprogress
property self.progressView.progress = 0.31;
詳細的可以去github上面看
這邊的教學:
1.先把下面這四個檔案copy進去專案,然後在你要寫的.m file裡面新增
#import "ASValueTrackingSlider.h"
2.開啟你的xib file,拉一個slider進去畫面,把class改為ASValueTrackingSlider
然後把該元件拉到.m file產生一個名叫slider1的物件
可以看到他的屬性是ASValueTrackingSlider,不是uislider,是的話就搞錯囉!
接著我們就可以使用slider1來做事情(控制他)
3.為了讓我的進度條上面顯示的文字最後面都有個"V",所以這邊要增加三行(第一行是宣告)
NSNumberFormatter *voltFormatter = [[NSNumberFormatter alloc] init];
[voltFormatter setPositiveSuffix:@"V"];
[voltFormatter setNegativeSuffix:@"V"];
再來就是一些基本的設定
self.slider1.popUpViewCornerRadius = 12.0;
[self.slider1 setNumberFormatter:voltFormatter];
[self.slider1 setMaxFractionDigitsDisplayed:0];
self.slider1.popUpViewColor = [UIColor colorWithHue:0.55 saturation:0.8 brightness:0.9 alpha:0.7];
self.slider1.font = [UIFont fontWithName:@"GillSans-Bold" size:22];
self.slider1.popUpViewAnimatedColors = @[[UIColor redColor], [UIColor orangeColor], [UIColor greenColor]];
//這邊是讓我前中後段的顏色有不同
[self.slider1 showPopUpViewAnimated:YES];
//這一段一定要show不然他不會顯示文字出來
如果是要有%數的話則改用這段
NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
[formatter setNumberStyle:NSNumberFormatterPercentStyle];
[self.slider1 setNumberFormatter:formatter];
self.slider1.popUpViewAnimatedColors = @[[UIColor greenColor], [UIColor orangeColor], [UIColor redColor]];
self.slider1.font = [UIFont fontWithName:@"Futura-CondensedExtraBold" size:26];
[self.slider1 showPopUpViewAnimated:YES];
又或者你想要到某個區段就顯示某些文字的話,請加入這一行
self.slider1.dataSource = self;
然後加入這一段
- (NSString *)slider:(ASValueTrackingSlider *)slider stringForValue:(float)value;
{
value = roundf(value);
NSString *s;
if (value < 30) {
s = @"Warning!! Low Voltage";
} else if (value > 29.0 && value < 50.0) {
s = [NSString stringWithFormat:@"😎 %@ 😎", [slider.numberFormatter stringFromNumber:@(value)]];
} else if (value >= 50.0) {
s = [NSString stringWithFormat:@"%dV", value];
}
return s;
}
最後,完成版本就像這樣~
然後如果要調整他的弧度的話(邊角弧度)
self.slider2.popUpViewCornerRadius = 12.0;
這邊可以調整
希望大家都能夠開心使用,(畢竟作者沒有講很清楚,我也摸了一會兒才會),end