iOS中間透明周圍不透明(鏤空)方法實現特種ProgressBar

原創 wwwwwwwwwwwwdi 2020-02-24 17:38

前言

最近由於要給APP更新UI，然後UIDesigner爲了”嚐鮮”,給我一些新的界面設計，所以我這裏也不得不再來造些另外的輪子。如果對您有幫助，麻煩Github給個star

如果有興趣的，可以移步iOS UIBezierPath繪圖相關問題,裏邊一些遇到的問題的詳細的總結

這裏先來看下今天要造的輪子
效果圖

沒錯，就是上邊的進度條。

實現

  • 先說下思路（採用的是使用MASK遮罩，然後改變底層OrangeColorLayer長度，以達到進度條長度變化的思路）
    1. 首先，我們創建一個新的類，繼承自UIView,然後，我們採用Core Graphics框架和UIBezierPath類來實現中間的進度條樣式。先來分析下進度條，可以看出來，進度條內部，有兩種顏色：橙色的TintColor，DarkGray的進度達不到的進度條顏色，然後，進度條背景色lightDarkColor,和最上層圓形中的小圓點。
    2. 我這裏的進度條，實現發方法是採用4層layer來實現：最底層，繪製DarkGray顏色的進度條，再往上一層，設置有顏色的一層layer,通過改變該層layer的寬度，已達到有顏色進度條的長度變化，再上層，是一個中間進度條輪廓透明，周圍是lightGrayColor背景色的遮罩View,最上層，是幾個進度條內部小圓的layer。採用的是使用MASK遮罩，然後改變底層OrangeColorLayer長度，以達到進度條長度變化的思路

  • 這裏代碼
    1.先看下暴露出來的API接口

    @interface RRMyMaterialProgressBar : UIView
//一共項數
//@property (nonatomic,assign) CGFloat totalStepsCounts;

@property (nonatomic,strong) CAShapeLayer *firstArc;

@property (nonatomic,strong) CAShapeLayer *secondArc;

@property (nonatomic,strong) CAShapeLayer *thirdArc;

@property (nonatomic,strong) CAShapeLayer *forthArc;

//當前進度
@property (nonatomic,assign) CGFloat currentPercentage;
//渲染顏色
//@property (nonatomic,strong) UIColor *progressBarTintColor;

- (instancetype)initWithFrame:(CGRect)frame totalStepsCounts:(CGFloat)steps progressBarTintColor:(UIColor *)tintClr;

@end

PS：

這裏是有一些問題的，最開始的時候，我是在drawRect方法中實現的，然後把總共的圓形個數，和進度條的渲染顏色都作爲了外部屬性，也是能實現的，但是：有些問題：考慮下我們的使用場景：一般我們都是在外層VC的viewWillAppear或者viewDidLoad方法中設置這個progressBar的進度，但是！如果在drawRect方法中實現的話，此時，內部的各個layer都還沒有初始化，全部都是nil，如果在viewDidAppear方法中設置的話，會有一個BUG：剛進到頁面內的時候，會看到進度條的進度是100%的，（因爲默認創建ColorLayer的時候是設置的整個Frame的）,然後，調用外層viewDidAppear方法設置進度條的進度Layer長度，此時，進度條纔會又從頭開始顯示。這麼一來，用戶體驗就不是太好了。

所以，我又優化了一下：progressBarView 初始化的時候，就來繪製這些內層layer,以此來保證外部VC調用viewWillAppear或者viewDidLoad方法的時候，內層progressBar內的各個實例都已經ALLOC,並且可以設置他們。(所以，以前的totalStepsCounts和progressBarTintColor都可以設置爲私有變量),然後我們直接在初始化方法中傳入參數以賦值。

#import "RRMyMaterialProgressBar.h"

@interface RRMyMaterialProgressBar()

@property (nonatomic,strong) CALayer *backColorLayer;

@property (nonatomic,strong) CAShapeLayer *middleDarkArcLayer;

@property (nonatomic,strong) CAShapeLayer *foregroundMaskLayer;


//渲染顏色
@property (nonatomic,strong) UIColor *progressBarTintColor;

//上一次的比例
@property (nonatomic,assign) CGFloat lastPercentage;

//一共項數
@property (nonatomic,assign) CGFloat totalStepsCounts;

