[iOS] SkeletonView

SkeletonView 깃허브

위 깃허브 주소를 참고하여 라이브러리 설치 후 import
가장 최상위 뷰는 무조건 isSkeletonable = true

각 요소에 적용하기 위해선 하나씩 설정해주면 된다

imageView.isSkeletonable = true

일단 내가 적용한 프로젝트에서는 스보로 하던 중이라 스보에서
ON을 해주었고, 코드로 할 경우 위와 같이 해주면 된다 !

 func setSkeleton() {

        self.titleLabel.linesCornerRadius = 5
        self.descriptionLabel.linesCornerRadius = 5

        self.titleLabel.numberOfLines = 0
        self.descriptionLabel.numberOfLines = 0

        view.showAnimatedSkeleton()

        DispatchQueue.main.asyncAfter(deadline: .now() + 2) { [weak self] in
            self?.view.stopSkeletonAnimation()
            self?.view.hideSkeleton(reloadDataAfter: true)
        }
        
    }

skeletonview 적용한 코드 !
radius 값도 줄 수 있고 textlabel의 lines 를 0으로 설정해주면 skeletonview가
알아서 인식한다고 한다.

그리고 서버에서 데이터를 받아올 때 대부분 비동기 방식으로 처리하기 때문에 그 사이에 skeletonview를 많이 사용하는 것 같다 !

맨 마지막 코드를 사용하여 2초후 데이터가 불러와졌을 때 skeletonview가 hide 되도록 설정했다 !

그 외의 다양한 애니매이션이라던지 기본 속성들은 깃허브에서 자세히 설명되어있다 !

(1) view.showSkeleton()                 // Solid
(2) view.showGradientSkeleton()         // Gradient
(3) view.showAnimatedSkeleton()         // Solid animated
(4) view.showAnimatedGradientSkeleton() // Gradient animated