#41圖片更換
運用Scroll View/Page Control/Zoom/隨機圖片
Published in
6 min readMay 5, 2021
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