[Project 1 - 1]Nflix UI

Nflix Project

오브젝트에 기능이 없는 단순 UI를 설계해보자

이전에 배운 내용을 바탕으로 레이블, 버튼, 이미지로 구성된 넷플릭스 프로젝트를 만들어보자.

---

1.이미지 파일 삽입하기

사용된 이미지 파일

우선 위 프로젝트에 사용될 이미지 파일을 "Assets.xcassets" 폴더에 삽입해줬다.

 

2.Launch Screen

Launch Screen

앱 실행시 보여지는 뷰, 시간이 지나면 메인 스토리보드로 넘어간다.

 

3.Main.Storyboard

메인 스토리보드

Label, ImageView, Button을 활용하여 뷰에 배치했다.

하단의 미리보기 이미지를 원형으로 만들면 UI완성이다.

 

4.CornerRadius

정사각형 이미지를 원형 이미지로

내가 이해한 CornerRadius 원리는 CornerRadius의 값을 반지름으로 하는 원을 만드는 것이다.

즉 위의 CornerRadius는 정사각형의 너비(width) 길이의 반을 반지름으로 갖는 원형 이미지를 만드는 셈이다.(높이로 해도 무방하다)

위에 사용된 세 개의 이미지는 모두 110 * 110 크기의 정사각형 이미지다, 만약 수치 대입을 통하여 결과를 얻고 싶다면

위에 설명한 원리대로 CornerRadius 에 55를 대입한다면 같은 결과를 얻을 것이다.

 

수치입력, CornerRadius = 55를 하더라도 같은 결과가 나온다.