@end

@implementation RRMyMaterialProgressBar

- (instancetype)initWithFrame:(CGRect)frame totalStepsCounts:(CGFloat)steps progressBarTintColor:(UIColor *)tintClr{
    if (self == [super initWithFrame:frame]) {
        self.progressBarTintColor = tintClr;
        self.totalStepsCounts = steps;
        [self setupSubLayersWithFrame:frame];
    }
    return self;
}


- (void)setupSubLayersWithFrame:(CGRect)rect {
    self.layer.backgroundColor = [UIColor redColor].CGColor;

    //左右兩側的距離
    CGFloat padding = 10.f;
    //外圓的半徑
    CGFloat arcRadius = 7.f;
    //中間線的線寬
    CGFloat middleLineWidth = 1.f;
    //內層圓按鈕半徑
    CGFloat innerArcRadius = 4.f;
    CGFloat viewWidth = rect.size.width;
    CGFloat viewHeight = rect.size.height;


    double arcSinValue = middleLineWidth/arcRadius;
    double radian = asin(arcSinValue);

    double tanValue = tan(radian);

    CGFloat arcTanLength = middleLineWidth/tanValue;

    CGFloat middleLineDistance = (viewWidth - 2 * padding - arcRadius * 2 - (self.totalStepsCounts * 2 - 2) * arcTanLength)/(self.totalStepsCounts - 1);


    self.middleDarkArcLayer = [CAShapeLayer layer];
    UIBezierPath *middleDrakColorPath = [UIBezierPath bezierPath];
    [middleDrakColorPath moveToPoint:CGPointMake(padding, viewHeight/2)];
    [middleDrakColorPath addArcWithCenter:CGPointMake(padding + arcRadius, viewHeight/2) radius:arcRadius startAngle:M_PI endAngle:2*M_PI - radian clockwise:YES];
    [middleDrakColorPath addLineToPoint:CGPointMake(padding + arcRadius +arcTanLength + middleLineDistance, viewHeight/2 - middleLineWidth/2)];
    [middleDrakColorPath addArcWithCenter:CGPointMake(padding + arcRadius +arcTanLength * 2 + middleLineDistance, viewHeight/2) radius:arcRadius startAngle:M_PI + radian endAngle:2 * M_PI - radian clockwise:YES];
    [middleDrakColorPath addLineToPoint:CGPointMake(padding + arcRadius + 3 * arcTanLength + middleLineDistance * 2, viewHeight/2 - middleLineWidth/2)];
    [middleDrakColorPath addArcWithCenter:CGPointMake(padding + arcRadius + 4 * arcTanLength + middleLineDistance * 2, viewHeight/2) radius:arcRadius startAngle:M_PI + radian endAngle:2 * M_PI - radian clockwise:YES];
    [middleDrakColorPath addLineToPoint:CGPointMake(padding + arcRadius + 5 * arcTanLength + middleLineDistance * 3, viewHeight/2 - middleLineWidth/2)];
    [middleDrakColorPath addArcWithCenter:CGPointMake(padding + arcRadius + 6 * arcTanLength + middleLineDistance * 3, viewHeight/2) radius:arcRadius startAngle:M_PI + radian endAngle:3 * M_PI - radian clockwise:YES];
    [middleDrakColorPath addLineToPoint:CGPointMake(padding + arcRadius + 5 * arcTanLength + middleLineDistance * 2, viewHeight/2 + middleLineWidth/2)];
    [middleDrakColorPath addArcWithCenter:CGPointMake(padding + arcRadius + 4 * arcTanLength + middleLineDistance * 2, viewHeight/2) radius:arcRadius startAngle:radian endAngle:M_PI - radian clockwise:YES];
    [middleDrakColorPath addLineToPoint:CGPointMake(padding + arcRadius + 3 * arcTanLength + middleLineDistance, viewHeight/2 + middleLineWidth/2)];
    [middleDrakColorPath addArcWithCenter:CGPointMake(padding + arcRadius + 2 * arcTanLength + middleLineDistance, viewHeight/2) radius:arcRadius startAngle:radian endAngle:M_PI - radian clockwise:YES];
    [middleDrakColorPath addLineToPoint:CGPointMake(padding + arcRadius + arcTanLength, viewHeight/2 + middleLineWidth/2)];
    [middleDrakColorPath addArcWithCenter:CGPointMake(padding + arcRadius, viewHeight/2) radius:arcRadius startAngle:radian endAngle:M_PI - radian clockwise:YES];
    [middleDrakColorPath closePath];

    self.middleDarkArcLayer.fillColor = RGB(203, 204, 205).CGColor;
    self.middleDarkArcLayer.path = middleDrakColorPath.CGPath;
    [self.layer addSublayer:self.middleDarkArcLayer];


    //MARK: 顏色層layer
    self.backColorLayer = [CALayer layer];
    self.backColorLayer.frame = CGRectMake(0, 0, viewWidth, viewHeight);
    self.backColorLayer.backgroundColor = self.progressBarTintColor.CGColor;
    self.backColorLayer.position = CGPointMake(0, viewHeight/2);
    self.backColorLayer.anchorPoint = CGPointMake(0, 0.5);
    [self.layer addSublayer:self.backColorLayer];


    self.foregroundMaskLayer = [CAShapeLayer layer];
    //MARK: 使用UIBezierPath 繪製遮擋VIEW的路徑
    UIBezierPath *outerPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0,0, rect.size.width, rect.size.height) cornerRadius:rect.size.height/2];

    UIBezierPath *colorPath = [UIBezierPath bezierPath];
    [colorPath moveToPoint:CGPointMake(padding, viewHeight/2)];
    [colorPath addArcWithCenter:CGPointMake(padding + arcRadius, viewHeight/2) radius:arcRadius startAngle:M_PI endAngle:2*M_PI - radian clockwise:YES];
    [colorPath addLineToPoint:CGPointMake(padding + arcRadius +arcTanLength + middleLineDistance, viewHeight/2 - middleLineWidth/2)];
    [colorPath addArcWithCenter:CGPointMake(padding + arcRadius +arcTanLength * 2 + middleLineDistance, viewHeight/2) radius:arcRadius startAngle:M_PI + radian endAngle:2 * M_PI - radian clockwise:YES];
    [colorPath addLineToPoint:CGPointMake(padding + arcRadius + 3 * arcTanLength + middleLineDistance * 2, viewHeight/2 - middleLineWidth/2)];
    [colorPath addArcWithCenter:CGPointMake(padding + arcRadius + 4 * arcTanLength + middleLineDistance * 2, viewHeight/2) radius:arcRadius startAngle:M_PI + radian endAngle:2 * M_PI - radian clockwise:YES];
    [colorPath addLineToPoint:CGPointMake(padding + arcRadius + 5 * arcTanLength + middleLineDistance * 3, viewHeight/2 - middleLineWidth/2)];
    [colorPath addArcWithCenter:CGPointMake(padding + arcRadius + 6 * arcTanLength + middleLineDistance * 3, viewHeight/2) radius:arcRadius startAngle:M_PI + radian endAngle:3 * M_PI - radian clockwise:YES];
    [colorPath addLineToPoint:CGPointMake(padding + arcRadius + 5 * arcTanLength + middleLineDistance * 2, viewHeight/2 + middleLineWidth/2)];
    [colorPath addArcWithCenter:CGPointMake(padding + arcRadius + 4 * arcTanLength + middleLineDistance * 2, viewHeight/2) radius:arcRadius startAngle:radian endAngle:M_PI - radian clockwise:YES];
    [colorPath addLineToPoint:CGPointMake(padding + arcRadius + 3 * arcTanLength + middleLineDistance, viewHeight/2 + middleLineWidth/2)];
    [colorPath addArcWithCenter:CGPointMake(padding + arcRadius + 2 * arcTanLength + middleLineDistance, viewHeight/2) radius:arcRadius startAngle:radian endAngle:M_PI - radian clockwise:YES];
    [colorPath addLineToPoint:CGPointMake(padding + arcRadius + arcTanLength, viewHeight/2 + middleLineWidth/2)];
    [colorPath addArcWithCenter:CGPointMake(padding + arcRadius, viewHeight/2) radius:arcRadius startAngle:radian endAngle:M_PI - radian clockwise:YES];

    [outerPath appendPath:colorPath];
    [outerPath setUsesEvenOddFillRule:YES];


    self.foregroundMaskLayer.path = outerPath.CGPath;
    self.foregroundMaskLayer.fillRule = kCAFillRuleEvenOdd;
    self.foregroundMaskLayer.fillColor = RGB(221, 221, 221).CGColor;
    [self.layer addSublayer:self.foregroundMaskLayer];

    //MARK: 第一個內部圓
    self.firstArc = [CAShapeLayer layer];
    UIBezierPath *arcPath1 = [UIBezierPath bezierPath];
    [arcPath1 addArcWithCenter:CGPointMake(padding + arcRadius, viewHeight/2) radius:innerArcRadius startAngle:0 endAngle:2 * M_PI clockwise:1];
    self.firstArc.path = arcPath1.CGPath;
    self.firstArc.fillColor = RGB(221, 221, 221).CGColor;
    [self.layer addSublayer:self.firstArc];


    //MARK: 第二個內部圓
    self.secondArc = [CAShapeLayer layer];
    UIBezierPath *arcPath2 = [UIBezierPath bezierPath];
    [arcPath2 addArcWithCenter:CGPointMake(padding + arcRadius + arcTanLength + middleLineDistance + arcTanLength, viewHeight/2) radius:innerArcRadius startAngle:0 endAngle:2 * M_PI clockwise:1];
    self.secondArc.path = arcPath2.CGPath;
    self.secondArc.fillColor = RGB(221, 221, 221).CGColor;
    [self.layer addSublayer:self.secondArc];


    //MARK: 第三個內部圓
    self.thirdArc = [CAShapeLayer layer];
    UIBezierPath *arcPath3 = [UIBezierPath bezierPath];
    [arcPath3 addArcWithCenter:CGPointMake(padding + arcRadius + arcTanLength + middleLineDistance + arcTanLength + arcTanLength + middleLineDistance + arcTanLength, viewHeight/2) radius:innerArcRadius startAngle:0 endAngle:2 * M_PI clockwise:1];
    self.thirdArc.path = arcPath3.CGPath;
    self.thirdArc.fillColor = RGB(221, 221, 221).CGColor;
    [self.layer addSublayer:self.thirdArc];


    //MARK: 第四個內部圓
    self.forthArc = [CAShapeLayer layer];
    UIBezierPath *arcPath4 = [UIBezierPath bezierPath];
    [arcPath4 addArcWithCenter:CGPointMake(padding + arcRadius + arcTanLength + middleLineDistance + arcTanLength + arcTanLength + middleLineDistance + arcTanLength + arcTanLength + middleLineDistance + arcTanLength, viewHeight/2) radius:innerArcRadius startAngle:0 endAngle:2 * M_PI clockwise:1];
    self.forthArc.path = arcPath4.CGPath;
    self.forthArc.fillColor = RGB(221, 221, 221).CGColor;
    [self.layer addSublayer:self.forthArc];
}


