iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
1
Software Development

30天Swift入門學習系列 第 2

iOS App實作(2) Image Slider (UIScrollView)

Description:
這個實作是透過UIScrollView並搭配UIPageControl來達成圖片左右滑動之效果。
UIScrollView是一個允許開發者一次預先載入數倍於手機畫面尺寸的view controller。
假設要預覽的影像圖有五張,因實際視圖範圍是一次載入五張圖而可見視圖範圍是一張圖,因此再搭配更新UIPageControl所產生出的頁數點可讓人誤以為是分五次看圖而不是一次看到橫向列出的五張圖。

以下是為使用UIScrollView的概念圖,紅色區為可視範圍但整體範圍卻是五倍於可視範圍:


Component:

  1. UIScrollView
  2. UIPageControl

Highlight function:
UIScrollView宣告方法:

  var imgList: [UIImage] = [
    UIImage(named: "01.jpg")!,
    UIImage(named: "02.jpg")!,
    UIImage(named: "03.jpg")!,
    UIImage(named: "04.jpg")!,
    UIImage(named: "05.jpg")!
  ]
  
fullSize = UIScreen.main.bounds.size

scrollView = UIScrollView() 

scrollView.contentSize = CGSize(width: fullSize.width * CGFloat(imgList.count), height: fullSize.height) 

UIScrollView顯示的方式是一次性的將欲預覽之圖片全部載入,因此用來顯示圖之UIImageView也須依照圖片數量來宣告。

for index in 0...imgList.count - 1 { 
  let imgView = UIImageView(image: imgList[index]) 
  scrollView.addSubview(imgView) 
}

UIPageControl宣告方式:

pageControl = UIPageControl() 
pageControl.numberOfPages = imgList.count  // page number

透過UIScrollViewDelegate protocol function來更新頁數:

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { 
  // Update page number when user slide 
  let page = Int(scrollView.contentOffset.x / scrollView.frame.size.width) 
  pageControl.currentPage = page 
}

Additional:
UIScrollView常用的member function介紹:

// 是否顯示滑動條 
scrollView.showsHorizontalScrollIndicator = false 
scrollView.showsVerticalScrollIndicator = false 

scrollView.bounces = true      // 滑動超過單張圖範圍時是否使用彈回效果 
scrollView.isPagingEnabled = true    // 以一頁為單位滑動

UIPageControl常用的member function介紹:

pageControl.currentPage = 0 // 起始頁面
pageControl.currentPageIndicatorTintColor = UIColor.black // 目前所在頁數的點點顏色 
pageControl.pageIndicatorTintColor = UIColor.lightGray // 其餘頁數的點點顏色 

Reference:
Source code on Github


上一篇
iOS App實作(1) Discount (Slider Bar + Keyboard)
下一篇
iOS App實作(3) Image Collection (UICollectionView)
系列文
30天Swift入門學習30

尚未有邦友留言

立即登入留言