커스텀 로딩 뷰 만들기

커스텀 로딩 뷰 만들기 

 

간단한 로딩 뷰를 만들어 봅시다.

먼저 새로운 프로젝트를 생성해줍니다.

싱글 뷰 앱을 만들어줍니다.

저는 이름을 간단하게 LoadingView라고 지었어요.

 

로딩 뷰를 만들기 위해서 View를 생성해줍니다.

User Interface섹션에서 View를 생성해줍니다.

이름은 LoadingView로 설정했습니다.

이것도 LoadingView라고 지으니까 프로젝트 명이랑 같아서 헷갈리긴 하네요.

하핫...😹(포스팅할려니 신경 쓰이기 시작한 네이밍)

여하튼 LoadingView를 만들면 xib파일이 생기게 됩니다.

그리고 이 뷰를 컨트롤 할 스위프트 파일을 생성해줍니다.

UIView의 서브클래스인 LoadingView를 생성해줍니다.

그럼 LoadingView스위프트 파일이 생성됩니다.

확인되시나요 😁

저는 LoadingView는 그룹화해서 묶어줄게요.

LoadingView라는 그룹을 만들고 LoadingView.xib, LoadingView.swift파일들을 넣어줍니다.

여기까지는 필요한 파일들을 생성해준 단계라고 생각하시면 됩니다.

그리고 LoadingView.xib파일에 와서 뷰를 수정해줄 거예요.

어트리뷰트 인스펙터에 가시면 Simulated Metrics섹션이 보일 거예요.

거기에 Size를 디폴트는 Inferred지만 Freeform으로 변경해줄 거예요.

사이즈 인스펙터에 가시면 View섹션에 Width와 Height가 보이실 거예요.

뷰의 Width와 Height를 변경해 뷰 사이즈를 조정할 수 있어요.

저는 100 100으로 설정했습니다.

저 조그만한 뷰가 제가 사용할 로딩 뷰가 될 거예요.

3개의 점이 차례로 움직이는 걸 표현하기 위해서 3개의 뷰를 추가해줍니다.

새로 생성한 각각의 뷰 넓이 높이는 각 10으로 지정했으며,

각각의 뷰를 구분할 수 있도록 (빨, 파, 초) 색상도 지정했습니다.

짠 여기까지 완성하셨나요.

그리고 constraint 설정하기 쉽게 빨간색 파란색 초록색 뷰를 예쁘게 정렬해주세요. 

 

여기서 각각의 뷰에 constraint를 설정해줄 거예요.

먼저 넓이와 높이를 설정해주겠습니다.

3개의 뷰를 선택해서 10 10 넓이 높이를 고정시켜 주세요.

다음으로는 가운데에 있는 파란색 뷰만 선택해주고 Horizontally in Container과 Vertically in Container을 설정해줍니다.

파란색 뷰를 (중심으로 두고) 기준으로 빨간색 초록색 뷰의 위치를 잡을 거예요. 

그리고 빨간색 뷰는 파란색 뷰와의 관계에서 오른쪽에 constraint를 16으로 설정해줍니다.

그리고 초록색 뷰는 파란색 뷰와의 관계에서 왼쪽에 constraint를 16으로 설정해줍니다.

여기까지 정리하면

빨간색 뷰와 초록색 뷰는 넓이 높이는 10 10으로 정했고

X위치는 파란색 뷰에서 16만큼 떨어진 위치로 정했고...

여기까지 했어요 그럼 Y위치도 지정해줘야겠죠.

 

Y위치는 Center Vertically로 설정해줄 거예요.
빨간색 뷰와 초록색 뷰에서 컨트롤 누르면서 파란색 뷰로 오른쪽 마우스를 드레그로 가져가 보면 하단과 같이 설정이 뜹니다.

둘 다 Center Vertically를 먹여줍니다.

그럼 각각의 뷰에 대한 설정은 끝난겁니다.

여기까지는 로딩 뷰를 꾸민거였어요.

 

이젠 로딩 뷰를 컨트롤해야죠.

아래 화면과 같이 Placeholders에 File's Owner이 보이시나요. 