- (void)setCurrentPercentage:(CGFloat)currentPercentage {
    _currentPercentage = currentPercentage;

    CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
    animate.fromValue = self.lastPercentage == 0 ? @(0) : @(self.lastPercentage);        
    animate.toValue = @(currentPercentage);
    animate.repeatCount = 1;
    animate.autoreverses = NO;
    animate.duration = 1.f;
    animate.removedOnCompletion = NO;
    animate.fillMode = kCAFillModeForwards;
    [self.backColorLayer addAnimation:animate forKey:@"progressAnimation"];

    self.lastPercentage = currentPercentage;

}

另外

整個進度條並不是圓形是環形的，如果有UI需求，我們可以通過設置API接口中的四個shapeLayer的fillColor值來改變內部小圓的顏色的

self.forthArc.fillColor = [UIColor yourWantedColor].CGColor;

這裏有些參考資料
都是關於view中間鏤空周圍不是空的

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

關於bundle的小知識

UINib *nib = [UINibnibWithNibName:@"selectFooterView"bundle:nil]; 當bundle參數填nil時，默認會傳[NSBundle mainBundle]

小葡萄没有皮 2020-07-08 09:38:20

#warning的用處

爲了在下班後的第二天 提示你#warning標記的地方 你並沒有完成。 爲了在N多天後      提示你#warning標記的地方 你並沒有完成。

