如何在ios中實現seecarc（半圓形seekbar）？

Question

我想實現具有進度百分比的半圓搜索欄，如下圖所示。

Answer 1

好的。非常艱難嗯。但嚴重不。相信我！ 沒有。只需使用下面的代碼。

創建從UIView繼承的類（例如，SgkProgressView）。

現在打開SgkProgressView.h，並添加以下代碼

#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 

現在打開SgkProgressView.m，添加以下代碼

#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 

現在在你的ViewController的查看，添加一個UIView的。將其自定義類設置爲SgkProgressView。現在在屬性檢查器中設置屬性，如下所示。

最後你會得到像下面視圖。

你改變cn的顏色和其他性能更高版本。