[Project 1 - 2]Nflix UI

https://carki.tistory.com/4

[Project 1 - 1]Nflix UI

이 전에 작성했던 Nflix 프로젝트에 살을 붙여봐야겠다

---

아무 기능이 없는 UI에서 미리보기 밑에있는 영화 이미지를 클릭하면 해당 영화 이미지가 어벤져스 이미지 공간에 보여지는

기능을 만들어보자(지금은 이미지뷰라서 눌러도 아무런 변화가 없다.)

 

1.이미지뷰를 버튼으로 바꾼다.

버튼의 크기도 이전 이미지 크기와 110*110으로 동일하게 설정해준다.

 

2.버튼에 이미지를 넣는다.

인스펙터 영역

이미지를 넣고자하는 버튼을 클릭하고 우측 인스펙터 영역에서 작고 소중한 이미지 선택 영역에서 넣고자하는 이미지를 넣어주자.

이미지 파일은 당연히 에셋 폴더에 존재하는 파일중에 선택 가능하다.

 

???

역시 뭐 하나 쉽게 되는게 없는 Xcode...이미지가 버튼을 뚫고 나와버렸다.

인스펙터 영역에서 Content Mode를 건들여봐도 아무런 변화가 없다.(갑자기 졸리기 시작했다)

 

구글링은 피로회복에 도움이 된다.

버튼을 클릭하고 우측 인스펙터 영역에서 Type을 Custom으로, Style을 Default로 바꿔주니 버튼 크기에 핏 하게 이미지가 들어갔다.

스토리보드 말고도 코드로 같은 결과를 낼 수 있다고하니 한번 찾아봐야겠다.

 

같은 방법으로 같은 크기의 이미지 버튼을 두개 더 만들어주고, 버튼을 누르면 메인 이미지가 바뀌는 이벤트를 작성해보자

 

3.마무리..?

위 코드를 토대로 잘 동작하는지 시뮬레이터(아이폰11-iOS15.5)로 테스트를 진행했다.

테스트 결과

자 그럼 이미지 버튼을 동그랗게 만들기만 해주면 이번 프로젝트는 여기서 마무리된다.

 

Xcode는 쉽지 않다2

이미지를 원형으로 만드는 것과 같은 방식으로 cornerRadius 값을 조정했으나 이미지버튼에 변화가 없었다.(버튼 크기 110*110)

아마도 cornerRadius를 하더라도 이미지뷰, 버튼의 자체 크기가 변한다기 보다는 모서리를 기울여 원형으로 만드는 방식이기 때문에 버튼 내에 들어가있는 이미지에는 변화가 없는 것 같다..

 

4. 2022.7.12 추가

.clipsToBound => 이미지버튼 내부를 제외한 테두리 바깥쪽을 지워버림(Default)

그림자가 있는 모서리를 표현할때는 제한적일 수 있으니 상황에 맞게 활용하자.

---