File's Owner을 클릭해주세요.

그리고 어트리뷰트 인스펙터에서 Class를 LoadingView로 설정해주세요.

이 작업이 아까 만든 스위프트 파일과 연결하는 작업입니다. 

여기까지 해주고 LoadingView.swift파일로 가줍니다.

그리고 IBOutlet Collection을 만들어 줄 거예요.

아래와 같이 작성해줍니다.

딱 봐도 아까 빨간색 파란색 초록색 뷰를 담을 컨테이너 같지 않나요.

이름도 dots👻딱 봐도 점들 ㅋㅋㅋㅋ

네 여기에 빨간색 파란색 초록색 뷰를 연결시킬 거예요.

다시 LoadingView.xib파일을 눌러 File's Owner을 선택해 컨넥션 인스펙터로 가주세요.

Outlet Collections에 dots라고 뜰 거예요. 

dots에 각각의 뷰를 하나씩 연결해주세요.

🖐아 이때 꼭 빨간색부터 연결해주세요.

빨간색부터 순차적으로 실행해야 하니까요.

 

그리고 다시 LoadingView.swift파일로 와주세요.

초기화에 필요한 코드를 작성해줍니다.

initXIB()에서 xibName부분이 당연히 에러가 발생할 거예요.

xibName은 본인이 xibName으로 설정해둔 파일명을 작성해주면 됩니다.

(저 같은 경우는 "LoadingView"겠죠)

 

여기까지는 xib파일을 불러온 작업입니다.

당연히 빨간색, 파란색, 초록색 뷰는 움직이지 않습니다.

 

애니메이션을 추가해줘야죠.

아래의 코드가 애니메이션을 설정해준 코드입니다.

차근차근 코드를 살펴봅시다.

 

dots는 빨간색, 파란색, 초록색 뷰가 차례로 담겨있습니다.

for문을 돌면서 각각의 뷰에 접근합니다.

접근한 뷰에 대해서 CGAffineTransform의 scale을 사용해 뷰의 스케일을 조절해줍니다.

 

그리고 UIView의 animate를 함수를 사용해 0.6초 동안 실행해줍니다.

delay부분은 Double(index + 1) * 0.2라고 설정했습니다.

이유는 index가 0부터 시작하기 때문에 1부터 시작하도록 하기 위해서 Double(index + 1)라고 설정했습니다.

즉 3개의 뷰는 자기 인덱스 + 1에 맞게 0.2, 0.4, 0.6 dealy를 가집니다.

*0.2의 간격을 두고 차례로 애니메이션이 실행되겠죠.

 

Option으로는 repeat과 autoreverse를 설정해줬습니다.

 

마지막으로 각각의 뷰의 scale을 초기화시켜주는 작업을 했습니다.

 

(CGAffineTransform이나 scale이나 identity 등 조금 생소하다고 느껴진다면,

CGAffineTransform에 대해서 작성한 글이니 참고하셔도 좋을 것 같습니다.)

 

2019/01/13 - [개발 👩‍💻/iOS] - iOS CGAffineTransform 사용하기

iOS CGAffineTransform 사용하기

여기까지 하면 로딩 뷰는 다 된 겁니다.

 

실제로 사용할 뷰 컨트롤러로 와줍니다. 

로딩 뷰 프로퍼티를 생성하고 setLoadingView함수를 따로 생성해서 loadingView를 설정해줍니다.

그리고 실행하면 각각의 뷰들이 애니메이션 원하는 대로 움직임을 확인할 수 있습니다.

 

엇 빨간색, 파란색, 초록색 조합으로는 gif로 만들어놓은 것은 색이 없네요.

(빨, 파, 초 조합 대신 아래 gif를 봐주세요.)

네모나게 설정해도 되고 오른쪽처럼 둥그렇게 설정해도 되고

색상도 원하는 대로 지정해도 되고 알파 값 등등 원하는 스타일에 따라 설정할 수 있습니다.

 

여기까지 간단한 로딩 뷰 만들기였습니다.

ㅋ킄ㅋ킄