UIScrollView有自己默認(rèn)的滾動(dòng)條锅必，可設(shè)置隱藏和顯示，但是有時(shí)候這個(gè)默認(rèn)的滾動(dòng)條沒辦法滿足我們的需求，那這時(shí)候只能通過自定義來實(shí)現(xiàn)了秉犹。 實(shí)現(xiàn)自定義滾動(dòng)條需要解決的主要問題是：
在scrollview滾動(dòng)的過程中如何改變滾動(dòng)條的位置，進(jìn)而確保滾動(dòng)條和scrollView在相同時(shí)間內(nèi)走完自己的位移稚晚，只要把這個(gè)問題解決好了崇堵，那我們就可以優(yōu)雅的自定義滾動(dòng)條了。
那如何解決這個(gè)滾動(dòng)條的當(dāng)前滾動(dòng)位移呢客燕？我們知道鸳劳，UIScrollView有一個(gè)滾動(dòng)范圍，滾動(dòng)條也有一個(gè)滾動(dòng)范圍也搓，也就是說兩者的最大的滾動(dòng)位移是固定的赏廓，那要想兩者在相同時(shí)間內(nèi)走完自己的位移，只需要確保兩者的當(dāng)前滾動(dòng)位移和總位移之比一致就行傍妒。也就是說：
scrollView的當(dāng)前位移/scrollView的總位移=滾動(dòng)條的當(dāng)前位移/滾動(dòng)條的總位移
得到這個(gè)關(guān)系后幔摸，想要知道滾動(dòng)條的當(dāng)前位移，就不是什么難事了颤练。我們可以通過UIScrollView的代理方法獲取scrollview的當(dāng)前滾動(dòng)位移既忆，scrollview的總位移和滾動(dòng)條的總位移是固定的，那顯然我們可以方便的得出滾動(dòng)條的當(dāng)前位移，這樣尿贫，得到了滾動(dòng)條的當(dāng)前位移电媳，我們就可以通過改變滾動(dòng)條的frame，進(jìn)而實(shí)現(xiàn)讓滾動(dòng)條跟隨scrollview滾動(dòng)庆亡。
但是這里需要注意一點(diǎn)匾乓，因?yàn)檫@個(gè)位移是相對(duì)位移，所以在修改滾動(dòng)條的frame時(shí)又谋，要記得加上滾動(dòng)條距離相對(duì)的參考系的左邊距離拼缝，這樣才是其真正的位移。比如現(xiàn)在滾動(dòng)條的x是從屏幕左邊15開始的彰亥，滾動(dòng)條的滾動(dòng)范圍是屏幕寬度減去30咧七，那么當(dāng)你以屏幕寬度減去30這個(gè)數(shù)值作為滾動(dòng)條的滾動(dòng)總位移，進(jìn)而算出滾動(dòng)條的當(dāng)前位移時(shí)任斋，需要加上距離左邊的15才是滾動(dòng)條真正的位移继阻。
接下來看一下代碼的具體實(shí)現(xiàn)吧：
一、創(chuàng)建scrollview：(記得簽代理UIScrollViewDelegate)
-(UIScrollView *)scrollView{
if (!_scrollView) {
_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 164, self.view.frame.size.width, 233)];
_scrollView.delegate = self;
_scrollView.scrollEnabled = YES;
_scrollView.bounces = NO;
_scrollView.showsHorizontalScrollIndicator=NO;
_scrollView.layer.shadowColor = [UIColor redColor].CGColor;//shadowColor陰影顏色
_scrollView.layer.shadowOffset = CGSizeMake(0,0);//shadowOffset陰影偏移,x向右偏移废酷，y向下偏移
_scrollView.layer.shadowOpacity = 0.5;//陰影透明度瘟檩，默認(rèn)0
_scrollView.layer.shadowRadius = 3;//陰影半徑，默認(rèn)3
}
return _scrollView;
}
二澈蟆、創(chuàng)建自定義的滾動(dòng)條以及在scrollview上加點(diǎn)內(nèi)容：
-(void)loadView{
[super loadView];
[self.view addSubview:self.scrollView];
slideBackView=[[UIView alloc] initWithFrame:CGRectMake(15, _scrollView.frame.origin.y+_scrollView.frame.size.height+20, self.view.frame.size.width-30, 8)];
[self.view addSubview:slideBackView];
slideBackView.backgroundColor = [UIColor colorWithRed:0.91 green:0.91 blue:0.91 alpha:1.00];
slideBackView.layer.cornerRadius = 4;
sliderView = [[UIView alloc] init];
[self.view addSubview:sliderView];
sliderView.frame=CGRectMake(slideBackView.frame.origin.x, slideBackView.frame.origin.y+(slideBackView.frame.size.height-7 )/2, 40 , 7 );
sliderView.backgroundColor =[UIColor colorWithRed:0.12 green:0.72 blue:0.88 alpha:1.00];
sliderView.layer.cornerRadius = 3.5;
NSArray *textDesArr=@[@"? 產(chǎn)品戰(zhàn)略規(guī)劃：市場(chǎng)目標(biāo)墨辛、用戶目標(biāo)、關(guān)鍵成功要素分析趴俘、管理和運(yùn)用自己的資源來達(dá)成目標(biāo)\n? 產(chǎn)品戰(zhàn)略實(shí)施：有損原則睹簇、平衡原則、聚焦原則\n? 產(chǎn)品需求文檔：實(shí)例講解寥闪，牛逼的需求文檔是怎么誕生的\n? 主動(dòng)：戰(zhàn)略思考太惠、資源爭(zhēng)取\n? 推動(dòng)：項(xiàng)目立項(xiàng)、迭代跟蹤\n? 溝通：上傳下達(dá)疲憋、思想一統(tǒng)\n? 平衡：各方協(xié)調(diào)垛叨、跨部溝通\n? 把控：管理得法、取舍有道",
@"? 用戶思維：具體案例解析\n? 運(yùn)營(yíng)思維：具體案例解析\n? 數(shù)據(jù)思維：具體案例解析\n? 產(chǎn)品經(jīng)理的用研能力模型\n? 用戶研究基本概念解析\n? 用研基礎(chǔ)搭建及建設(shè)\n? 用研人員分工及工作職責(zé)細(xì)分"
@"? 常用用戶研究方法詳解\n? 桌面研究柜某、定性研究嗽元、定量研究三種方法舉例講解及詳細(xì)步驟解析\n? 卡諾模型\n? 戰(zhàn)略級(jí)的市場(chǎng)及用戶研究\n? 以科學(xué)的方法在產(chǎn)品整個(gè)生命周期中進(jìn)行“研究”",
@"? 品生命周期用戶研究側(cè)重點(diǎn)以及研究方法解讀\n? 產(chǎn)品用研規(guī)劃建立\n? 在產(chǎn)品不同生命周期，側(cè)重不同用研方法喂击，更準(zhǔn)確進(jìn)行產(chǎn)品迭代",
@"? 格局：大格局思維剂癌，聚焦做實(shí)事\n? 決策：讓瑣碎的運(yùn)營(yíng)變有趣，“舍得”之道\n? owner精神：有狼性\n? 敏銳：“細(xì)節(jié)”出真知\n? 商業(yè)素養(yǎng)",
@"? 高情商：做個(gè)讓人感覺“舒適”的資深運(yùn)營(yíng)\n? 凝聚力：1+1>2翰绊，善用團(tuán)隊(duì)用人所長(zhǎng)佩谷，沒有完美的個(gè)人旁壮，只有優(yōu)秀的團(tuán)隊(duì)\n? 影響力：在互聯(lián)網(wǎng)領(lǐng)域成為運(yùn)營(yíng)專家，沉淀經(jīng)驗(yàn)谐檀，讓成功有跡可循\n? 知識(shí)傳承力：資深運(yùn)營(yíng)的價(jià)值抡谐，不是個(gè)人優(yōu)秀，而是讓人人優(yōu)秀桐猬。",
@"? 數(shù)據(jù)運(yùn)營(yíng)體系的構(gòu)成\n? 數(shù)據(jù)規(guī)范與平臺(tái)\n? 數(shù)據(jù)運(yùn)營(yíng)體系結(jié)構(gòu)\n? 數(shù)據(jù)數(shù)據(jù)平臺(tái)構(gòu)建\n? 核心數(shù)據(jù)指標(biāo)\n? 移動(dòng)端產(chǎn)品數(shù)據(jù)埋點(diǎn)范例\n? 數(shù)據(jù)需求指標(biāo)\n? 產(chǎn)品關(guān)鍵數(shù)據(jù)\n? 數(shù)據(jù)運(yùn)營(yíng)體系的構(gòu)成",
];
NSInteger contentCount=textDesArr.count;
for (NSInteger i = 0; i <contentCount; i++) {
UILabel *textDesLabel=[[UILabel alloc] initWithFrame:CGRectMake(10+190 *i,0, 180 , 233 )];
[_scrollView addSubview:textDesLabel];
textDesLabel.textColor=[UIColor colorWithRed:0.49 green:0.49 blue:0.49 alpha:1.00];
textDesLabel.font = [UIFont systemFontOfSize:12 ];
textDesLabel.text = textDesArr[i];
textDesLabel.numberOfLines = 0;
textDesLabel.layer.borderWidth = 0.5;
textDesLabel.layer.borderColor = [UIColor colorWithRed:0.91 green:0.91 blue:0.91 alpha:1.00].CGColor;
textDesLabel.backgroundColor = [UIColor whiteColor];
}
//scrollView的滾動(dòng)范圍
_scrollView.contentSize = CGSizeMake(190*contentCount+10, 0);
}
三麦撵、在UIScrollView的代理滾動(dòng)方法中修改滾動(dòng)條的當(dāng)前位移：
這里是以自定義橫向滾動(dòng)條為例，豎向滾動(dòng)條也是一樣的原理溃肪。
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
[UIView animateWithDuration:0.5 animations:^{
CGPoint offset = scrollView.contentOffset;
// scrollView的當(dāng)前位移/scrollView的總位移=滑塊的當(dāng)前位移/滑塊的總位移
// offset/(scrollView.contentSize.width-scrollView.frame.size.width)=滑塊的位移/(slideBackView.frame.size.width-sliderView.frame.size.width)
// 滑塊距離屏幕左邊的距離加上滑塊的當(dāng)前位移免胃，即為滑塊當(dāng)前的x
CGRect frame=sliderView.frame;
frame.origin.x=15 + offset.x*(slideBackView.frame.size.width-sliderView.frame.size.width)/(scrollView.contentSize.width-scrollView.frame.size.width);
sliderView.frame = frame;
}];
}
這樣，自定義的滾動(dòng)條就實(shí)現(xiàn)了惫撰。效果如圖
另外羔沙，在這里提一下陰影的使用方法，有時(shí)候我們需要加一些陰影效果厨钻，怎么加呢扼雏？
主要用到layer的shadowColor（陰影顏色） 、shadowOffset （陰影大小),shadowOpacity （陰影透明度）夯膀、shadowRadius（陰影圓角）這幾個(gè)屬性
如：
_scrollView.layer.shadowColor = [UIColor redColor].CGColor;//shadowColor陰影顏色
_scrollView.layer.shadowOffset = CGSizeMake(0,0);//shadowOffset陰影偏移,x向右偏移诗充，y向下偏移
_scrollView.layer.shadowOpacity = 0.5;//陰影透明度，默認(rèn)0
_scrollView.layer.shadowRadius = 3;//陰影半徑棍郎，默認(rèn)3