小葡萄没有皮 2020-07-08 09:38:20

編譯時 報錯處理（二）id類型

NSInteger i = sender.tag; property tag not found on object of type __strong id 報錯原因：id類型不能使用點語法 解決方式一：     // 利用get方法

小葡萄没有皮 2020-07-08 09:38:20

webView去掉拖拽市的黑灰背景色

第一種： for (UIScrollView* viewin self.webView.subviews)     {         if ([viewisKindOfClass:[UIScrollViewclass]])  

小葡萄没有皮 2020-07-08 09:38:20

支付寶與svn衝突

當我集成完支付寶，提交SVN時，報錯如下： server sent unexpected return value (405 method not allowed) 目前的解決辦法就是，不提交openssl和util這兩個文件夾。 而是

小葡萄没有皮 2020-07-08 09:38:20

iOS 支付寶支付集成（未編輯完）

1、假設已經有了apikey、私鑰 2、下載demo  https://doc.open.alipay.com/doc2/detail.htm?treeId=54&articleId=104509&docType=1       下載上面

小葡萄没有皮 2020-07-08 09:38:20

webView接入本地html圖片 解決不顯示問題

1.注意添加方式即可 2.2017.02.22更新 項目有了新的html 同時新的img和css 我加進去後，img和css都沒加載成功。 研究了一會發現有兩點需要注意： a.兩個img和兩個css不要同名，最好各自帶

小葡萄没有皮 2020-07-08 09:38:20

005-NSDictionary

NSArray和NSMutableArray存儲數據是將每一個元素挨個存儲到數組中，但是NSMutableArray如果刪除。新增元素後，這個元素後面的元素對應的下標就會發生變化，所以NSMutableArray的缺點時下標不可靠。爲此

子非墨也 2020-07-08 07:14:45

欲瘦其包，必先探清其底細

簡介：包大小增量分析作者：閒魚技術-金喏1.背景  不知大家是否注意到，閒魚的包大小在隨着服務用戶的增多和新業務的持續迭代不斷增長。在過去的半年時間，Android端包大小漲了43%，iOS端也漲了26%，若再不加管控，按照目前的

阿里技术官方号 2020-07-08 00:43:28

iOS瘋狂詳解之TableView以及TableViewCell背景設置

TableViewCell背景設置 -(void)tableView:(UITableView *)tableViewwillDisplayCell:(UITableViewCell *)cellforRowAtIndexPath:(NS

吊炸天-狂人 2020-07-07 21:45:48

iOS瘋狂詳解之將攝像頭捕獲的視頻數據轉爲jpeg格式

想要將攝像頭進行視頻錄製或者拍照可以用UIImagePickerController，不過UIImagePickerController會彈出一個自己的界面，可是有時候我們不想要彈出的這個界面，那麼就可以用另一種方法來獲取攝像頭得到的數據

吊炸天-狂人 2020-07-07 21:45:48

iOS瘋狂詳解之多線程GCD

Grand Central Dispatch (GCD)是Apple開發的一個多核編程的解決方法。 dispatch queue分成以下三種： 1）運行在主線程的Main queue，通過dispatch_get_main_queue獲取

吊炸天-狂人 2020-07-07 21:45:48

iOS瘋狂詳解之設備前後攝像頭切換

#import <AVFoundation/AVFoundation.h>   // Switching between front and back cameras   - (AVCaptureDevice *)cameraWith

吊炸天-狂人 2020-07-07 21:45:47

iOS瘋狂詳解之中如何添加應用自己的字體

1.第一步找到你想用的字體的 ttf 格式。加入到你的工程的resouce目錄下。 2.在工程的plist中AddRow，“Fonts provided by application” ，然後添加key爲item0，value爲你剛纔加

吊炸天-狂人 2020-07-07 21:45:47

iOS瘋狂詳解之自動佈局（autolayout）下圖片編輯器的實現

在大部分APP（尤其是社交類的，如qq）經常會有更換頭像的場景：點擊用戶加載頭像，加載出系統圖片，用戶點擊選中某張圖片之後，可以對圖片進行放縮和拖動，已更改圓形裁剪框圈定的圖片部分。如下圖即爲qq的頭像選取編輯界面： 圖1.qq照片編

吊炸天-狂人 2020-07-07 21:45:37