iOS自定義水平滾動條 進度條

2022-10-06 16:42:19 字數 2102 閱讀 5625

ios自定義水平滾動條、進度條,繼承uiview,可點選軌道、滑動滑塊互動。

先看一下效果圖:

簡單說一下邏輯,新建乙個繼承uiview的類,分別給軌道、滑塊新增uitapgesturerecognizer點選、uipangesturerecognizer滑動手勢。獲取偏移量,計算控制項位置,重新整理檢視。

下面貼上核心**:

顯示檢視,在控制器呼叫**:

hwslider *slider = [[hwslider alloc] initwithframe:cgrectmake(10, 50, 300, 75)];

[self.view addsubview:slider];

hwslider:

#import

@inte***ce hwslider : uiview

@property (nonatomic, assign) nsinteger score;

@end

/*** ---------------分割線--------------- ***/

#import "hwslider.h"

#import "uiview+additions.h"

@inte***ce 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

return self;}

- (void)setscore:(nsinteger)score

//點選滑動條

- (void)handletap:(uitapgesturerecognizer *)sender

//滑動滑塊

- (void)handlepan:(uipangesturerecognizer *)sender

- (void)reloadviewwiththumbceneterx:(cgfloat)thumbceneterx

else if (_thumb.centerx > self.bounds.size.width - 10)

//更新箭頭位置

_arrowimage.centerx = _thumb.centerx;

//更新氣泡標籤位置(氣泡寬度74,實際內容寬度66)

_bubbleimage.centerx = _thumb.centerx;

if (_bubbleimage.centerx < 33) else if (_bubbleimage.centerx > self.bounds.size.width - 33)

//更新分數標籤位置

_scorelabel.centerx = _bubbleimage.centerx;

//分數,四捨五入取整

_score = round(thumbceneterx / self.bounds.size.width * 10);

//更新標籤內容

_scorelabel.text = [nsstring stringwithformat:@"%ld", _score];

if (_score <= 3) else if (_score <= 5) else if (_score <= 7) else if (_score <= 9) else if (_score == 10) }

@end

demo **鏈結

猜你喜歡:自定義垂直滾動條,可與scrollview聯動互動。

本文標題: ios自定義水平滾動條、進度條

本文位址:

iOS 自定義進度條

1.建立mtprocessview,並繼承自uibutton mtprocessview.h import inte ce mtprocessview uibutton 進度 property nonatomic,assign float process endmtprocessview.m實現 i...

iOS 自定義進度條

1.建立mtprocessview,並繼承自uibutton mtprocessview.h import inte ce mtprocessview uibutton 進度 property nonatomic,assign float process end mtprocessview.m實現 ...

iOS 自定義進度條

1.建立mtprocessview,並繼承自uibutton mtprocessview.h import inte ce mtprocessview uibutton 進度 property nonatomic,assign float process end mtprocessview.m實現 ...