iOS Swift 배너 만들기 ( 2초 자동 스크롤 )

안녕하세요 Gons 입니다.

오늘은 자동 페이징이 되는 배너를 만들어보겠습니다.

Auto infinite loop horizontal scroll paging

2초마다 스크롤 되는 배너입니다.

시작하겠습니다.

 

 

 

 

 

먼저 스토리보드에서

CollectionView 하나를 추가해주세요.

콜렉션뷰 삽입

 

 

원하는 크기로 Constraints 를 설정해주세요.

 

 

 

컬렉션뷰 설정에서 방향 및 페이징을 설정해줍니다.

Scroll Direction - Horizontal , Scrolling - Paging Enabled

 

 

사이즈 인스펙터에서 기본 간격을 없애줍니다.

( 간격이 있으면 페이징이 제대로 되지 않음, 간격은 Constraints 로 줄 것임 )

Estimate Size - None , Min Spacing - 0

 

 

 

CollectionViewCell 에 ImageView 를 하나 추가해주세요.

Add Image View

 

 

 

원하는 크기로 제약을 설정해주세요. ( 저는 10정도 간격을 줘봤습니다. )

Add Constraints

 

 

 

 

사진이 이미지뷰에 꽉차도록 컨텐츠 모드를 Scale To Fill 로 설정해주세요.

Content Mode - Scale To Fill

 

 

Cell Class 를 하나 생성하고요. ( 저는 BannerCell 이라고 만들어봤습니다. )

 

 

 

Collection View Cell 을 선택하고 Custom Class 를 등록해주세요.

아까 만든 클래스 이름 BannerCell 을 넣고 엔터를 쳐줘야합니다.

잘 따라했다면 왼쪽에 Cell 이름이 Banner Cell 로 변하고 오른쪽에 모듈 부분에 프로젝트명과 체크 박스가 생긴 것을 확인할 수 있습니다.

 

 

 

 

 

코드로 Cell 을 찾을 수 있도록 identifier 를 써줍니다.

 

 

 

아울렛변수로 등록을 위해 Assitant 를 띄워줍니다.

단축키로는 왼쪽에 뷰컨트롤러 클릭해놓고 컨트롤⌃ 옵션⌥ 커맨드⌘ 리턴↩︎ 을 누르면 됩니다.

 

 

 

BannerCell Class 를 열어야하기 때문에 이미지뷰 선택하고 상단에 오토매틱 누르면 BannerCell 로 갈 수 있습니다.

 

 

이미지뷰를 마우스 오른쪽버튼 (맥북 또는 트랙패드 사용자는 컨트롤⌃ 누른채  ) 클릭하여 드래그앤 드롭

 

imgView 라고 선언해놓겠습니다.

 

 

잘 등록됐나 확인해주시고요.

 

 

 

 

같은 방법으로 CollectionView 도 등록해주세요.

 

 

 

 

준비해놓은 사진 3장도 넣어주시고요.

 

 

 

이제 코드로 넘어가겠습니다.

 

 

 

현재 페이지 체크할 정수형 변수 하나랑

데이터로 쓸 배열 하나 만들어주세요. (viewDidLoad 밖에다가 작성)

// 현재페이지 체크 변수 (자동 스크롤할 때 필요)
var nowPage: Int = 0

// 데이터 배열
let dataArray: Array<UIImage> = [UIImage(named: "img1.png")!, UIImage(named: "img2.png")!, UIImage(named: "img3.png")!]

 

 

 

델리게이트와 데이터소스를 누가 처리할건지 써줍니다.  (viewDidLoad 안에다가 작성)

bannerCollectionView.delegate = self
bannerCollectionView.dataSource = self

그러면 이제 델리게이트 상속 안받았다고 빨간색 표시가 날 겁니다.

extension 으로 적겠습니다.

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    //컬렉션뷰 개수 설정
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return dataArray.count
    }
    
    //컬렉션뷰 셀 설정
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = bannerCollectionView.dequeueReusableCell(withReuseIdentifier: "BannerCell", for: indexPath) as! BannerCell
        cell.imgView.image = dataArray[indexPath.row]
        return cell
    }
    
    // UICollectionViewDelegateFlowLayout 상속
    //컬렉션뷰 사이즈 설정
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: bannerCollectionView.frame.size.width  , height:  bannerCollectionView.frame.height)
    }
    
    //컬렉션뷰 감속 끝났을 때 현재 페이지 체크
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        nowPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
    }
}

ViewContoller 클래스 밖에 적으시면 됩니다. ( 그냥 맨밑에 적으시면 됩니다. )

방금 쓴거를 간단히 설명하겠습니다.

numberOfItemsInSection 는 페이지 갯수입니다. 우리가 만들어놓은 배열 갯수로 설정했고요

cellForItemAt 는 셀 설정입니다. 우리가 만들어 놓은 BannerCell 에 imgView 를 배열에 있는 이미지로 넣었고요

layout 은 사이즈 설정입니다. 우리가 아까 스토리보드에서 Estimate Size =. None 으로 설정 했기 때문에 사이즈 설정해주고요

scrollViewDidEndDecelerating 는 감속이 끝났을 때를 체크하는 부분입니다. 이 부분은 이따가 자동 스크롤 할 때 필요합니다.

스크롤뷰(컬렉션뷰) 컨텐츠 x위치 나누기 스크롤뷰(컬렉션뷰) 가로 사이즈 를 하면 몇번째 페이지인지 나옵니다.

만약에 컬렉션뷰 가로 사이즈가 300이라고 가정할 때

컨텐츠 x위치는 0 / 300 = 0   (0번째 페이지)

컨텐츠 x위치는 300 / 300 = 1   (1번째 페이지)

컨텐츠 x위치는 600 / 300 = 2   (2번째 페이지)

이렇게 됩니다.

 

 

 

 

 

 

실행해보겠습니다.

Basic paging

페이징이 아주 깔끔하게 되네요.

 

 

 

이제 타이머를 이용해서 자동으로 스크롤 해보겠습니다.

    // 2초마다 실행되는 타이머
    func bannerTimer() {
        let _: Timer = Timer.scheduledTimer(withTimeInterval: 2, repeats: true) { (Timer) in
            self.bannerMove()
        }
    }
    // 배너 움직이는 매서드
    func bannerMove() {
    	// 현재페이지가 마지막 페이지일 경우
        if nowPage == dataArray.count-1 {
        // 맨 처음 페이지로 돌아감
            bannerCollectionView.scrollToItem(at: NSIndexPath(item: 0, section: 0) as IndexPath, at: .right, animated: true)
            nowPage = 0
            return
        }
        // 다음 페이지로 전환
        nowPage += 1
        bannerCollectionView.scrollToItem(at: NSIndexPath(item: nowPage, section: 0) as IndexPath, at: .right, animated: true)
    }

이런식으로 메서드를 만들어주세요.

 

 

 

 

 

 

viewDidLoad 에서 실행해보겠습니다.

bannerTimer()

 

 

Auto infinite loop horizontal scroll paging

 

잘 되네요.

저는 간단하게 기본 기능만 알려드렸고

여러분은 더 응용해서 사용하실 수 있을겁니다.

 

 

 

 

 

 

끝입니다.

좋은 내용이었나요?

스크린샷도 많고 글도 좀 복잡하게 쓴 것 같은데

코드만 보면 100줄도 안됩니다. 간단하게 가능한 기능입니다.

제가 잘못 쓴 부분이 있다면 댓글로 알려주십시오.

감사합니다.