Lottie Animation ▼ 모바일 개발시 많이 사용되는 Lottie 애니메이션을 SwiftUI에서 구현하는 방법을 알아보겠습니다. 우선 새로운 패키지를 추가하기 위해서 로티를 사용하기 위해서 다음 주소를 복사합니다. (Swift Package를 사용하지 않고 CocoaPods을 사용해도 됩니다.) https://github.com/airbnb/lottie-ios.git ▼ Xcode의 File -> Add Packages... 메뉴를 통해 새로운 패키지를 추가합니다. ▼ 우측 상단에 검색창에 복사한 주소를 넣고 엔터를 치면 lottie-ios 패키지를 찾을 수 있습니다. 우측 하단에 Add Package 버튼을 눌러 패키지를 추가합니다. ▼ 로티 애니메이션 이미지를 다운로드 받습니다. 해당 서비스..
▼ 다음과 같이 Person 데이터 구조체와 staff 라는 Person 배열을 생성합니다. 그리고 view에 ForEach 구문을 통해서 리스트를 표현해줍니다. 그럼 간단한 리스트를 확인할 수 있습니다. ▼ 이제 VStack와 HStack을 이용해서 이름뿐만 아니라 전화번호 그리고 전화기 모양의 아이콘을 리스트로 표현합니다. 그밖에 옵션으로 텍스트 색상과 폰트를 설정해줍니다. ▼ 위의 코드도 잘 동작하긴 하지만 view 안쪽에 많은 코드가 들어가서 보기가 좋지 않습니다. 다음과 같이 PersonRowView 라는 해당 Row를 표현하는 새로운 뷰를 만들어줍니다. ▼ 이제 뷰를 재사용해서 좀 더 단순하게 표현할 수 있습니다. ▼ List에 그룹을 만들어보겠습니다. 우선 더 이상 staff 배열은 사용하지..
테이블 뷰에서 아이템을 추가하고 삭제 이동하는 기능은 많이 사용되는 기능입니다. 스위프트 UI에서는 List를 사용해서 보다 간단하게 이 기능을 구현할 수 있습니다. 이를 위해서는 NavigationView를 사용해야 하며 onMove, onDelete 함수를 사용합니다. 또한 토글 성격의 EditButton은 toolbar에 포함되며 macOS는 사용할 수 없고 iOS 전용입니다. ▼ 우선 해당 리스트에 사용될 데이터를 정의합니다. 총 5개의 데이터를 배열로 생성했습니다. ▼ 이제 NavigationView를 생성하고 그 안에 List를 추가합니다. ForEach 구문을 이용해서 배열에 있는 Text를 추가합니다. ▼ 리스트가 추가되었다면 이제 navigationTitle을 추가해주고 toorbar에 ..