iOS如何自定義UIScrollView的滾動條

這篇文章主要介紹了iOS如何自定義UIScrollView的滾動條，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了天壇街道免費建站歡迎大家使用！

UIScrollView有自己默認的滾動條，可設(shè)置隱藏和顯示，但是有時候這個默認的滾動條沒辦法滿足我們的需求，那這時候只能通過自定義來實現(xiàn)了。 實現(xiàn)自定義滾動條需要解決的主要問題是：

在scrollview滾動的過程中如何改變滾動條的位置，進而確保滾動條和scrollView在相同時間內(nèi)走完自己的位移，只要把這個問題解決好了，那我們就可以優(yōu)雅的自定義滾動條了。

那如何解決這個滾動條的當前滾動位移呢？我們知道，UIScrollView有一個滾動范圍，滾動條也有一個滾動范圍，也就是說兩者的最大的滾動位移是固定的，那要想兩者在相同時間內(nèi)走完自己的位移，只需要確保兩者的當前滾動位移和總位移之比一致就行。也就是說：

scrollView的當前位移/scrollView的總位移=滾動條的當前位移/滾動條的總位移

得到這個關(guān)系后，想要知道滾動條的當前位移，就不是什么難事了。我們可以通過UIScrollView的代理方法獲取scrollview的當前滾動位移，scrollview的總位移和滾動條的總位移是固定的，那顯然我們可以方便的得出滾動條的當前位移，這樣，得到了滾動條的當前位移，我們就可以通過改變滾動條的frame，進而實現(xiàn)讓滾動條跟隨scrollview滾動。

但是這里需要注意一點，因為這個位移是相對位移，所以在修改滾動條的frame時，要記得加上滾動條距離相對的參考系的左邊距離，這樣才是其真正的位移。比如現(xiàn)在滾動條的x是從屏幕左邊15開始的，滾動條的滾動范圍是屏幕寬度減去30，那么當你以屏幕寬度減去30這個數(shù)值作為滾動條的滾動總位移，進而算出滾動條的當前位移時，需要加上距離左邊的15才是滾動條真正的位移。

接下來看一下代碼的具體實現(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;//陰影透明度，默認0
    _scrollView.layer.shadowRadius = 3;//陰影半徑，默認3

  }
  return _scrollView;
}

二、創(chuàng)建自定義的滾動條以及在scrollview上加點內(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ī)劃：市場目標、用戶目標、關(guān)鍵成功要素分析、管理和運用自己的資源來達成目標\n? 產(chǎn)品戰(zhàn)略實施：有損原則、平衡原則、聚焦原則\n? 產(chǎn)品需求文檔：實例講解，牛逼的需求文檔是怎么誕生的\n? 主動：戰(zhàn)略思考、資源爭取\n? 推動：項目立項、迭代跟蹤\n? 溝通：上傳下達、思想一統(tǒng)\n? 平衡：各方協(xié)調(diào)、跨部溝通\n? 把控：管理得法、取舍有道",
          @"? 用戶思維：具體案例解析\n? 運營思維：具體案例解析\n? 數(shù)據(jù)思維：具體案例解析\n? 產(chǎn)品經(jīng)理的用研能力模型\n? 用戶研究基本概念解析\n? 用研基礎(chǔ)搭建及建設(shè)\n? 用研人員分工及工作職責細分"
          @"? 常用用戶研究方法詳解\n? 桌面研究、定性研究、定量研究三種方法舉例講解及詳細步驟解析\n? 卡諾模型\n? 戰(zhàn)略級的市場及用戶研究\n? 以科學(xué)的方法在產(chǎn)品整個生命周期中進行“研究”",
          @"? 品生命周期用戶研究側(cè)重點以及研究方法解讀\n? 產(chǎn)品用研規(guī)劃建立\n? 在產(chǎn)品不同生命周期，側(cè)重不同用研方法，更準確進行產(chǎn)品迭代",
          @"? 格局：大格局思維，聚焦做實事\n? 決策：讓瑣碎的運營變有趣，“舍得”之道\n? owner精神：有狼性\n? 敏銳：“細節(jié)”出真知\n? 商業(yè)素養(yǎng)",
          @"? 高情商：做個讓人感覺“舒適”的資深運營\n? 凝聚力：1+1>2，善用團隊用人所長，沒有完美的個人，只有優(yōu)秀的團隊\n? 影響力：在互聯(lián)網(wǎng)領(lǐng)域成為運營專家，沉淀經(jīng)驗，讓成功有跡可循\n? 知識傳承力：資深運營的價值，不是個人優(yōu)秀，而是讓人人優(yōu)秀。",
          @"? 數(shù)據(jù)運營體系的構(gòu)成\n? 數(shù)據(jù)規(guī)范與平臺\n? 數(shù)據(jù)運營體系結(jié)構(gòu)\n? 數(shù)據(jù)數(shù)據(jù)平臺構(gòu)建\n? 核心數(shù)據(jù)指標\n? 移動端產(chǎn)品數(shù)據(jù)埋點范例\n? 數(shù)據(jù)需求指標\n? 產(chǎn)品關(guān)鍵數(shù)據(jù)\n? 數(shù)據(jù)運營體系的構(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的滾動范圍
  _scrollView.contentSize = CGSizeMake(190*contentCount+10, 0);



}

三、在UIScrollView的代理滾動方法中修改滾動條的當前位移：

這里是以自定義橫向滾動條為例，豎向滾動條也是一樣的原理。

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
  [UIView animateWithDuration:0.5 animations:^{

    CGPoint offset = scrollView.contentOffset;

    // scrollView的當前位移/scrollView的總位移=滑塊的當前位移/滑塊的總位移
    //    offset/(scrollView.contentSize.width-scrollView.frame.size.width)=滑塊的位移/(slideBackView.frame.size.width-sliderView.frame.size.width)
    //    滑塊距離屏幕左邊的距離加上滑塊的當前位移，即為滑塊當前的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;



  }];
}

這樣，自定義的滾動條就實現(xiàn)了。效果如圖

另外，在這里提一下陰影的使用方法，有時候我們需要加一些陰影效果，怎么加呢？

主要用到layer的shadowColor（陰影顏色） 、shadowOffset （）陰影大小、hadowOpacity （陰影透明度）、shadowRadius（陰影圓角）這幾個屬性

如：

_scrollView.layer.shadowColor = [UIColor redColor].CGColor;//shadowColor陰影顏色
    _scrollView.layer.shadowOffset = CGSizeMake(0,0);//shadowOffset陰影偏移,x向右偏移，y向下偏移
    _scrollView.layer.shadowOpacity = 0.5;//陰影透明度，默認0
    _scrollView.layer.shadowRadius = 3;//陰影半徑，默認3

感謝你能夠認真閱讀完這篇文章，希望小編分享的“iOS如何自定義UIScrollView的滾動條”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

文章名稱：iOS如何自定義UIScrollView的滾動條
文章URL：http://www.muchs.cn/article40/ihpseo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站改版、標簽優(yōu)化、網(wǎng)站制作、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)