[스코클 TIL_230817]

어제 팀 단위 머지를 처음 경험했다.
처음인만큼 발생하는 conflict가 너무 많았는데, 해결(?)하느라 정신없이 보냈다.
요 며칠간 TIL도 제대로 작성하지 못했지만, 오늘은 조금은 적어보고자 한다.

오늘의 학습

• UISwipeGesture

  
  

고민 포인트 🤔

• 어떻게 하면 SNS처럼 이미지를 넘길 수 있을까?
• 한번에 뚝 넘어가는 모션이 아닌 자연스럽게 넘기는 방법은 없을까?
• 이미지별 데이터는 어떻게 파악할 수 있을까

오늘 SNS 어플을 구성해보면서 든 생각이었다.
정말 간단해 보이는 Swipe 기능도 만들어본 적이 없다보니 어려운 기분인데,
2가지 방법을 채택해서 나는 Swipe 기능을 구현했다.

1. PageControl
2. UISwipeGestureRecognizer

왜 두 방법을 썼을까🤔

이 두 가지를 선택하기 전에 인터넷과 많은 분들의 화면을 보니 CollectionView를 사용하는 것을 볼 수 있었다.
누구는 TableView를 사용해서 구현할 수 있다고도 했는데, 아래와 같은 이유로 다른 방식을 채택했다.

1. 내가 구현하고 싶었던 건 "이미지 영역"이 움직이는 거였다. CollectionView는 메모리 효율적이고
image이외에 더 많은 데이터를 이동시킬 수 있겠지만, 굳이 ImageView에서 collectionView로 넘어갈 필요성이 없어보였다. (아직 전달 받을 데이터가 많지 않아서 괜찮을 것이라 생각했다)
2. 기존의 UI를 최대한 고수해보고 싶었다. TableView를 사용할 경우 의도했던 것보다 다르게 보여질 부분이 많았다.

구현하며...

PageControl

현재 있는 영역과 이미지들의 갯수를 시각적으로 보여주는 page Control은 복잡한 것 없이 구현할 수 있었다.
스토리보드와 코드 내부로 IBAction과 Outlet을 만들어서 연결을 해두면 거진 다 됐다!

@IBAction func pageChanged(_ sender: UIPageControl) {
        postedImage.image = UIImage(named: postImgNames[sender.currentPage])
    }

해당 코드로 이동되는 pageControl의 현재 페이지를 저장하고 있던 이미지 배열의 이미지와 연결해서
간단하게 이미지들은 화면에 출력 시킬 수 있었다.

swipe

Swipe는 생각보다 오래 걸렸는데,
가장 큰 이유는 UIImageView가 swipe같은 인터렉션을 지원하지 않기 때문이었다.(적어도 내가 생각하기로는)
구글링해서 찾은 코드들을 복붙해도 아무 효과가 없었는데, 아래 코드를 붙이면서 활성화 시킬 수 있었다.

postedImage.isUserInteractionEnabled = true

지정된 UIImageView에게 Interaction을 활성화한 뒤,
Swipe 기능을 구현했다.

// 왼쪽 스와이프 지정
let swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(respondToSwipe))
swipeLeft.direction = .left
postedImage.addGestureRecognizer(swipeLeft)

// 오른쪽 스와이프 지정
let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(respondToSwipe))
swipeRight.direction = .right
postedImage.addGestureRecognizer(swipeRight)

// 기능 구현
@objc func respondToSwipe(_ gesture: UIGestureRecognizer) {
        
        if let swipeGesture = gesture as? UISwipeGestureRecognizer {
            switch swipeGesture.direction {
            case .left:
                print("왼쪽으로 이동")
                imageIndex = (imageIndex + 1) % postImgNames.count
                postedImage.image = UIImage(named: postImgNames[imageIndex])

            case .right:
                print("오른쪽으로 이동")
                imageIndex = (imageIndex - 1 + postImgNames.count) % postImgNames.count
                postedImage.image = UIImage(named: postImgNames[imageIndex])

            default:
                print("오류 발생")
            }
            // 이동 시, image의 index가 바뀌도록 하여 바뀐 이미가 보이도록
            postedImage.image = UIImage(named: postImgNames[imageIndex])
            pageControl.currentPage = imageIndex
        }
    }

참고

• https://developer.apple.com/design/human-interface-guidelines/page-controls
• https://developer.apple.com/design/human-interface-guidelines/scroll-views