快捷導(dǎo)航

Swift實(shí)現(xiàn)可自定義分頁(yè)寬度的UIScrollView

更新時(shí)間：2017年07月20日 08:35:09 作者：CD826Dong

這篇文章主要為大家詳細(xì)介紹了Swift實(shí)現(xiàn)可自定義分頁(yè)寬度的UIScrollView，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近在開(kāi)發(fā)新版的APP時(shí)需要一個(gè)可自定義分頁(yè)寬度的圖片輪播組件。剛開(kāi)始自己覺(jué)得在這個(gè)萬(wàn)能的互聯(lián)網(wǎng)上早就應(yīng)該有一個(gè)大俠為我們封裝好了，我只需要下載、拷貝、粘貼、修改一下代碼就可以了。誰(shuí)知一圈下來(lái)，不知道是自己沒(méi)搜到，還是什么其它原因，根本就找不到。所以，一狠心就自己開(kāi)干了。

我們先看一下需要的效果，如下圖：

總起來(lái)說(shuō)，所需要功能有如下幾項(xiàng)：

可自定義分頁(yè)的寬度，并且在兩邊可以顯示相鄰兩項(xiàng)的一部分，從而用戶知道可以滑動(dòng)；
可以無(wú)限輪播；
可以自動(dòng)輪播。

對(duì)于無(wú)限輪播和自動(dòng)輪播在網(wǎng)上一搜索一大把。這里我就不詳細(xì)講了，其原理就是第一頁(yè)和最后一頁(yè)對(duì)contentOffset做一下特殊處理，其它沒(méi)有什么玄機(jī)。

而對(duì)于定義分頁(yè)的寬度經(jīng)過(guò)一番搜索之后實(shí)現(xiàn)的方法也基本上處于同一，原理如下圖：

把所能滾動(dòng)的視圖的寬度定為所需要的寬度，并把它放入另外一個(gè)View中，同時(shí)把clipsToBounds設(shè)置為false，這樣相鄰的兩個(gè)頁(yè)面就會(huì)顯示在ScrollView兩邊的空白地方，而不是被切除不顯示。另外，如果能夠讓Scroll View的兩邊的空白地方也可以滑動(dòng)，那么需要將View Enhancer的點(diǎn)擊事件同時(shí)作用到Scroll View上。

Ok，既然原理都懂了，那么下手開(kāi)干就不是問(wèn)題了。代碼我就不在這里貼了，可以去我的github上下載，如果喜歡別忘了star一下哦。

看一下示例是如何使用的：

