comment implémenter seecarc (Semicircular seekbar) dans ios?

Question

Je souhaite implémenter une barre de recherche semi-circulaire avec un pourcentage de progression, comme illustré ci-dessous.

Answer 1

OK. Assez difficile, hein. Mais sérieusement non. Crois moi! Aucune isuue. Utilisez juste ci-dessous le code.

Créer une classe héritant de UIView (par exemple, SgkProgressView).

maintenant ouvert SgkProgressView.h et ajoutez le code suivant

#import <UIKit/UIKit.h> 

@interface SgkProgressView : UIView 

@property (assign, nonatomic) IBInspectable CGFloat gaugeWidth; 

@property (assign, nonatomic) IBInspectable CGFloat minValue; 
@property (assign, nonatomic) IBInspectable CGFloat maxValue; 
@property (assign, nonatomic) IBInspectable CGFloat currentValue; 

@property (strong, nonatomic) IBInspectable UIColor *baseColor; 
@property (strong, nonatomic) IBInspectable UIColor *normalConditionColor; 

@property (assign, nonatomic) IBInspectable BOOL enableSeeker; 
@property (assign, nonatomic) IBInspectable CGFloat seekerWidth; 
@property (strong, nonatomic) IBInspectable UIColor *seekerColor; 

@end 

maintenant ouvert SgkProgressView.m, ajoutez le code suivant

#import "SgkProgressView.h" 

#define SGKDegToRad(degrees) (((degrees)/180.0) * M_PI) 
#define SGKRadToDeg(radians) (((radians) * 180.0)/M_PI) 

IB_DESIGNABLE 
@implementation SgkProgressView 

- (void)baseInit { 
    // do here initial settings. but we have already made them in IB. 
} 

- (id)initWithFrame:(CGRect)frame { 
    self = [super initWithFrame:frame]; 
    if (self) { 
     [self baseInit]; 
    } 
    return self; 
} 

- (id)initWithCoder:(NSCoder *)aDecoder { 
    self = [super initWithCoder:aDecoder]; 
    if (self) { 
     [self baseInit]; 
    } 
    return self; 
} 

- (void)drawRect:(CGRect)rect { 
    CGFloat maxAngle = 30; 
    CGFloat minAngle = 150; 

    if (maxAngle <= minAngle) 
     maxAngle += 360.0; 

    CGFloat currentAngle = ((((_currentValue - _minValue) * (maxAngle - minAngle))/(_maxValue - _minValue)) + minAngle); 

    CGPoint center = CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0); 
    CGFloat basePathRadius = MIN(center.x, center.y) - (_gaugeWidth/2.0); 

    if (_enableSeeker) 
     basePathRadius -= (_seekerWidth/2.0); 

    [self drawArcWithCenter:center radius:basePathRadius startAngle:minAngle endAngle:maxAngle withColor:_baseColor]; 

    [self drawArcWithCenter:center radius:basePathRadius startAngle:minAngle endAngle:currentAngle withColor:_normalConditionColor]; 

    if (_enableSeeker) { 
     CGFloat x = center.x + (basePathRadius * cosf(SGKDegToRad(currentAngle))); 
     CGFloat y = center.y + (basePathRadius * sinf(SGKDegToRad(currentAngle))); 
     UIBezierPath *seeker = [UIBezierPath bezierPathWithArcCenter:CGPointMake(x, y) radius:(_seekerWidth/2.0) startAngle:SGKDegToRad(0.0) endAngle:SGKDegToRad(360.0) clockwise:YES]; 
     [_seekerColor setFill]; 
     [seeker fill]; 
    } 
} 

- (void)drawArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle withColor:(UIColor *)pathColor { 
    CGFloat smallArcRadius = _gaugeWidth/2.0; 

    CGFloat x = center.x + (radius * cosf(SGKDegToRad(startAngle))); 
    CGFloat y = center.y + (radius * sinf(SGKDegToRad(startAngle))); 
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(x, y) radius:smallArcRadius startAngle:SGKDegToRad(startAngle - 180.0) endAngle:SGKDegToRad(startAngle) clockwise:YES]; 
    [path addArcWithCenter:center radius:(radius + smallArcRadius) startAngle:SGKDegToRad(startAngle) endAngle:SGKDegToRad(endAngle) clockwise:YES]; 
    x = center.x + (radius * cosf(SGKDegToRad(endAngle))); 
    y = center.y + (radius * sinf(SGKDegToRad(endAngle))); 
    [path addArcWithCenter:CGPointMake(x, y) radius:smallArcRadius startAngle:SGKDegToRad(endAngle) endAngle:SGKDegToRad(endAngle + 180.0) clockwise:YES]; 
    [path addArcWithCenter:center radius:(radius - smallArcRadius) startAngle:SGKDegToRad(endAngle) endAngle:SGKDegToRad(startAngle) clockwise:NO]; 
    [path closePath]; 
    [pathColor setFill]; 
    [path fill]; 
} 

- (void)setEnableSeeker:(BOOL)enableSeeker { 
    _enableSeeker = enableSeeker; 
    [self setNeedsDisplay]; 
} 

- (void)setSeekerWidth:(CGFloat)seekerWidth { 
    _seekerWidth = seekerWidth; 
    [self setNeedsDisplay]; 
} 

- (void)setCurrentValue:(CGFloat)currentValue { 
    _currentValue = currentValue; 
    [self setNeedsDisplay]; 
} 

- (void)setGaugeWidth:(CGFloat)gaugeWidth { 
    _gaugeWidth = gaugeWidth; 
    [self setNeedsDisplay]; 
} 

@end 

Dans votre point de vue d'ViewController, ajoutez un UIView. Définissez sa classe personnalisée en tant que SgkProgressView. Maintenant, définissez les propriétés dans l'inspecteur d'attributs comme indiqué ci-dessous.

Enfin, vous obtiendrez vue comme ci-dessous.

Vous cn changer les couleurs et autres propriétés plus tard.