작은 차!iOS Advent Calendar 2018 15일째 담당, 주식회사 몽미 졸업생 iOS 엔지니어 야마다 씨입니다!
입사 9개월 만에 다양한 일을 겪으면서 지금까지 사용한 프로그램 라이브러리와 기술을 활용해 최대한 감동적인 TableView를 만들어 보자!

만들어진 물건

반드시 실제 기계로 시운전해 보세요!

뭘 했어?

iTunes에서 최고급 영화의 xml을 가져와 목록을 표시합니다

생성 시간

8시간!

여기 귀여워!

투명 디스플레이

이 도서관은 매우 편리하지 않습니까!!??
그냥 넣어서 보여주면 돼.

(이것을 보여주기 위해 TableView의 리셋이 3초 동안 멈췄다😇)

떠날 때 애니메이션

Duumping 애니메이션을 사용했기 때문에 태엽처럼 원상태로 돌아갑니다!
기분 나빠요!!??
선배가 가르쳐줬지만 난 완전히 포로로 잡혔어.

haptics

최근에 하프딕스 사용처를 찾고 있어서 써봤어요.
압박 상태에서 손가락을 풀 때 쓸 수 있어요!그렇지!
시원하다!!!
(여기 안 건드리면 몰라서 못 보여줬는데...)

이용의 기술/빠져드는 곳

SkeletonView

Facebook은 비동기 통신이 읽을 때 주로 표시되는 View를 사용하는데, 완전히 같다.
기본적으로 간단하지만 미묘한 사용 습관이 있기 때문에 습관이 필요하다.UIView, UITableView, UICollectionView 모두 가능합니다.

애니메이션 채널

다음과 같이 UIView의 표준 애니메이션을 사용하여 구현합니다.
animation.swift

private func shrink() {
    let animationScale: CGFloat = 0.90
    UIView.animate(withDuration: 0.1) { [unowned self] in
        self.transform = .init(scaleX: animationScale,
                               y: animationScale)
    }
}

private func expand() {
    let animationScale: CGFloat = 1.10
    UIView.animate(withDuration: 0.1) { [unowned self] in
        self.transform = .init(scaleX: animationScale,
                               y: animationScale)
    }
}

private func restore() {
    UIView.animate(withDuration: 0.1,
                   delay: 0,
                   usingSpringWithDamping: 0.7,
                   initialSpringVelocity: 1,
                   options: [],
                   animations: { [unowned self] in
                    self.transform = CGAffineTransform.identity
    })
}

haptics

이곳은 설치가 매우 간단해서 10줄 정도면 실현할 수 있다.
주의점은 하나입니다. 피드백의 발생이 늦어질 수 있습니다. 애플은 처리 몇 초 전에 feedbackGenerator.prepare()라고 부르는 것을 추천합니다.
해당 섹션을 발췌하여 Google 번역 선생님께 물었습니다.
발생기를 준비하면 피드백을 촉발할 때의 대기 시간을 단축할 수 있다.이것은 소리와 영상의 신호 피드백이 일치할 때 특히 중요하다.
생성기의 prepare () 방법을 호출하면 Taptic Engine이 준비됩니다.동력을 유지하기 위해 Taptic Engine은 짧은 시간(몇 초간의 주문) 이내에 또는 다음 피드백을 트리거하기 전에 이 상태에 머물게 됩니다.
언제, 어디서 발전기를 준비하는 것이 좋을지 생각해 보세요.prepare()를 호출한 후 즉시 피드백을 트리거하면 Taptic Engine을 준비할 시간이 부족하고 대기 시간이 단축되지 않습니다.다른 한편, prepare()를 빠르게 호출하면 피드백을 트리거하기 전에 Taptic Engine이 다시 유휴 상태가 될 수 있습니다.
haptics.swift

    private let feedbackGenerator = UIImpactFeedbackGenerator(style: .light)

...

extension FloatingSkeletonTableViewController: FloatingSkeletonTableViewCellDelegate {

    func cellWillStartAnimating() {
        feedbackGenerator.prepare()
    }

    func cellWillEndAnimating() {
        feedbackGenerator.impactOccurred()
    }

}

UItableView 셀 사이의 간격

이런 해결책은 자주 봤지만 구역을 사용하려다 죽는 바람에 소용이 없었다.
https://stackoverflow.com/questions/6216839/how-to-add-spacing-between-uitableviewcell

UItable ViewCell의 ContentView에 floatingView를 더하면 상하좌우 10pt씩 안쪽을 제약한다.

floatingView 흰색 배경에서 다른 후면 뷰의 백그라운드 컬러는 모두 .clear로 설정됩니다.(파란색 View는 제외)

역부족

앞부분은 기세로 쓴 것으로 원래 haptics를 사용하려면 최신 주의가 필요해요. 사용자의 주의를 끌 때나 변화가 있을 때를 제외하고는 원칙적으로 가장 좋지 않다.
애니메이션+haptics feedback으로 상태의 변화(맨 윗부분 이미지 변환 등)를 표현하고 싶은데 아쉽지만 시간이 초과되었습니다.
TableViewCell은 스스로 사이즈를 조절해 작은 부분을 모두 날려버렸다.

후기

여기까지 읽어주셔서 감사합니다!
창고가 공개됐으니 관심 있으면 실기로 가동하세요!
(릭도 기다리고 있어요!)