본문 바로가기

반응형

iOS

(10)
[UIKit] iOS 14에서 Compositional Layout 빈 공간 생기는 이슈 해결 이번에 UICollectionView에 Compositional Layout 샘플코드를 작성해봤다.DiffableDataSource도 같이 사용했다.다음과 같은 UI를 구현하였다.이미지를 보면 알겠지만, 위에 섹션은 가로스크롤 하단 섹션은 세로스크롤로 구성하였다.가로스크롤 되는 Cell에 컬러값을 넣었지만, 실제로 API 통신 등을 통해 데이터를 불러오고,불러온 데이터가 없으면 해당 섹션을 보여주지 않도록 구현하려고 했다.내 지식으로는 데이터가 없으면 datasource에 apply 하지 않기 때문에 해당 영역이 눈에 보이지 않을 것이라고 생각했고,생각대로 구현 되었다.수정한 코드 조각은 다음과 같다.구현된 UI는 다음과 같다. (iOS 18.x.x 환경)그런데 iOS 14.x.x 환경에서는 아예 가려지..
[iOS] Apple Login 구현하기 (MVVM) 오늘은 Apple Login을 MVVM 구조로 구현해보려 합니다. 먼저, Apple Login을 하기 위해서는 개발자 계정이 필요합니다. 1. Set the bundle ID https://appstoreconnect.apple.com/apps 위 사이트에 로그인 한 후, 앱 옆에 + 버튼 -> 신규 앱을 누르면 다음과 같은 화면이 나옵니다. https://appstoreconnect.apple.com/login?targetUrl=%2Fapps&authResult=FAILED appstoreconnect.apple.com 인증서, 식별자 및 프로파일을 클릭해줍시다. Bundle ID를 입력한 후 아래에 있는 Sign In with Apple 항목에 체크해줍시다. 이제 ID를 등록하였습니다. 2. MVC로..
[SwiftUI] Grid에 대해서 알아보자 List?? Grid? List는 UIkit에 테이블뷰와 거의 유사하고, Grid는 CollectionView라고 생각하면 이해하기 쉬운 것 같습니다. 가장 큰 차이점으로는 List는 수직스크롤만 가능하다는 점이고, Grid는 수직, 수평 스크롤 둘다 가능합니다. 수직은 LazyVGrid, 수평은 LazyHGrid를 사용합니다. 예시 1부터 99까지의 숫자들을 수직 형식으로 구현해보려 합니다. Cell로 사용될 View를 다음과 같이 작성해주었습니다. 먼저 LazyVGrid로 수직 방향으로 스크롤이 되도록 구현하려 합니다. 그런데 [GridItem] 타입을 넣어주어야 하는군요. LazyGrid의 layout을 구현하는 용도라고 합니다. GridItem을 작성하려고 하니 다음과 같은 enum 타입의 무언가..
[SwiftUI] State, Binding에 대해 알아보기 State란? SwiftUI에서 관리하는 값을 읽고 쓸 수 있는 property wrapper 속성을 선언할 때, 앞에 @State를 작성해주어야 합니다. 상태가 변경된다면 View는 자동으로 업데이트 됩니다. SwiftUI에서는 이러한 상태 정보를 따로 보관하고, 관리합니다. 주의해야할 점으로 @State로 작성한 경우에는 private 접근 제어자를 붙여주어야 하고, 가장 상위 뷰에서 작성해야 합니다. Binding이란? 값을 읽고 쓸 수 있는 property wrapper Binding을 사용하여 State를 사용한 View와 양방향 연결을 만들 수 있습니다. 사용 @State를 사용해 버튼이 눌릴 때 toggle이 되도록 작성하였습니다. 이 버튼을 따로 빼주어서 사용하고 싶은데, 저 isPlayi..
[SwiftUI] Stack을 사용해 Layout 그리기 Stack UIKit에서는 AutoLayout을 사용하여 layout을 구성했는데, SwiftUI에서는 Stack을 사용한다고 합니다. HStack, VStack, ZStack을 사용하며 생김새는 다음과 같습니다. UIKit의 StackView와 비슷한 것 같네요. Spacer와 Divider를 사용하면 유연하고 복잡한 레이아웃을 만들 수 있다고 합니다. Stack Initializer alignment: 서브뷰를 정렬 (default: .center) spacing: 서브뷰의 간격 (default: nil) content: 구현부 spacing은 HStack과 VStack에만 존재합니다. Spacer 그렇다면 Spacer란 뭘까요? 스택에 포함된 경우, 스택 레이아웃의 주축을 따라 확장되며 스택에 포함..
[SwiftUI] Modifier에 대해 알아보자! Modifier란? 각 컴포넌트들의 속성을 바꿀 수 있습니다. 쉽게 말해서 옵션이나 설정 값들을 변경할 수 있습니다. 예를들어, Text의 font를 정해줄 때 다음과 같이 사용합니다. 여기서 사용된 .font가 modifier 입니다. 이 .font를 한 번 살펴보겠습니다. Text를 받아서 Text를 리턴해주고 있네요. 즉, 기존 Text에서 속성을 변경한 Text를 리턴해주고 있습니다. 또한 modifier는 순서대로 진행되며, 컴포넌트들의 타입별로 다르기 때문에 순서에 주의해야합니다. 순서 주의 Text에서 View로 리턴하는 modifier를 사용한다면 이제 타입이 Text에서 View로 변경되었기 때문에 Text를 받는 modifier는 사용할 수 없습니다. 다른 타입에서도 마찬가지 입니다. ..
[iOS] UITableView를 사용해 Cell별로 알맞는 데이터 보여주기 지난 포스팅에서 UITableView를 사용해서 화면에 Cell을 나타내도록 구현하였습니다. https://dev-mandos.tistory.com/66 [iOS] UITableView를 사용해서 화면에 Cell 나타내기 UITableView TableView는 하나의 열을 사용해서 데이터를 뷰에 나타내는 View 입니다. 또한 UITableView는 UIScrollView를 상속받고 있고, 수직 스크롤만 지원합니다. TableView는 어디에 사용될까요? 아이폰의 연 dev-mandos.tistory.com 그런데, 이제 이 Cell별로 알맞는 데이터를 보여줘야겠죠? 저는 Cell에 일정의 제목을 하나씩 보여주고 싶어요. 먼저 UITableViewCell을 상속받는 class 파일을 하나 만들어주겠습니..
[iOS] UITableView를 사용해서 화면에 Cell 나타내기 UITableView TableView는 하나의 열을 사용해서 데이터를 뷰에 나타내는 View 입니다. 또한 UITableView는 UIScrollView를 상속받고 있고, 수직 스크롤만 지원합니다. TableView는 어디에 사용될까요? 아이폰의 연락처, 설정, 메시지, 카카오톡 친구 목록, 인스타그램 등에 사용됩니다. 설정 앱을 한번 보실까요? 비슷하게 생긴 컴포넌트를 하나의 Cell이라고 표현하고, 수직 방향으로 나열할 수 있도록 도와주는 것이 TableView의 역할 입니다. StackView나 View로 만들어도 상관없지 않을까? 하는 생각이 드실 수 있습니다. 그렇다면 1000개의 Cell이 있다면 어떨까요? StackView로 만든다면 1000개를 다 만들어줘야 하고, 맨 마지막에 있는 Ce..

반응형