class ScrollViewPagingDemoViewController: UIViewController

 override func viewDidLoad() {
 super.viewDidLoad()

 self.view.addSubview(scrollPagingView)

 // 添加你的Page view，如：
 let view1 = UIView(frame: CGRectZero)
 view1.backgroundColor = UIColor(red: 0xff/255.0, green: 0x2d/255.0, blue: 0x41/255.0, alpha: 1.0)
 view1.layer.borderColor = UIColor(red: 0xff/255.0, green: 0x2d/255.0, blue: 0x41/255.0, alpha: 1.0).CGColor
 view1.layer.borderWidth = 0.5
 view1.layer.cornerRadius = 5
 scrollPagingView.addPage(view1)

 let view2 = UIView(frame: CGRectZero)
 view2.backgroundColor = UIColor(red: 0x00/255.0, green: 0x7a/255.0, blue: 0xff/255.0, alpha: 1.0)
 view2.layer.borderColor = UIColor(red: 0x00/255.0, green: 0x7a/255.0, blue: 0xff/255.0, alpha: 1.0).CGColor
 view2.layer.borderWidth = 0.5
 view2.layer.cornerRadius = 5
 scrollPagingView.addPage(view2)

 let view3 = UIView(frame: CGRectZero)
 view3.backgroundColor = UIColor(red: 0x4b/255.0, green: 0xd9/255.0, blue: 0x64/255.0, alpha: 1.0)
 view3.layer.borderColor = UIColor(red: 0x4b/255.0, green: 0xd9/255.0, blue: 0x64/255.0, alpha: 1.0).CGColor
 view3.layer.borderWidth = 0.5
 view3.layer.cornerRadius = 5
 scrollPagingView.addPage(view3)

 let view4 = UIView(frame: CGRectZero)
 view4.backgroundColor = UIColor(red: 0xff/255.0, green: 0x96/255.0, blue: 0x00/255.0, alpha: 1.0)
 view4.layer.borderColor = UIColor(red: 0xff/255.0, green: 0x96/255.0, blue: 0x00/255.0, alpha: 1.0).CGColor
 view4.layer.borderWidth = 0.5
 view4.layer.cornerRadius = 5
 scrollPagingView.addPage(view4)

 // 用戶點(diǎn)擊事件，如果需要的話  
 let tapGesture = UITapGestureRecognizer(target:self, action: #selector(ScrollViewPagingDemoViewController.scrollViewTapAction(_:)))
 scrollPagingView.addGestureRecognizer(tapGesture)
 }

 override func viewWillLayoutSubviews() {
 super.viewWillLayoutSubviews()

 // 設(shè)置大小，并初始化setup方法必須調(diào)用
 self.scrollPagingView.frame = CGRect(x: 0, y: 100, width: self.view.bounds.width, height: 240)
 self.scrollPagingView.setup() 
 }

 private lazy var scrollPagingView: CDScrollPagingView = {
 let scrollPagingView = CDScrollPagingView()
 // 控制頁(yè)與頁(yè)之間的間隔，默認(rèn)為10
 scrollPagingView.itemSpacing = 10.0
 // 是否顯示分頁(yè)指示器，默認(rèn)顯示
 scrollPagingView.showPageControl = true
 // 自動(dòng)切換的時(shí)間間隔，默認(rèn)為3s，0表示不自動(dòng)切換
 scrollPagingView.timeInterval = 3.0
 return scrollPagingView
 }()

 func scrollViewTapAction(sender: CDScrollPagingView){
 if let curPage = scrollPagingView.currentPage() {
  let alertController = UIAlertController(title: "系統(tǒng)提示",
            message: "您點(diǎn)擊第\\(curPage)頁(yè)", preferredStyle: .Alert)
  let okAction = UIAlertAction(title: "Ok", style: .Default, handler: nil)
  alertController.addAction(okAction)
  self.presentViewController(alertController, animated: true, completion: nil)

 }
 }
}

需要說(shuō)明的有以下幾點(diǎn)：

分頁(yè)的寬度可以通過(guò)設(shè)置CDScrollPagingView.pageWidth的值大小來(lái)控制，默認(rèn)為0.85即整個(gè)寬度的85%
頁(yè)與頁(yè)之間的間隔可以通過(guò)CDScrollPagingView.itemSpacing來(lái)設(shè)置，默認(rèn)值為10.0
分頁(yè)指示器可以控制是否顯示，控制的參數(shù)為CDScrollPagingView.showPageControl
自動(dòng)輪播的時(shí)間間隔可以通過(guò)scrollPagingView.timeInterval來(lái)控制，默認(rèn)為3s，如果設(shè)置為0表示不進(jìn)行自動(dòng)輪播

另外，如果想為每個(gè)頁(yè)添加點(diǎn)擊事件或者頁(yè)面中控件需要添加事件處理是非常麻煩的，因?yàn)閁IScrollView已經(jīng)對(duì)事件做了處理，所以如果直接綁定事件處理的話會(huì)沒(méi)有任何反應(yīng)，這個(gè)也把我折騰了好久。不過(guò)，對(duì)于這種輪播控件的需求大部分應(yīng)該是點(diǎn)擊了某個(gè)頁(yè)面后進(jìn)行一些處理，因此CDScrollPagingView提供了一個(gè)方法currentPage()來(lái)獲取當(dāng)前是第幾頁(yè)，這樣就可以根據(jù)這個(gè)值進(jìn)行處理了。具體可以看上面的示例代碼。

這個(gè)控件我也只是開(kāi)發(fā)了最基礎(chǔ)的一些功能，不過(guò)已經(jīng)滿足了自己APP的需要。后續(xù)如果需要可能還會(huì)需要增加一些動(dòng)效。

如果感興趣，大家可以到github下載。

P.S. 這個(gè)分頁(yè)控件里面最少要有3個(gè)頁(yè)面，否則會(huì)崩潰。

您可能感興趣的文章: