글그리 블로그

UI는 데이터를 화면에 맞게 구성해서 보여주는 것도 중요하지만 사용자의 입력, 데이터의 변동에 따라 유동적으로 움직이는 효과가 굉장히 중요하다. 잘 만든 transition과 animation은 속도감도 주고 앱 자체의 완성도도 올려준다. PPT를 잘 만들려면 애니메이션이나 모핑 같은 기술을 사용해야 하는 것과 같다. 리스트를 만들어 볼 건데, 이 리스트는 간략하게 요약된 노드가 보이지만, 각 노드에 있는 버튼을 누르면 커지면서 세부 내용이 보이도록 할 거다. 먼저 리스트를 채울 노드를 만들어 보자. Stack으로 레이아웃을 구성하고 우측에 버튼을 추가한다. showDetail이라는 변수를 추가해서 이 변수에 따라 노드에 제목만 표시할지, 세부 내용도 같이 표기할지 분기하도록 한다. 이 값을 실시간으로 ..

Path를 사용해서 화면에 그림을 그리는 방법을 알아보자. openGL이나 window GDI를 사용하는 것과 비슷하다. 화면에서 시작점으로 이동하고 선을 그리고 채우는 등의 작업을 할 수 있다. 공식 사이트에 나와있는 육각형 그리기를 따라해보면서 어떻게 동작하는지 알아보자. HexagonParameters 육각형을 그리기 위해 필요한 각 점들의 위치를 상대적으로 계산할 수 있는 구조체를 정의한다. 꼭지점을 그릴 때 필요한 vertex의 상대적인 위치값이지만 원리는 이 포스팅에서 중요한게 아니기 때문에 설명을 생략한다. points는 순서대로 육각형의 12시 방향 vertex부터 반시계방향으로 정의되어있다. CGFloat이라는 자료형을 사용한다는 것만 유의하고 넘어가자. struct HexagonPara..

첫번째 view는 sticky header를 만들어보자. AppStore에서 많이 볼 수 있고, 배너가 있는 view에서 주로 사용된다. 설계 상단에 배너이미지를 넣고 스크롤 할 수 있도록 아래에 적당한 내용을 추가한다. 배너는 이미지와 텍스트로 구성하며 아래로 스크롤을 하면 이미지가 스케일되면서 윗변이 화면의 상단에 붙어있는듯한 효과를 준다. 구현 var body: some View { ScrollView(.vertical) { GeometryReader {g in // content } } .edgeIgnoringSafeArea(.top) } 스크롤 기능이 있어야하기 때문에 ScrollView로 시작한다. 노치를 무시하기 위해서 상단 SafeArea를 무시하도록 설정한다. 이 안에 세로로 컨텐츠들을 ..

SwiftUI의 철학 거창하게 철학이라고 제목을 짓긴했지만 SwiftUI를 앞으로 어떻게 접근해야할지 감을 잡기 위해 문법과 동작원리를 간단하게 알아보자. 먼저 기본적으로 생성되는 코드를 보면 AppDelegate, SceneDelegate, ContentView이렇게 3개의 파일이 생성되는것을 볼 수 있다. SceneDelegate를 열어보면 ContentView의 인스턴스를 생성해서 UIWindowScene에 등록하는것을 볼 수 있다. 그리고 ContentView를 열어보면 구조체가 정의되어있는데 이 구조체를 생성해서 등록하면 화면에 해당 view가 그려지는것이다. 구조체는 body라는 변수를 가지고있는데, 모든 View는 이 변수를 가지고있어서 꼭 정의해주어야한다. struct ContentView..