본문 바로가기

학습 노트/Swift UI (2022)

 (28)
12. Text Text 문자열을 표시하는 가장 기초적인 View이지만 기능이 꽤나 많은 편에 속한다. Locailzed String Localizable 파일 생성하기 프로젝트 내에 'Strings File'을 생성하고, 이름을 Localizable로 변경한다. 다른 이름을 사용하지 않는 것이 좋다. Localizable 파일 적용하기 프로젝트의 설정에서 Localizations를 찾아 원하는 언어를 추가한다. 이때 우측 상단의 검색을 이용하면 편리하다. Base와 English가 기본으로 적용돼 있다. 앞서 생성한 Localizable.strings 파일을 선택한 뒤 File Inspector에서 'Localize...' 버튼을 누른다. 아무 언어나 선택해 Localize를 누르면 이전에 눌었던 Localize.....
10 ~ 11. Sheet / FullScreenCover & Popover Sheet / FullScreenCover Sheet는 화면을 Modal 방식으로 표시한다. Modal은 화면 전체를 채우는 Full Screen Modal과 화면의 일부를 채우는 Sheet, Card, Card Modal 방식이 있다. Sheet는 화면에 표시될 때 아래에서 위로 올라오는 Present 방식으로 표시되고, 사라질 때 위에서 아래로 사라지는 Dismiss 방식으로 사라진다. struct Nav_Sheet: View { @State private var statusMessage = "" @State private var sheetState = false var body: some View { VStack { Text(statusMessage) .font(.largeTitle) Button(..
08 ~09. Alert & Confirmation Dialog Alert SwiftUI로 Alert를 표시하는 데에는 준비물이 하나 필요하다. struct View_Alert: View { @State private var result = "" @State private var alertStat = false var body: some View { VStack { Text(result) .font(.largeTitle) Button(action: { }, label: { Text("Show Alert") }) .padding() } } } 바로 State Variable로 위의 코드에서는 alertStat이라는 이름을 가진다. alert은 해당 변수를 조작하여 자신의 상태를 변경하는데 사용하기 때문에 반드시 필요하다. struct View_Alert: View { ..
07. Overlay Overlay View 위에 View를 덮는 View다. struct View_Group: View { var body: some View { ScrollView(.vertical, showsIndicators: false) { VStack { RoundedRectangle(cornerRadius: 15) .frame(width: 300, height: 300) .foregroundColor(.yellow) .overlay { RoundedRectangle(cornerRadius: 15) .frame(width: 100, height: 100) .foregroundColor(.red) } } ZStack { RoundedRectangle(cornerRadius: 15) .frame(width: 300, ..
05 ~ 06. Scroll View & Form Scroll View struct View_Group: View { var body: some View { VStack { Group { Text("Hello, World!") Text("Hello, World!") Text("Hello, World!") Text("Hello, World!") Text("Hello, World!") } .font(.largeTitle.bold()) .foregroundColor(.red) Group { Text("Hello, World!") Text("Hello, World!") Text("Hello, World!") Text("Hello, World!") Text("Hello, World!") Text("Hello, World!") Text("Hello, World!"..
03 ~ 04. Spacer & Group Spacer struct View_Spacer: View { var body: some View { VStack(spacing: 0) { HStack { Image(systemName: "suit.heart.fill") .resizable() .frame(width: 70, height: 70) .foregroundColor(.white) } .padding() .background(Color.blue) Spacer() VStack { Image(systemName: "suit.spade.fill") .resizable() .frame(width: 70, height: 70) .foregroundColor(.white) } .padding() .background(Color.red) } } } Space..
02. Stack Stack Stack은 정해진 한 방향으로 View를 나열하여 배치한다. 방향에 따라 V, H, Z Stack이 존재하며, 그림으로 나타내면 다음과 같다. Stack은 기본적으로 Embed 돼있는 View들을 모두 표시할 수 있는 최소한의 크기를 가진다. View들은 별도로 지정하지 않는 한 기본 여백을 자동으로 가지고, 가운데 정렬 방식으로 정렬된다. VStack struct ContentView: View { var body: some View { VStack(alignmnet: .leading) { Text("text1") Text("text2") Text("text3") Text("text4") } } } VStack의 V는 Virtical을 의미한다. 추가된 View부터 위쪽에 표시하고, 추가된..
01. Swift UI Swift UI Code(Swift)를 사용해 UI를 만든다. git, 업무 분담 시 Conflict에서 자유롭다. Storyboard - code가 Outlet, Action으로 연결되고 기능을 구현하는 것과 달리 SwiftUI는 모든 것이 Code로 구현돼 코드가 간결해진다는 장점이 있다. (Animation, Transition에 특히 유리) Simulator가 아닌 Xcode Preview를 사용해 결과를 실시간으로 확인하고 편집할 수 있다. Swift의 View는 구조체로 돼있으며 덕분에 작게 쪼개져도 성능에 미치는 영향이 적다. 따라서 View를 겹쳐 사용해도 효과적으로 동작할 수 있다. 필수적이고 자주 사용하는 기능들은 자동으로 처리된다 (DynamicType, DarkMode, Animat..

티스토리툴바