Comments (3)
Stack
HStack과 VStack
- 아랍권 국가에서는 오른쪽 -> 왼쪽 방향으로 글을 읽고, SwiftUI는 이러한 방향 변경에도 완벽하게 대응.
- 그래서 left & right이 아니라, leading trailing으로 표현한다.
Layout Priority
- Stack의 요소들을 화면에 전부 표시하기 어려운 경우를 대비하기 위해, 우선도를 표시해줄 수 있다.
- HStack은 가장 flexible하지 않은 순서대로 공간을 배정해 줄 것이다. 아보카도 이미지 -> Delicious -> Avocado Toast 순서로 배정이 될 것.
- 근데 글자가 잘려야만 한다면 Delicious보다는 Avocado Toast가 살아남는 게 나을 것이므로 우선도를 부여.
Alignments
- 사이즈가 제각각이라 alignment를 하나로 맞췄을 때 아래 라인이 거지같이 나올 수 있다.
- SwiftUI는 이를 간단하게 해결할 수 있도록 lastTextBaseline을 제공한다.
- 이미지는 baseline이 없지만, default로 bottom을 가지지만... 이미지 정렬에 대해 디자이너는 여전히 불만족할 수 있고
- 이렇게까지 설정이 가능하다..!
- 각 Stack끼리 alignment가 맞지 않는 경우에도 해결이 가능하다.
- alignment를 extension하여 custom하게 만들고 설정해줄 수 있다.
from wwdc-memos.
SwiftUI Graphics
이전에 Core Graphics로 구현하던 것들.
Drawing <-> View
- SwiftUI에서는 Drawing들도 다 View다.
- 일반적인 View들처럼 속성을 적용할 수 있다.
Drawing Model
- 그래디언트나 패턴도 쉽게 적용이 가능하다..!
- 그래디언트 객체를 만들고 Drawing 객체에 집어 넣어주면 뚝딱 완성이다.
반응형 그래디언트 도넛 그래프(?) 만들기
- Path를 이용해서 모양을 그려준다.
- 애니메이션을 넣어 주기 위해 필요한 데이터를 따로 선언해준다.
- 그러면 이제 준비는 끝났고
- 그래디언트를 채워주는 것과
- 나머지 조각들을 모아서 원 모양을 그려주는 2가지가 남았는데...
- 이 때
ZStack
을 사용한다.
ZStack
z축 컨트롤을 통해 원근감을 보여줄 수 있다.
- 아래에 쓰인
scaleAndFade
는 custom하게 만든 트랜지션 동작이다.
- 트랜지션을 custom하게 만든다는 건 어떤 의미일까?
- 중간 과정들은 프레임워크가 알아서 해줄 것이고, 개발자는 시작과 끝 상태만 말해주면 된다.
- 상태를 전달해주기 위해 ViewModifier 객체를 만들어 주는데, 여기서도 body를 정의해준다.
- 그리고 아래와 같이 전달해주면 알아서 트랜지션화해서 보여줄 것이다.
성능 개선하기
- 각 Drawing은 기본적으로 하나의 NSView로 이뤄지므로, 많아진다면 성능 상의 이슈가 발생할 수 있다.
- 이때, View를 그룹화하여 렌더링 시의 과부하를 줄여줄 수 있다.
- drawingGroup에 넣어주면, View들은 모두 하나의 NSViewer로 플랫화되고, metal로 렌더링된다.
from wwdc-memos.
마치며..
- SwiftUI의 장점은 View뿐만 아니라 Animation, Transition, Layout 등 보여주기 위한 모든 기능을 한 프레임워크에 모아서 일원화했다는 것이다.
- 개발자는 꺼내 쓰기만 하면 된다!
from wwdc-memos.
Related Issues (1)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wwdc-memos.