Question

我想知道要实现这个像进度条一样的加载<tr> <td>Select One</td> <td> <label> <input type="radio" ng-model="option.name" ng-value="1"> Billpayment </label><br/> <label> <input type="radio" ng-model="option.name" ng-value="2"> Item not delivered </label><br/> <label> <input type="radio" ng-model="option.name" ng-value="3"> Cashback </label><br/> <tt>option = {{option.name | json}}</tt><br/> </td> </tr> <TR> <div class="form-group"> <TD>Order Id</TD> <TD> <input class="form-control" type="text" required ng-model="wallet.oid" /> </TD> </div> </TR> <tr> <div class="form-group"> <TD>Amount</TD> <TD> <input class="form-control" type="text" required ng-model="wallet.amount" /> </TD> </div> </tr> <tr> <div class="form-group"> <TD>Description</TD> <TD> <div ng-if="option.name == 1"> <input class="form-control" type="text" required ng-model="wallet.description" ng-value="Bill payment for order" /> </div> <div ng-if="option.name == 2"> <input class="form-control" type="text" required ng-model="wallet.description" ng-value="Cashback for order" /> </div> <div ng-if="option.name == 3"> <input class="form-control" type="text" required ng-model="wallet.description" ng-value="Item not received for order" /> </div> </TD> </div> </tr>。当进度达到100％时，它会激活（UIButton）按钮..我学会了如何使用图像执行两个状态按钮，以及基于过渡的动画，如material design button.enabled = true涟漪效果按钮，但是我无法弄清楚如何实现这一目标。

这是具有此类按钮行为的应用的屏幕截图：

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附加到初始化代码中的按钮触摸事件：

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％，则该按钮不应该是可点击的。

Answer 2

你的答案在于link

希望这项工作。

http://i.stack.imgur.com/3xqh5.gif

进步动画UIButton

2 个答案:

ProgressButton.h

ProgressButton.m

如何使用