iOS自定義水平滾動(dòng)條、進(jìn)度條
iOS自定義水平滾動(dòng)條、進(jìn)度條,繼承UIView,可點(diǎn)擊軌道、滑動(dòng)滑塊交互。
先看一下效果圖:

簡(jiǎn)單說一下邏輯,新建一個(gè)繼承UIView的類,分別給軌道、滑塊添加UITapGestureRecognizer點(diǎn)擊、UIPanGestureRecognizer滑動(dòng)手勢(shì)。獲取偏移量,計(jì)算控件位置,刷新視圖。
下面貼上核心代碼:
顯示視圖,在控制器調(diào)用代碼:
HWSlider *slider = [[HWSlider alloc] initWithFrame:CGRectMake(10, 50, 300, 75)]; [self.view addSubview:slider];
HWSlider:
#import <UIKit/UIKit.h>
@interface HWSlider : UIView
@property (nonatomic, assign) NSInteger score;
@end
/*** ---------------分割線--------------- ***/
#import "HWSlider.h"
#import "UIView+Additions.h"
@interface HWSlider ()
@property (nonatomic, weak) UIImageView *bubbleImage;
@property (nonatomic, weak) UIImageView *arrowImage;
@property (nonatomic, weak) UILabel *scoreLabel;
@property (nonatomic, weak) UILabel *levelLable;
@property (nonatomic, weak) UIView *trackView;
@property (nonatomic, weak) UIImageView *thumb;
@end
@implementation HWSlider
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
_score = 10;
self.backgroundColor = [UIColor whiteColor];
//氣泡圖片
UIImageView *bubbleImage = [[UIImageView alloc] initWithFrame:CGRectMake(self.bounds.size.width - 70, 0, 74, 35)];
[bubbleImage setImage:[UIImage imageNamed:@"alert_teacherEva_bubbleImage"]];
[self addSubview:bubbleImage];
_bubbleImage = bubbleImage;
//分?jǐn)?shù)標(biāo)簽
UILabel *scoreLabel = [[UILabel alloc] initWithFrame:CGRectMake(self.bounds.size.width - 71.5, 0, 74, 28)];
scoreLabel.text = @"10";
scoreLabel.textColor = [UIColor blackColor];
scoreLabel.font = [UIFont systemFontOfSize:15.f];
scoreLabel.textAlignment = NSTextAlignmentCenter;
[self addSubview:scoreLabel];
_scoreLabel = scoreLabel;
//氣泡箭頭
UIImageView *arrowImage = [[UIImageView alloc] initWithFrame:CGRectMake(self.bounds.size.width - 16.5, 26, 13, 13)];
[arrowImage setImage:[UIImage imageNamed:@"alert_teacherEva_arrowImage"]];
[self addSubview:arrowImage];
_arrowImage = arrowImage;
//軌道可點(diǎn)擊視圖(軌道只設(shè)置了5pt,通過這個(gè)視圖增加以下點(diǎn)擊區(qū)域)
UIView *tapView = [[UIView alloc] initWithFrame:CGRectMake(0, 34, self.bounds.size.width, 20)];
[tapView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)]];
[self addSubview:tapView];
//軌道背景
UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(0, 7.5, self.bounds.size.width, 5)];
backView.backgroundColor = [UIColor grayColor];
backView.layer.cornerRadius = 2.5f;
backView.layer.masksToBounds = YES;
[tapView addSubview:backView];
//軌道前景
UIView *trackView = [[UIView alloc] initWithFrame:CGRectMake(1.5, 9, self.bounds.size.width - 3, 2)];
trackView.backgroundColor = [UIColor greenColor];
trackView.layer.cornerRadius = 1.f;
trackView.layer.masksToBounds = YES;
[tapView addSubview:trackView];
_trackView = trackView;
//滑塊
UIImageView *thumb = [[UIImageView alloc] initWithFrame:CGRectMake(self.bounds.size.width - 20, 34, 20, 20)];
[thumb setImage:[UIImage imageNamed:@"alert_teacherEva_sliderImg"]];
thumb.userInteractionEnabled = YES;
thumb.contentMode = UIViewContentModeCenter;
[thumb addGestureRecognizer:[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)]];
[self addSubview:thumb];
_thumb = thumb;
//級(jí)別標(biāo)簽
UILabel *levelLable = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(thumb.frame) + 7, self.bounds.size.width, 13)];
levelLable.text = @"非常滿意";
levelLable.textColor = [UIColor blackColor];
levelLable.font = [UIFont systemFontOfSize:13.f];
levelLable.textAlignment = NSTextAlignmentCenter;
[self addSubview:levelLable];
_levelLable = levelLable;
}
return self;
}
- (void)setScore:(NSInteger)score
{
_score = score;
//刷新視圖
[self reloadViewWithThumbCeneterX:score / 10.0 * self.bounds.size.width];
}
//點(diǎn)擊滑動(dòng)條
- (void)handleTap:(UITapGestureRecognizer *)sender
{
//刷新視圖
[self reloadViewWithThumbCeneterX:[sender locationInView:self].x];
}
//滑動(dòng)滑塊
- (void)handlePan:(UIPanGestureRecognizer *)sender
{
//獲取偏移量
CGFloat moveX = [sender translationInView:self].x;
//重置偏移量,避免下次獲取到的是原基礎(chǔ)的增量
[sender setTranslation:CGPointMake(0, 0) inView:self];
//計(jì)算當(dāng)前中心值
CGFloat centerX = _thumb.centerX + moveX;
//防止瞬間大偏移量滑動(dòng)影響顯示效果
if (centerX < 10) centerX = 10;
if (centerX > self.bounds.size.width - 10) centerX = self.bounds.size.width - 10;
//刷新視圖
[self reloadViewWithThumbCeneterX:centerX];
}
- (void)reloadViewWithThumbCeneterX:(CGFloat)thumbCeneterX
{
//更新軌道前景色
_trackView.frameWidth = thumbCeneterX;
//更新滑塊位置
_thumb.centerX = thumbCeneterX;
if (_thumb.centerX < 10) {
_thumb.centerX = 10;
}else if (_thumb.centerX > self.bounds.size.width - 10) {
_thumb.centerX = self.bounds.size.width - 10;
}
//更新箭頭位置
_arrowImage.centerX = _thumb.centerX;
//更新氣泡標(biāo)簽位置(氣泡圖片寬度74,實(shí)際內(nèi)容寬度66)
_bubbleImage.centerX = _thumb.centerX;
if (_bubbleImage.centerX < 33) {
_bubbleImage.centerX = 33;
}else if (_bubbleImage.centerX > self.bounds.size.width - 33) {
_bubbleImage.centerX = self.bounds.size.width - 33;
}
//更新分?jǐn)?shù)標(biāo)簽位置
_scoreLabel.centerX = _bubbleImage.centerX;
//分?jǐn)?shù),四舍五入取整
_score = round(thumbCeneterX / self.bounds.size.width * 10);
//更新標(biāo)簽內(nèi)容
_scoreLabel.text = [NSString stringWithFormat:@"%ld", _score];
if (_score <= 3) {
_levelLable.text = @"極不滿意";
}else if (_score <= 5) {
_levelLable.text = @"不滿意";
}else if (_score <= 7) {
_levelLable.text = @"一般";
}else if (_score <= 9) {
_levelLable.text = @"滿意";
}else if (_score == 10) {
_levelLable.text = @"非常滿意";
}
}
@end
Demo 下載鏈接
猜你喜歡:自定義垂直滾動(dòng)條,可與scrollView聯(lián)動(dòng)交互。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- iOS實(shí)現(xiàn)卡片式滾動(dòng)效果 iOS實(shí)現(xiàn)電影選片效果
- iOS ScrollView嵌套tableView聯(lián)動(dòng)滾動(dòng)的思路與最佳實(shí)踐
- iOS使用UICollectionView實(shí)現(xiàn)橫向滾動(dòng)照片效果
- iOS自定義時(shí)間滾動(dòng)選擇控件
- iOS自定義可展示、交互的scrollView滾動(dòng)條
- iOS仿網(wǎng)易新聞滾動(dòng)導(dǎo)航條效果
- iOS Swift UICollectionView橫向分頁滾動(dòng),cell左右排版問題詳解
- iOS?實(shí)現(xiàn)類似抖音滾動(dòng)效果
相關(guān)文章
iOS中模態(tài)Model視圖跳轉(zhuǎn)和Push視圖跳轉(zhuǎn)的需求實(shí)現(xiàn)方法
這篇文章主要介紹了iOS中模態(tài)Model視圖跳轉(zhuǎn)和Push視圖跳轉(zhuǎn)的需求實(shí)現(xiàn),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12
iOS使用UIScorllView實(shí)現(xiàn)兩指縮放功能
兩指縮放功能不僅可以用UIPinchGestureRecognizer手勢(shì)來實(shí)現(xiàn),還能用UIScorllView來實(shí)現(xiàn),UIScrollView可以輕松的實(shí)現(xiàn)最大與最小縮放值,以及滾動(dòng)的效果,效果非常棒,具體實(shí)例代碼大家參考下本文吧2017-03-03
iOS 請(qǐng)求權(quán)限封裝類的實(shí)例代碼
下面小編就為大家分享一篇iOS 請(qǐng)求權(quán)限封裝類的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
iOS學(xué)習(xí)筆記(十六)——詳解數(shù)據(jù)庫操作(使用FMDB)
這篇文章主要介紹了iOS學(xué)習(xí)筆記(十六)——詳解數(shù)據(jù)庫操作(使用FMDB),具有一定的參考價(jià)值,有興趣的可以了解一下。2016-12-12
iOS實(shí)現(xiàn)文字轉(zhuǎn)化成彩色文字圖片
這篇文章主要為大家詳細(xì)介紹了iOS文字轉(zhuǎn)化成彩色文字圖片的實(shí)現(xiàn)方法,可以實(shí)現(xiàn)不同字體,漸變的效果,感興趣的小伙伴們可以參考一下2016-03-03

