iOS使用UIBezierPath實(shí)現(xiàn)ProgressView
使用UIBezierPath實(shí)現(xiàn)ProgressView實(shí)現(xiàn)的效果如下:
界面采用UITableView和TabelViewCell的實(shí)現(xiàn),紅色的視圖采用UIBezierPath繪制.注意紅色的部分左上角,左下角是直角喲!!!!不多說<這里才是用UIBezierPath實(shí)現(xiàn)的真正愿意啦!!!😆>,代碼如下:
控制器代碼:
// // ViewController.m // ProgressViewDemo // // Created by 思 彭 on 2017/4/20. // Copyright © 2017年 思 彭. All rights reserved. // #import "ViewController.h" #import "ProgressTableViewCell.h" @interface ViewController ()<UITableViewDelegate, UITableViewDataSource> @property (nonatomic, strong) UITableView *tableView; @property (nonatomic, strong) CAShapeLayer *layer; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.navigationItem.title = @"ProgressDemo"; [self setUI]; } #pragma mark - 設(shè)置界面 - (void)setUI { self.tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStyleGrouped]; self.tableView.delegate = self; self.tableView.dataSource = self; self.tableView.backgroundColor = [UIColor clearColor]; // 注冊cell [self.tableView registerClass:[ProgressTableViewCell class] forCellReuseIdentifier:@"cell"]; self.tableView.tableFooterView = [[UIView alloc]init]; [self.view addSubview:self.tableView]; } #pragma mark - UITableViewDataSource - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return 5; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { ProgressTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath]; return cell; } #pragma mark - UITableViewDelegate - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 0.001f;; } - (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section { return 0.0001f; } - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 44; } @end
TabelViewCell代碼:
// // ProgressTableViewCell.m // ProgressViewDemo // // Created by 思 彭 on 2017/4/21. // Copyright © 2017年 思 彭. All rights reserved. // #import "ProgressTableViewCell.h" #import "Masonry.h" #import "ProgressView.h" @interface ProgressTableViewCell () @property (nonatomic, strong) UILabel *titleLabel; @property (nonatomic, strong) ProgressView *progressView; @property (nonatomic, strong) UILabel *numberLabel; @end @implementation ProgressTableViewCell - (void)awakeFromNib { [super awakeFromNib]; // Initialization code } - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) { [self createSubViews]; [self layOut]; } return self; } - (void)createSubViews { self.titleLabel = [[UILabel alloc]init]; self.titleLabel.font = [UIFont systemFontOfSize:16]; self.titleLabel.text = @"西單大悅城"; self.titleLabel.textAlignment = NSTextAlignmentLeft; [self.contentView addSubview:self.titleLabel]; self.progressView = [[ProgressView alloc]init]; self.progressView.backgroundColor = [UIColor whiteColor]; self.progressView.progress = arc4random_uniform(100) + 40; [self.contentView addSubview:self.progressView]; self.numberLabel = [[UILabel alloc]init]; self.numberLabel.font = [UIFont systemFontOfSize:16]; self.numberLabel.text = @"¥2000"; self.numberLabel.textAlignment = NSTextAlignmentRight; [self.contentView addSubview:self.numberLabel]; } - (void)layOut { [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.left.mas_equalTo(self.contentView).offset(10); make.centerY.mas_equalTo(self.contentView); // make.width.greaterThanOrEqualTo(@(70)); make.width.mas_equalTo(self.contentView.frame.size.width * 0.3); }]; [self.progressView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.mas_equalTo(self.titleLabel.mas_right).offset(10); make.height.mas_equalTo(20); make.centerY.mas_equalTo(self.titleLabel.mas_centerY); make.width.mas_equalTo(self.contentView.frame.size.width * 0.4); }]; [self.numberLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.left.mas_equalTo(self.progressView.mas_right).offset(10); make.centerY.mas_equalTo(self.contentView); make.right.mas_equalTo(self.contentView).offset(-10); }]; } @end
ProgressView代碼:
// // ProgressView.m // ProgressViewDemo // // Created by 思 彭 on 2017/4/20. // Copyright © 2017年 思 彭. All rights reserved. // #import "ProgressView.h" @interface ProgressView () @end @implementation ProgressView -(void)drawRect:(CGRect)rect{ // 創(chuàng)建貝瑟爾路徑 /* CGFloat width = self.progress / rect.size.width * rect.size.width; // 顯示的寬度 = 服務(wù)器返回的數(shù)值 / 設(shè)置的總寬度 * 滿值; 顯示的寬度= 滿值 * 比例值 比例值 = 服務(wù)器返回的寬度 / 滿值 */ CGFloat width = rect.size.width * self.progress / rect.size.width; // 顯示的寬度 = 服務(wù)器返回的數(shù)值 * 設(shè)置的總寬度 / 滿值; UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, width, rect.size.height) byRoundingCorners:UIRectCornerTopRight|UIRectCornerBottomRight cornerRadii:CGSizeMake(rect.size.height, rect.size.height)]; [[UIColor redColor] setFill]; [path fill]; } - (void)setProgress:(CGFloat)progress{ _progress = progress; // 重繪,系統(tǒng)會先創(chuàng)建與view相關(guān)聯(lián)的上下文,然后再調(diào)用drawRect [self setNeedsDisplay]; } @end
是不是超級簡單。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
WKWebview非全屏自動播放h5視頻的實(shí)現(xiàn)方法(Swift、OC)
這篇文章主要給大家介紹了關(guān)于WKWebview非全屏自動播放h5視頻的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05IOS 下獲取 rootviewcontroller 的版本不同的問題解決辦法
這篇文章主要介紹了IOS 下獲取 rootviewcontroller 的版本不同的問題解決辦法的相關(guān)資料,希望通過本文能幫助到大家,讓大家遇到這種問題可以解決,需要的朋友可以參考下2017-10-10iOS實(shí)現(xiàn)設(shè)備判斷是否安裝相關(guān)地圖(百度、高德等)
這篇文章主要給大家介紹了關(guān)于iOS如何實(shí)現(xiàn)設(shè)備判斷是否安裝相關(guān)地圖,比如百度、高德等,其實(shí)實(shí)現(xiàn)的方法還是很簡單,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友下面來一起看看吧。2018-01-01在IOS中為什么使用多線程及多線程實(shí)現(xiàn)的三種方法
這篇文章給大家介紹在IOS中為什么使用多線程及多線程實(shí)現(xiàn)的三種方法,基本上使用這三種方法實(shí)現(xiàn)多線程(NSThread Grand Centeral Dispatch(GCD) NSOperation和NSOperationQueue),感興趣的朋友可以參考下本篇文章2015-11-11舉例講解設(shè)計模式中的原型模式在iOS應(yīng)用開發(fā)中的作用
這篇文章主要介紹了設(shè)計模式中的原型模式在iOS應(yīng)用開發(fā)中的作用,示例代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-04-04