使用百分比发现UIImageView

Question

I am trying to create a bar graph of sorts, I plan on using two image one coloured UIImage covered but a dull grey UIImage. As the user progresses I would like to reduce the size of the dull grey UIImageView to the right by x%.

Answer 1

You can align the dullImageView to the colouredImageView on 3 sides(top,bottom and left/right(not both!)) exactly on top, then set a width constraint for the dullImageView(or height if your bar chart is vertical).

Reference the constraint outlet into your code (rightclick-drag the constraint into your class file) and change the constant value of the constraint accordingly, an example below reduces by 30%.

float xPercent = 30; //for example you want a 30% decrease
[self.dullViewHeight setConstant: self.colouredView.frame.size.height*(1-(xPercent/100))];

Answer 2

In view of your comment on the answer above (which would work great if you were not trying to do multiple instances of this in a tableView and does address your question as asked so I gave it a +1 ) I suggest your own subclass on UITableViewCell . Sometimes you just have to get your hands dirty and write a little code. Best :)

//  BarChartTableViewCell.h
//  Created by Jef Long on 2/09/2016.
#import <UIKit/UIKit.h>

@interface BarChartTableViewCell : UITableViewCell

@property (readonly) UIImageView *underImageView , *overImageView ;
@property CGFloat coverPercent ; //eg 0.36 = 36%

@end

@implementation

//  BarChartTableViewCell.m
//  Created by Jef Long on 2/09/2016.

#import "BarChartTableViewCell.h"

@implementation BarChartTableViewCell
{
//ivars
 UIImageView *_underImageView , *_overImageView ;

}

- (void)awakeFromNib {
    [super awakeFromNib] ;

    [self setUp] ;
    // Initialization code
}

-(void)setUp{
    //this may need to be called from some initialiser or other depending how you do your tableView
    self.contentView.translatesAutoresizingMaskIntoConstraints = YES ;
    if ( _underImageView == nil ){
      _underImageView = [[UIImageView alloc]initWithFrame: self.contentView.bounds ] ;
      _underImageView.autoResizingMask = UIViewAutoresizingFlexibleWidth |
      UIViewAutoresizingFlexibleHeight ;
      [self.contentView addSubview: _underImageView ] ;
    }
    if ( _overImageView == nil ){
    _overImageView = [[UIImageView alloc]initWithFrame: self.contentView.bounds ] ;
    _overImageView.autoResizingMask = UIViewAutoresizingFlexibleWidth |
    UIViewAutoresizingFlexibleHeight |  UIViewAutoresizingFlexibleLeftMargin ;
    [self.contentView addSubview: _overImageView ] ;
    }

}
-(void)setCoverPercent:(CGFloat ) coverPercent{
    [UIView animateWithDuration:0.3
                     animations:{

                         _overImageView.frame = CGRectMake( self.contentView.bounds.size.width - (self.contentView.bounds.size.width*coverPercent) , 0.0 , self.contentView.bounds.size.height , self.contentView.bounds.size.width*coverPercent  ) ;

                     }
                     completion:(BOOL finished){} ]

}
-(CGFloat )coverPercent{
    return (_overImageView.bounds.size.with / _underImageView.bounds.size.with ) ;
}



-(UIImageView *) underImageView{
    return _underImageView ;
}

-(UIImageView *) overImageView{
    return _overImageView ;
}

@end