SWIFTUI/Others27

• 

  SwiftUI : Sheet & FullScreenCover & Transition & Animation 비교 Sheet & FullScreenCover & Transition & Animation 이번에는 Sheet & FullScreenCover & Transition & Animation를 비교해보도록 하겠습니다. 위 수정자를 사용해서 모두 동일하게 sheet의 효과를 줄 수 있습니다. 간단하게 sheet부터 시작하도록 하겠습니다. Sheet sheet수정자는 sheetView에 presentationMode를 적용시켜 sheet뷰에서 "X" 버튼을 누르면 닫힐 수 있도록 만들어 줬습니다. import SwiftUI // MARK : Body struct ContentView: View { @State var showView: Bool = false var body: some View { ZStack(ali.. SWIFTUI/Others 2021. 5. 11.

• 

  SwiftUI : 애니메이션과 비슷한 Transitions Transition 에 대해 알아보도록 합시다. Transitons Transitions은 Animation과 매우 유사한 기능입니다. 하지만 이것을 사용하기 위해서는 반드시 조건부가 필요합니다. 확실히 animation을 사용하는 것보다는 복잡하죠. 바로 코드로 한번 알아볼게요. 기본적으로 버튼이 false이면 도형이 숨겨지고 true이면 나타나게 opactiy를 사용하여 구현할 수 있습니다. import SwiftUI struct ContentView: View { @State var transitionView: Bool = false var body: some View { ZStack(alignment: .bottom) { VStack{ Button("버튼") { transitionView.togg.. SWIFTUI/Others 2021. 5. 10.

• 

  SwiftUI : Animation #3 Animation #2강 Animation #3 이번에는 Animation을 실제로 비교해가면서 사용해보도록 하겠습니다. 우선 Animation은 앞서 배웠기 때문에 바로 코드로 비교해보도록 할게요 :) Animation.default 각 RoundedRectangle에 삼항연산자를 사용해서 값을 넣어줬고 overlay를 사용하여 어느 효과를 부여받고 있는지 보기 좋게 텍스를 적어줬습니다. 이제 아래 결과 화면을 보며 효과를 비교해 볼 수 있겠죠? import SwiftUI struct ContentView: View { @State var animate: Bool = false let timing: Double = 10.0 var body: some View { VStack { Button("애니메이션.. SWIFTUI/Others 2021. 5. 10.

• 

  SwiftUI : Identifiable을 사용하여 연락처 뷰 연락처 뷰 이번에는 Identifiable 프로토콜을 사용하여 연락처 앱을 간단하게 만들어 보겠습니다. 메인 화면 구성 우선 contentView에 사용자 연락처를 배열해주도록 하겠습니다. 우선 아래 이미지를 다운로드하여 Assets에 넣어주겠습니다. import SwiftUI struct ContentView: View { var body: some View { VStack { HStack { Image("Leon") .resizable() .scaledToFit() .frame(height: 60) .clipShape(Circle()) VStack(alignment: .leading) { Text("Leon") .fontWeight(.black) Text("+82 10 1234 6523") } } }.. SWIFTUI/Others 2021. 5. 3.

• 

  SwiftUI : ScrollToTop 맨위로 버튼 ScrollToTop 스크롤을 내리면 우측 하단에 Top버튼이 나오고, 그 버튼을 누르면 상단으로 이동하는 버튼을 만들어 보겠습니다. NavigationView 생성 Home struct를 따로 만들어 놓고 body 부분에 Home을 호출 한 뒤 NavigationView로 감싸줍니다. import SwiftUI //MARK : Body struct ContentView: View { var body: some View { NavigationView { Home() .navigationBarTitle("티스토리") } } } //Home View struct Home: View { var body: some View { Text("some") } } 샘플 로우 생성 ScrollView를 사용하여 샘플 R.. SWIFTUI/Others 2021. 4. 28.

• 

  SwiftUI : DarkMode 구현하기 - Environment .DarkMode적용 법에 대해 알아보도록 합시다. DarkMode SwiftUI에서 사용자가 DarkMode인지 LightMode인지에 따라 앱 화면을 자동으로 설정해줄 수 있는 기능이 있습니다. 이것을 사용하기 위해서는 Environment에 대한 기본적인 지식이 있어야 합니다. [SwiftUI 기초/Others] - SwiftUI : EnvironmentValues 우선 간단하게 화면에 Alert버튼과 배경화면을 설정해주겠습니다. 배경화면 및 버튼 추가 ZStack { //1.배경설정 Color.yellow .edgesIgnoringSafeArea(.all) VStack { Spacer() //2. 버튼생성 Button(action: { print("버튼이 눌렸습니다.") }, label: { Te.. SWIFTUI/Others 2021. 4. 14.

• 

  SwiftUI : Preview 레이아웃을 미리 보는방법 Preview 에 대해 알아보도록 합시다. Preview 동작 과정 struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } 현재 소스 에디터에 PreviewProvider프로토콜을 준수하는 타입이 존재하는지 확인. PreviewProivder프로토콜의 필수 구현 사항인 previews 타입 프로퍼티에서 뷰 생성. 액티브 스킬의 목적지로 선택한 시뮬레이터 또는 맥에 연결한 기기의 형태로 preview container 렌더링. 리뷰 컨테이너를 직접 지정해 줄 경우 3번 에서 선택한 기기를 무시하고 해당 기기 형태로 렌더링. 따라서 가장 먼저 현재 소스 에디터 상에 띄워진 파일에 Previ.. SWIFTUI/Others 2021. 4. 5.

• 

  SwiftUI : layoutPriority( ) - 뷰 우선순위 layoutPriority 에 대해 알아보도록 합시다. layoutPriority SwiftUI에서 뷰의 위치와 크기를 계산하는 방법과 .layoutPriority()를 사용하여 해당 프로세스를 변경하는 방법을 알아보도록 하겠습니다. 우선 간단하게 텍스트를 작성해보도록 하겠습니다. struct ContentView: View { var body: some View { Text("서근 개발블로그!!") } } SwiftUI는 사용 가능한 모든 공간을 ContentView에 전달합니다 . ContentView 에는 TextView 인 자식이 하나만 있습니다. ContentView 는 사용 가능한 공간을 TextView에 제안하고 크기를 계산하도록 요청합니다. TextView는 콘텐츠의 크기를 측정하여 Con.. SWIFTUI/Others 2021. 3. 14.

• 

  SwiftUI : Redacted ( onAppear / disabled ) 콘텐츠 모자이크 Redacted 에 대해 알아보겠습니다. Redacted(reason: .placeholder) iOS 14에서 SwiftUI에는 모든 콘텐츠를 redact 하는 새로운 한정자(modifier)가 있습니다. 새로운 view 한정자가 있는 모든 view 에 .redacted(reason:) 을 적용할 수 있습니다. 이 한정자에는 이유 한정자(reason modifier)가 필요한데, 이는 이 redact 작업의 이유를 SwiftUI에 알려줍니다. 현재 Apple은 한 가지 reason modifier 만 제공하고 있습니다. (reason: .placeholder) Text("Hello, SwiftUI!") .redacted(reason: .placeholder) 이름에서 알 수 있듯이 .placeholde.. SWIFTUI/Others 2021. 3. 7.

• 

  SwiftUI : Menu 버튼을 눌렀을 때 메뉴를 표시 본 게시글은 acking with swift님의 게시글을 참고하여 작성된 글 입니다. menu에 대해 알아보도록 합시다. Menu SwiftUI는 버튼에서 팝업 메뉴를 표시하기위한 Menu라는 전용 뷰를 제공합니다. 메뉴에 표시할 항목을 제어하기 위해 다양한 버튼을 추가해줄 수 있습니다. 우선 간단한 예를 한번 알아보겠습니다. struct ContentView: View { var body: some View { Menu("Create") { Button("Cancel", action: {}) Button("Search", action: {}) Button("Add", action: {}) } } } Menu 키워드를 사용하고 메뉴 이름을 “Create”로 지정해줬습니다. 다음으로 메뉴 중괄호{ }안에 .. SWIFTUI/Others 2021. 1. 30.

• 

  SwiftUI : Animation #2 Animation #1강 Animation #2 animation stack 컨트롤 다음 예제는 클릭시 clipShape를 통해 배경색과 버튼 모양들이 변하는 코드를 작성하도록 하겠습니다. 우선 @State 에 bool 값을 할당해 준 후, 버튼 액션을 toggle로 설정해줍니다. struct ContentView: View { @State private var animationAmount = false var body: some View { Button("Tap Me") { self.animationAmount.toggle() } //background 보다 frame이 먼저 와야 한다. .frame(width: 200, height: 200) .background(Color.blue) .foregro.. SWIFTUI/Others 2021. 1. 26.

• 

  SwiftUI : Animation #1 Animation에 대해 알아보도록 합시다. Animation #1 버튼을 클릭할때마다 화면 또는 이미지가 커지는 효과를 주는것은 CGFloat 와 .scaleEffect를 사용해야합니다. struct ContentView: View { //State로 animationAmount에 CGFloat을 넣어준다 @State private var animationAmount: CGFloat = 1 var body: some View { Button("Tapl Me") { //버튼이 탭 될때마다 +1씩 상승한다 self.animationAmount += 1 } .padding(50) .background(Color.green) .foregroundColor(.white) .clipShape(Circle()) /.. SWIFTUI/Others 2021. 1. 26.