[iOS] 特效進度條(ASProgressPopupView)的使用方法

在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