进度动画UIButton

Question

我想知道要实现这种加载UIButton，就像进度条一样。当进度达到100％时，它将激活（button.enabled = true）按钮。我学习了如何使用图像进行两种状态的按钮以及基于过渡的动画来实现按钮（如材质设计 UIButton波纹效果），但是我不知道该如何实现。

这是具有这种按钮行为的应用程序的屏幕截图：

Answer 1

在这里，我为您提供了一个示例，以防您不明白我的意思：

ProgressButton.h

#import <UIKit/UIKit.h>

@interface ProgressButton : UIView

@property (nonatomic, strong) UIView *fillBar;
@property (nonatomic, strong) UILabel *label;
@property (nonatomic, strong) UIButton *button;

@property (nonatomic, strong) NSLayoutConstraint *fillWidthConstraint;

-(void)setFillPercentage:(CGFloat)decimalPercentage Animated:(BOOL)animated;

@end

ProgressButton.m

#import "ProgressButton.h"

@implementation ProgressButton

-(id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];

    if(self)
    {
        [self initViews];
        [self initConstraints];
    }

    return self;
}

-(void)initViews
{
    self.layer.cornerRadius = 5.0;
    self.clipsToBounds = YES;
    self.backgroundColor = [UIColor lightGrayColor];


    _fillBar = [[UIView alloc] init];
    _fillBar.backgroundColor = [UIColor colorWithRed:47.0/255.0 green:204.0/255.0 blue:112.0/255.0 alpha:1.0];

    _label = [[UILabel alloc] init];
    _label.text = @"Resend Activation Code";
    _label.textColor = [UIColor whiteColor];
    _label.textAlignment = NSTextAlignmentCenter;

    _button = [[UIButton alloc] init];
    _button.userInteractionEnabled = NO;

    [self addSubview:_fillBar];
    [self addSubview:_label];
    [self addSubview:_button];
}

-(void)initConstraints
{
    _fillBar.translatesAutoresizingMaskIntoConstraints = NO;
    _label.translatesAutoresizingMaskIntoConstraints = NO;
    _button.translatesAutoresizingMaskIntoConstraints = NO;

    id views = @{
                 @"fillBar": _fillBar,
                 @"label": _label,
                 @"button": _button
                 };

    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[label]|" options:0 metrics:nil views:views]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[label]|" options:0 metrics:nil views:views]];

    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[button]|" options:0 metrics:nil views:views]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[button]|" options:0 metrics:nil views:views]];

    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[fillBar]" options:0 metrics:nil views:views]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[fillBar]|" options:0 metrics:nil views:views]];

    _fillWidthConstraint = [NSLayoutConstraint constraintWithItem:_fillBar attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:0.0];

    [self addConstraint:_fillWidthConstraint];
}

-(void)setFillPercentage:(CGFloat)decimalPercentage Animated:(BOOL)animated
{
    NSTimeInterval duration = 0.0;

    if(animated)
    {
        duration = 0.5;
    }

    self.fillWidthConstraint.constant = self.bounds.size.width * decimalPercentage;

    [UIView animateWithDuration:duration animations:^{
        [self layoutIfNeeded];
    } completion:^(BOOL finished) {
        self.button.userInteractionEnabled = self.fillWidthConstraint.constant >= self.bounds.size.width ? YES : NO;
    }];
}

@end

如何使用

在您的视图控制器中，为此progressButton创建一个属性：

#import <UIKit/UIKit.h>
#import "ProgressButton.h"

@interface ViewController : UIViewController

@property (nonatomic, strong) ProgressButton *progressButton;

@end

然后在您的ViewController.m文件中，您可以selector在初始化代码中将a附加到按钮修饰事件：

self.progressButton = [[ProgressButton alloc] init];
[self.progressButton.button addTarget:self action:@selector(buttonTapped) forControlEvents:UIControlEventTouchUpInside];

准备好设置按钮的进度时，请在0.0到1.0的范围内输入一个十进制百分比，其中1.0表示100％：

[self.progressButton setFillPercentage:0.5 Animated:YES];

这是完整的ViewController.m文件：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [self initViews];
    [self initConstraints];


    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.progressButton setFillPercentage:0.5 Animated:YES];
    });



    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.progressButton setFillPercentage:1.0 Animated:YES];
    });
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

-(void)initViews
{
    self.progressButton = [[ProgressButton alloc] init];
    [self.progressButton.button addTarget:self action:@selector(buttonTapped) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:self.progressButton];
}

-(void)initConstraints
{
    self.progressButton.translatesAutoresizingMaskIntoConstraints = NO;

    id views = @{
                 @"progressButton": self.progressButton
                 };

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[progressButton]-20-|" options:0 metrics:nil views:views]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.progressButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];
}

-(void)buttonTapped
{
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Resend Action Code?" message:@"Are you sure?" preferredStyle:UIAlertControllerStyleAlert];

    UIAlertAction *actionYes = [UIAlertAction actionWithTitle:@"Yes" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

        NSLog(@"resend activation placeholder code");

    }];

    UIAlertAction *actionNo = [UIAlertAction actionWithTitle:@"No" style:UIAlertActionStyleDefault handler:nil];

    [alertController addAction:actionYes];
    [alertController addAction:actionNo];

    [self presentViewController:alertController animated:YES completion:nil];
}

@end

如果使用我的ViewController示例，最终将得到如下结果：

如果进度按钮的进度不是100％，则不应单击该按钮。