[Swift iOS] AutoSlide Banner using UICollectionView

UICollectionView를 이용해 AutoSlideBanner를 만들어보려고 했는데

시작부터 난관에 부딪혀버렸다.. 

 

찾아보니 xib 파일에서는 UICollectionView 안에 셀을 추가하는 것이 지원이 안된다나 뭐라나..

하고 싶으면 따로 UICollectionViewCell xib 파일을 만들어주거나, 스토리보드를 이용해야한다고 한다.. 

Adding cells in a xib is not supported. If you must use a xib file, then you will need a separate xib which contains the UICollectionView cell. Storyboards may be a better solution.

https://newbedev.com/cant-add-items-to-uicollectionview-inside-uiview-xib

 

UICollectionView로 AutoSlide Banner 만드는 법

귀찮으니 스토리보드로 해볼까 했는데 스토리보드에 익숙하지 않은 나는 NavigationVIew push 하려다 삽질 몇번 하고 깔끔하게 포기 후 

 

우선 xib 이용해서 따로 cell 만들어 사용해보기로 했다. 

xib 이용할경우, UICollectionViewCell xib도 필수로 만들어 주어야 하고

Reusable Identifier 명을 설정해주는 것도 잊지 말아야 한다.  

CollectionView도 ScrollView의 일종이라 특징들을 다 가지고 있는 것 같았다. 

Scroll View 속성에서 Paging Enabled를 체크해주어야 페이지가 넘어가는 형식으로 scroll이 된다. 안하면 그냥 스크롤만 됨. 

 

@IBOutlet weak var sliderCollectionView: UICollectionView!
@IBOutlet weak var pageControl: UIPageControl!
var pageIndex: Int = 0
var imgArray = [ UIImage(named: "img"), ... ]

override func viewDidLoad() {
    super.viewDidLoad()
    
    sliderCollectionView.delegate = self
    sliderCollectionView.dataSource = self
    sliderCollectionView.register(UINib(nibName: "BannerCell", bundle: nil), forCellWithReuseIdentifier: "cell")
    DispatchQueue.main.async {
        let timer = Timer.scheduledTimer(timeInterval: 2, target: self, selector: #selector(autoSlide), userInfo: nil, repeats: true)
    }
}

@objc func autoSlide() {
    if pageIndex < imgArray.count {
        sliderCollectionView.scrollToItem(at: NSIndexPath(item: pageIndex, section: 0) as IndexPath, at: .centeredVertically, animated: true)
    } else {
        pageIndex = 0
        sliderCollectionView.scrollToItem(at: NSIndexPath(item: 0, section: 0) as IndexPath, at: .centeredVertically, animated: false)
    }
    pageControl.currentPage = pageIndex
    pageIndex += 1
}

 

+ timer를 중단하고 싶다면 다음을 입력해주면 됨. 

timer.invalidate()

 

 

참고 : tistory - 자동 스크롤 배너 만들기, youtube - Auto image Slider,