iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
0
Software Development

Swift零基礎實作旅遊景點app系列 第 7

Swift從零開始-Day7:UIScrollView基礎學習(含UIPageControl基礎學習)

  • 分享至 

  • xImage
  •  

分類:UIKit學習

1. UIScrollView的特色:

  • 擁有橫向及縱向的滑動條,之前提到的UITableView與UICollectionView都是繼承此類別。
  • 較常見的用法是針對瀏覽無法容納在整個畫面下的內容,提供使用者拖曳至想看的區域或是提供手勢來對所呈現的內容做放大或縮小的動作。

2. 需要設定的部分

  • UIScrollView contentSize的設定:代表能夠顯示的實際內容大小,下圖以一個超出螢幕大小的圖片為例。
    • 要顯示比螢幕大的圖片,並利用ScrollView的特性來滑動,所以要在ScrollView的子層放入ImageView。
    • 此練習中是以imageView為1024 x 1024去設定,因此ScrollView的contentSize.width及contentSize.height皆設為1024。

  • 其他還有一些與ScrollView相關的屬性等,寫在ViewDidLoad()內去設定,EX:
//關掉縱向的滑動桿 
myScrollView.showsVerticalScrollIndicator = false
//取消回彈的效果 
myScrollView.bounces = false	
  • 以手勢來縮放畫面的大小,如果要產生這樣的效果,就要讓ViewController遵守UIScrollviewDelegate,並覆寫viewForZooming的方法。
  • 再設定可以縮放的倍率極限,此練習設定最小倍率為0.5,最大倍率為3。

3. UIScrollView與UIPageControl的合併使用

練習做出單頁式風景滑動:
結果如圖

建立方法:

  • 把ScrollView拉到storyboard裡面,並與程式碼做連結。
  • 把UIPageControl也拉進storyboard,注意是與ScrollView在同一層,此處UIPageControl要同時有outLet與Action的連結。
  • 在ViewDidLoad()方法中設定ScrollView的contentSize.width及contentSize.height
myScrollView.contentSize.width = (fullScreenSize.width) * CGFloat(sceneArray.count)
//sceneArray為一個存有六個字串的陣列,fullScreen為當前手機屏幕大小。
myScrollView.contentSize.height = fullScreenSize.height
  • 同樣在ViewDidLoad()中設定UIPageControl的部分。
myPageControll.numberOfPages = sceneArray.count
myPageControll.currentPage = 0
myPageControll.currentPageIndicatorTintColor = .blue
myPageControll.pageIndicatorTintColor = .brown
  • 在ViewDidLoad()中還必須在UIscrollView加入ImageView以顯示圖片。
for i in 0...5{
            myScrollImageview = UIImageView()
            myScrollImageview.frame = CGRect(x: fullScreenSize.width * CGFloat(i), y: 0, width: fullScreenSize.width, height: fullScreenSize.height)
            myScrollImageview.image = UIImage(named: sceneArray[i])
            self.myScrollView.addSubview(myScrollImageview)
        }
  • 需要特別注意的部分:
  1. 當點選PageControl時,ScrollView也會隨之去切換畫面。
    在UIPageControl連結的action方法內打入
@IBAction func pageChanged(_ sender: UIPageControl) {
            let currentPageNumber = sender.currentPage
            let width = myScrollView.frame.size.width
            let offset = CGPoint(x: width * CGFloat(currentPageNumber), y: 0)
//讓ScrollView隨著PageControl到達我們要的位置
            myScrollView.setContentOffset(offset, animated: true)
    }
  1. 當滑動UIScrollView時,也必須讓PageControl隨之變化,因此也必須實作UIScrollViewDelegate的一個方法scrollViewDidEndDecelrating,完整程式碼
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let currentPage = Int(myScrollView.contentOffset.x / myScrollView.frame.size.width)
        myPageControll.currentPage = currentPage
    }

GitHub位置:https://github.com/ethan510010/UIScrollView-With-PageControl


上一篇
Swift從零開始-Day6:UICollectionView基礎學習
下一篇
Swift從零開始-Day8:多頁面Tab bar基礎學習
系列文
Swift零基礎實作旅遊景點app30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言