#41圖片更換

運用Scroll View/Page Control/Zoom/隨機圖片

Stack View & Scroll View

📌加入Scroll View，設定與手機無間距

📌但會出現紅色錯誤，不知道捲動範圍

📌因此先加入照片，照片想要滿版的話Content Mode選擇Aspect Fill

📌將image view 加到 stack view

📌Stack View 決定Scroll View Content Layout Guide(捲動範圍)的大小

📌設定圖片的寬高等於螢幕的寬高

📌在Stack View加入多個UIImage View，設定 stack view

📌scroll view 捲動停下時能看到完整的圖片

滑動頁面改變Page Control小圓點的顯示

📌加上Page Control

📌設定為水平置中

📌建立Scroll View的delegate

📌Scroll View & Page Control建立@IBOutlet

📌extension 讓 ViewController 遵從 protocol UIScrollViewDelegate(判斷目前在第幾頁)

extension ViewController:UIScrollViewDelegate{
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let page = scrollView.contentOffset.x/scrollView.bounds.width
pagecontrol.currentPage = Int(page)
  }
}

點選或拖曳小圓點時更新頁面

📌建立Page Control的@IBAction (更新Scroll View的頁面)

@IBAction func pageChange(_ sender: UIPageControl) {
  let point = CGPoint(x: scrollview.bounds.width*CGFloat(sender.currentPage), y: 0)
scrollview.setContentOffset(point, animated: true)
}

手勢縮放圖片

📌Scroll View設定Zoom

📌縮放程式碼

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
  for pageview in scrollview.subviews{
      if pageview.isKind(of: UIView.self){
         return pageview
      }
  }
return nil
}

GIF：

網路上抓取隨機圖片

再結合網路抓圖的功能

📌網路抓圖程式碼

@objc func UIUpdate(){
for imageView in imageviews {
//隨機圖片網址
let str = “https://picsum.photos/455/774"
if let url = URL(string: str){
  URLSession.shared.dataTask(with: url){ (data , response ,error) in
  if let date = data,
     let image = UIImage(data: date){
         DispatchQueue.main.async {
           imageView.image = image
         }
     }
   }.resume()
 }
}
}

GIF：

隨機抓圖網址在模擬器跑起來抓不到圖片，所以只能在手機上Demo

GitHub：

ninayang036/ImageScrollZoom

參考文章：

隨著換頁更新的 page control 小圓點

stack view + scroll view 製作分頁 tutorial (懶得寫程式版)