iOS App 만들기 #6 🐥

longlivedrgn·2022년 2월 25일
0

App 만들기

목록 보기
6/7

이미지 슬라이드와 페이저뷰

mainstoryboard 구성하기

위와 같이 스토리보드를 구성한다.

FSPagerView 오픈소스를 사용한다.


import UIKit
import FSPagerView

class ViewController: UIViewController, FSPagerViewDataSource, FSPagerViewDelegate {
    // pagerview에 등록하고 싶은 이미지를 집합으로 만든다.
    fileprivate let imageNames = ["1.png","2.png","3.png","4.png"]
    
    @IBOutlet weak var leftBtn: UIButton!
    
    @IBOutlet weak var rightBtn: UIButton!
    
    @IBOutlet weak var myPagerView: FSPagerView! {
        didSet{
            //페이져뷰에 셀을 등록한다.
            //창작자가 만들어 놓은 FSPagerViewCell을 사용한다
            self.myPagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "cell")
            //아이템 크기 설정
            self.myPagerView.itemSize = FSPagerView.automaticSize
            //무한스크롤 설정
            self.myPagerView.isInfinite = true
        }
    }
    
    @IBOutlet weak var myPageControl: FSPageControl! {
        didSet{
            self.myPageControl.numberOfPages = self.imageNames.count
            // 위치를 어디에다가 둘 것인가?
            self.myPageControl.contentHorizontalAlignment = .right
            // 점과 점사이에의 거리
            self.myPageControl.itemSpacing = 16
            self.myPageControl.interitemSpacing = 16
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //위 FSPagerViewDataSource, FSPagerViewDelegate를 연결해주기.
        //첫번째 self = FSPagerViewDataSource 두번째 self = FSPagerViewDelegate
        self.myPagerView.dataSource = self
        self.myPagerView.delegate = self
        
        // left,right button round 처리하기
        self.leftBtn.layer.cornerRadius = self.leftBtn.frame.height/2
        self.rightBtn.layer.cornerRadius = self.rightBtn.frame.height/2

    }
    
    // MARK: IBActions
    
    @IBAction func onLeftBtnClicked(_ sender: UIButton) {
        print("ViewController - onLeftBtnClicked() called")
        
        // currentPage를 설정하고
        self.myPageControl.currentPage = self.myPageControl.currentPage - 1
        
        // 그 설정된 currnetPage로 화면을 바꾸기!
        self.myPagerView.scrollToItem(at: self.myPageControl.currentPage, animated: true)
    }
    
    @IBAction func onRightBtnClicked(_ sender: UIButton) {
        print("ViewController - onRightBtnClicked() called")
                
        // 근데 index가 4를 초과하게 되면 에러가 생기게 된다 따라서 아래와 같이 코드를 작성해야된다.
        if(self.myPageControl.currentPage == self.imageNames.count - 1){
            self.myPageControl.currentPage = 0
        } else {
            self.myPageControl.currentPage = self.myPageControl.currentPage + 1
        }
        
        self.myPagerView.scrollToItem(at: self.myPageControl.currentPage, animated: true)

    }
    
    // MARK: -FSPagerView Datasource
    func numberOfItems(in pagerView: FSPagerView) -> Int {
        return imageNames.count
    }
    
    // 각 셀에 대한 설정
    func pagerView(_ pagerView: FSPagerView, cellForItemAt index: Int) -> FSPagerViewCell {
        
        let cell = pagerView.dequeueReusableCell(withReuseIdentifier: "cell", at: index)
        
        // 셀을 어떠한 이미지로 설정을 할 것인가 결정한다.
        cell.imageView?.image = UIImage(named: self.imageNames[index])
        
        // 이미지가 비율에 맞게 들어가게 설정하기
        cell.imageView?.contentMode = .scaleAspectFit
        return cell
    }
    
    //MARK: FSPagerView delegate
    
    // pagecontrol 설정해주기
    
    func pagerViewWillEndDragging(_ pagerView: FSPagerView, targetIndex: Int) {
        self.myPageControl.currentPage = targetIndex
    }
    
    func pagerViewDidEndScrollAnimation(_ pagerView: FSPagerView) {
        self.myPageControl.currentPage = pagerView.currentIndex
    }
    
    // 클릭시 하이라이트 안되게 설정하기
    func pagerView(_ pagerView: FSPagerView, shouldHighlightItemAt index: Int) -> Bool {
        return false
    }


}

0개의 댓글