[Programming Language]/[SwiftUI] 15

[SwiftUI] NavigationLink 파란색 오버레이 변경 방법

[머릿말]NavigationLink를 적용한 각 항목은 하이퍼링크가 달렸을 때처럼 파란색 오버레이가 적용된다. 하지만 난 각 항목이 원래의 색상대로 표시되도록 하고 싶었다...1. foregroundStyle(_:) 사용첫 번째로는 각 항목에 대해 foregroundStyle(_:) 수정자를 적용하는 방법이 있다. 아래 예제에서 1번의 색을 초록색으로 변경해보았다.import SwiftUIstruct ContentView: View { var body: some View { NavigationStack { VStack(spacing: 20) { NavigationLink(value: "1") { Im..

[SwiftUI] NavigationStack 에서 back 버튼 색상 변경하는 방법

[머릿말]NavigationStack을 사용하여 화면 전환을 구현할 때 상단에 기본적으로 back 버튼이 존재한다. 실제 존재하는 다른 앱들을 살펴보면 이 부분(상단바) 전체를 커스터마이징하여 사용하는 것 같다. 나는 일단 back 버튼의 색상만 기본 색상인 파란색에서 흰색으로 바꿔보았다.1. tint(_:) 사용import SwiftUIstruct ContentView: View { var body: some View { NavigationStack { List { Section("학과") { NavigationLink("컴퓨터공학과", value: "컴퓨터공학과") ..

[SwiftUI] Non-constant range: argument must be an integer literal

[머릿말]임시로 뷰를 그려보기 위해 10가지 정도의 데이터를 담은 Array를 만들고 이를 ForEach를 사용하여 하나씩 나타나게 하는 과정에서이 경고를 접하게 되었다. ForEach(0.. 이것처럼 범위에 count 또는 indices 를 사용한 사람들은 이 경고를한 번쯤은 보았을 것 같다.1. 문제 상황위 코드처럼 ForEach문에서 범위에 count 또는 indices를 사용했을 때 이 경고를 접하게 되었다. 변하지 않는 값인 상수 범위가 사용되지 않았기 때문이다. count, indices는 데이터의 추가 또는 삭제가 발생함에 따라 충분히 변할 수 있는 값이기에 문제가 되는 것이다. 2. 이 Warning을 무시했을 때 문제가 발생하는 경우이는 어디까지나 Warning이기에 일단 뷰는 잘 나타난..

[SwiftUI] 라이트 모드(Light mode) or 다크 모드(Dark mode) 설정 방법

[머릿말]난 자동차의 카플레이까지 다크 모드로 사용할 정도로 다크 모드를 좋아하기에 핸드폰에서도 당연히 다크 모드를 사용하고 있다.그렇기에 현재 진행 중인 앱을 핸드폰에 올렸을 때 모든 것이 어둡기만 했다🌚난 아직 다크 모드를 받아들일 준비가 안되었기에 일단 라이트 모드로만 실행되도록 해두었다!1. 설정 방법너무나도 간단하게 설정할 수 있다. 1-1. 프로젝트 설정 -> Info 1-2. + 버튼을 눌러 Appearance 추가 -> Light (or Dark)  난 아직 다크 모드를 받아들일 준비가 되지 않았다...🤣그러나 난 다크 모드 없이는 디스플레이를 볼 수 없는 사람이기에 추후에 다크 모드도 대응되도록 구현해봐야겠다❗️ 끝!

[SwiftUI] Invalid frame dimension (negative or non-finite) 오류

[머릿말]뷰에서 사각형을 화면에 꽉 차게 만들고자 .frame(width: .infinity) 수정자를 사용했다. 코드를 작성할 땐 보이지 않던 Warning이 시뮬레이터를 실행하니 나타났다. 색깔도 노란색이 아닌 보라색으로 말이다.1. Invalid frame dimension (negative or non-finite) 오류란?"유효하지 않은 크기 (음수 또는 비정형)" 이 오류는 뷰의 크기가 유효하지 않을 때(음수이거나 비정형인 경우) 발생한다. frame에 음수 값을 넣는 경우는 거의 없기에 아마 대부분은 .infinity 값을 사용하고 이 오류를 접하게 되었을 것이다. 2. 오류 발생 원인위와 같은 코드를 작성할 때의 생각은 다음과 같았을 것이다."이 뷰의 크기는 부모 뷰의 남은 공간 전체가 되..

[SwiftUI] Custom Font 적용하는 방법

[머릿말]Figma에서 사용한 폰트를 Xcode에서 사용하려고 보니 없..다..그러나 안드로이드에서 그랬던 것처럼 iOS에도 당연히 커스텀 폰트를 적용하는 방법이 있다!1. 원하는 Font 구하기우선 사용할 폰트 파일을 구해야 한다. 가장 많이 사용하는 Google Fonts에서 원하는 폰트를 하나 다운받아보자. 나는 Figma에서 사용했던 Black Han Sans 폰트를 다운받았다. 2. 폰트 파일을 Xcode의 원하는 폴더로 드래그다운받은 폰트 파일을 드래그하여 Xcode의 원하는 폴더로 드래그하여 넣어준다. 뜨는 화면에서 파일을 복사할 것인지, 이동할 것인지 선택하면 된다. 3. 프로젝트 선택 -> Info에서 `Fonts provided by application` 추가Xcode 좌측 네비게이터..

[SwiftUI] Picker, pickerStyle - 여러가지 중 하나를 선택

[머릿말]iOS 프로젝트를 진행하면서 그동안 아이폰을 사용하면서 봤던 것들을 하나씩 접하게 되는데, 보물을 찾는 것처럼 재밌고 신기하다. 이번에 찾은 것은 여러가지 중 하나를 선택할 때 사용하는 Picker이다.1. Picker란?공식 문서에서의 내용은 다음과 같다."상호배타적인 값 집합에서 선택하기 위한 컨트롤" 여러 값에서 하나를 선택할 때 사용하는 것이라고 보면 되는데 아래 사진에 있는 것들이 모두 Picker이다. 2. 사용 방법2-1. Picker(_ titleKey:selection:content:) - 값의 집합을 만들지 않고 사용titleKey : Picker 제목selection : 선택된 값(Binding)content : Picker 구성 내용selection에는 각 아이템의 tag로..

[SwiftUI] Launch Screen(Splash Screen) 구현하는 2가지 방법

[머릿말]앱이 실행되면 처음에 보이는 화면이 있다. 이 화면을 Android에서는 Splash Screen이라 부르고 iOS에서는 Launch Screen이라 부른다. 이를 구현하는 방법을 2가지 찾았는데 이에 대해 정리하고자 한다.1. Launch Screen이란?이는 앱이 처음에 실행될 때 짧게 보였다가 사라지는 화면을 말한다. 2. 구현 방법2-1. Info.plist 파일 사용첫 번째 방법은 Info.plist 파일에 내용을 추가하는 것이다. 이를 위해 먼저 Assets.xcassets 파일에 사용할 Image Set을 추가해줘야 한다. 테스트 앱 아이콘으로 사용하려고 만든 이미지를 사용해서 Image Set을 추가해보았다. 이름은 LaunchImage로 하였다.  다음으로 왼쪽의 프로젝트 구조에..

[SwiftUI] 원하는 색상(color) 정의하여 사용하는 방법

[머릿말]예전에 안드로이드 앱을 개발했을 때의 기억으로는 colors.xml 파일에 원하는 색상을 따로 정의하여 사용했던 것 같다. iOS 역시도 색상을 정의하여 사용하는 방법이 있을 것이라 생각하고 내용을 찾아보았고 2가지 방법을 정리하고자 한다.1. Assets.xcassets 파일에서 New Color Set첫 번째 방법은 Xcode 프로젝트를 생성하면 자동으로 만들어지는 Assets.xcassets 파일에서 Color Set을 추가하는 것이다.  위 두 방법 중 한 가지를 선택하여 해보면 Color 라는 이름의 항목이 추가된다. 이 항목의 이름이 색상에 붙일 이름이 되는 것인데 이를 MyColor로 설정해보겠다.  Any Appearance를 선택하고 Xcode의 우측 상단 버튼을 눌러 Inspe..

[SwiftUI] 앱 아이콘(Icon) 설정 방법

1. Assets.xcassets 파일프로젝트를 생성하면 자동으로 생성되는 파일인 Assets.scassets 파일을 Xcode에서 열어보면 다음 화면을 볼 수 있다.이 프로젝트는 Multiplatform App을 선택하고 생성한 프로젝트이기에 위와 같은 화면이 보이게 된다. 여기서 가장 큰 이미지 크기는 1024x1024px이므로 이 크기의 이미지 1장을 준비해야 한다.  2. 여러 규격의 사진을 자동으로 만들어주는 사이트다양한 규격의 사진을 하나하나 편집하는 것은 여간 귀찮은 일이다. 그러나 아래 사이트에서 이 일을 쉽게 할 수 있다. App Icon Generator www.appicon.co 2-1. 1024x1024px 크기의 사진 업로드앱 아이콘으로 사용할 이미지를 업로드하고, 사용할 운영체제..