분류 전체보기273 8. [SwiftUI] VStack, HStack, ZStack 스택 VStack(수직 스택), HStack(수평 스택), ZStack(앞/뒤 스택) VStack (H,Z도 유사함) VStack(alignment: HorizontalAlignment, spacing: CGFloat?, content: () -> View) // spacing default값은 8, nil 할당 or 지우면 간격 8 적용 // content는 void -> View 함수타입. /* 클로저 문법 최적화를 통해 아래와 같은 형태로 많이 쓰는 것임. VStack { } */ HStack 예시 ZStack 예시 ( .overlay를 떠올려 보자) Stack in Stack in Stack in Stack ... 스택 안에 스택을 쌓으며 무궁무진한 조합을 만들 수 있다. // Created by To.. 2023. 4. 3. 7. [SwiftUI] .background() & .overlay() 백그라운드 & 오버레이 .background() 백그라운드 색 변경, Shape 활용, 프레임 활용 등 조합은 무궁무진하다. // Created by Toughie on 2023/04/03. // import SwiftUI struct Background_Overlay: View { var body: some View { Text("Hello, World!") .background( Circle() .fill(LinearGradient(colors: [Color.red, Color.blue], startPoint: .leading, endPoint: .trailing)) .frame(width: 100, height: 100, alignment: .center) ) .background( Circle() .fill(Linear.. 2023. 4. 3. 6. [SwiftUI] .frame() 프레임 화면 위의 모든 객체들은 default 프레임(직사각형 영역)이 있음 alignment -> 프레임 내에서 객체를 어떻게 정렬할 것인가? 아래 결과물과 코드를 보면 프레임이 무엇인지 더 잘 알 수 있을 것이다. (프레임 프레임 프레임 프레임 프레임...) 이전 프레임들을 마지막 프레임이 감싸는 형태임 (마지막이 푸른 프레임이니, 해당 프레임의 alignment를 .top으로 해주면 내부에 있는 프레임들이 모두 top으로 정렬됨 (정확히는 노란 프레임이 정렬된 것인데, 노란 프레임 안에 핑크, 보라, 오렌지..그리고 Text고유 프레임(초록색)이 모두 있으니..) 약간 현대미술 같은.. ㅋㅋㅋ 사실 이렇게 프레임마다 색을 설정해주는 식으로 하지는 않겠지만.. 프레임의 영역을 확인하기 위해서 백그라운드 컬러.. 2023. 4. 3. 5. [SwiftUI] Image() 이미지 삽입 외부 이미지를 삽입하는 방법. Shape와 동일하게 사이즈 변경 가능하게 .resizable() 해준 다음 frame, aspectRatio 등 다양한 Modifier를 활용 가능하다. 이미지가 만약 흰 배경이라면.. 렌더링 모드를 .template으로 해서 위와 같이 색을 바꿔주는 것도 가능하다. 혹은 Assets의 인스펙터에서 Render As를 Template Image로 바꿔줄 수도 있다. // Created by Toughie on 2023/04/03. // import SwiftUI struct ImageView: View { var body: some View { Image("프사") .renderingMode(.template) //이미지를 템플릿으로 쓰겠다. .resizable() .fr.. 2023. 4. 3. 15 - Login View Layout 다양한 컴포넌트를 올리고, 스크롤뷰, 스택뷰를 활용한 오토레이아웃 연습. 설정값 하나만 잘못되어도 난리가 나서.. 3번 정도는 해보았다. 이 정도 레이아웃을 혼자 잘 잡으면 오토레이아웃 기초반 정도?는 탈출할 수 있는듯한데.. 고려해야 하는 부분이 정말 많아서 여전히 어렵게 느껴진다. 🥲 그래도 뭐.. 연습해야지 어쩌겠는가! [학습 소스] 공식문서, 야곰 오토레이아웃 정복하기 강의 https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html https://yagom.net/courses/autolayout/ 2023. 4. 3. 4. [SwiftUI] System Icons 시스템 아이콘 기본 제공 아이콘들의 퀄리티가 좋기 때문에, 잘 활용하면 좋다. https://developer.apple.com/sf-symbols/ SF Symbols - Apple Developer With nearly 4,500 symbols, SF Symbols is a library of iconography designed to integrate seamlessly with San Francisco, the system font for Apple platforms. developer.apple.com 아이콘 이름은 SF Symbols 앱에서 확인할 수 있다. fill vs fit frame의 위 아래에 꽉 맞춰 채우는 .fill(가장자리 삐져나옴) frame 내부에 딱 맞게 채우는 .fit(프레임 밖으로 삐.. 2023. 4. 2. 이전 1 ··· 36 37 38 39 40 41 42 ··· 46 다음
