사용자 정의 수정기와 보기를 Xcode 라이브러리에 추가하는 방법

SwiftUI를 사용하면 Xcode 라이브러리에 사용자 정의 뷰와 수정기를 추가할 수 있습니다.이렇게 하면 사용자 정의 보기에 쉽게 접근할 수 있고 클릭만 하면 코드에 추가할 수 있다.우리 자신의 SwiftUI 프로젝트에서 이 점을 어떻게 활용하는지 봅시다.
우리가 해야 할 첫 번째 일은 사용자 정의 보기와 수정기를 저장하기 위해 프로젝트에 새로운 SwiftUI 파일을 추가하는 것입니다.파일의 이름을 LibraryContent로 지정하고 다음 예제의 코드로 템플릿 코드를 대체합니다.
SwiftUI 가져오기
Fabric Library Content: Library ContentProvider {
@LibraryContentBuilder
변수 보기: [라이브러리 항목]{
LibraryItem(CloseButton(), 범주:.제어)
}
}
예시 코드에서 사용자 정의 보기를 Xcode 라이브러리에 추가하기 위해 LibraryItem 를 만들었습니다.전체 응용 프로그램에서 이 보기를 사용할 수 있고 Xcode 라이브러리에서 빠르게 접근할 수 있도록 사용자 정의 닫기 단추를 추가하기로 했습니다.
만약 우리가 LibraryItem의 문서를 깊이 연구한다면, 우리는 LibraryItem에 제목과 분류 같은 내용을 추가할 수 있다.이것은 우리가 Xcode 라이브러리의 보기와 수정기를 더욱 잘 조직하는 데 도움이 된다.우리의 예시에서, 우리는 닫기 단추를 추가할 것이다.범주를 제어합니다.또한 Library Item에 제목을 추가하지 않았지만, Xcode는 파일 이름인'CloseButton'을 제목으로 사용할 수 있을 만큼 똑똑합니다.
현재 Xcode에서 CloseButton 보기를 찾을 수 없기 때문에 오류가 발생했을 수 있습니다.새 SwiftUI 파일을 계속 만들고 CloseButton으로 이름을 지정합니다.
우리의 닫기 단추에서.swift 파일에 다음 코드를 추가합니다.
SwiftUI 가져오기
구조 닫기 버튼: 뷰 {
변수: 일부 뷰 {
이미지 (시스템 이름: "xmark")
.글꼴(시스템 (크기: 17, 무게: 굵기)
.전면 베이스(흰색)
.채우기(.all, 10)
.배경 (색상. 검은색. 불투명도 (0.6)
.클립그림(원형)
}
}
Fabric CloseButton\u 미리보기: PreviewProvider {
정적 var 미리보기: 일부 뷰 {
닫기 버튼()
}
}
CloseButton에서 미리 보기 캔버스를 실행하면우리는 중간에 X가 있는 원형 단추를 보아야 한다.
현재, 만약 우리가 우리의 Xcode 라이브러리에 가면, 우리는 우리의 닫기 단추가 이미 추가된 것을 볼 수 있습니다.우리는 Xcode 오른쪽 상단의 + 단추를 누르거나 키보드 단축키 명령 + Shift + L을 사용하여 Xcode 라이브러리를 열 수 있습니다.
현재 Xcode 라이브러리가 열렸습니다. 맨 위에 있는 검색 표시줄을 사용하여 사용자 정의'닫기 단추'를 검색할 수 있습니다.다음 그림과 같이 새 사용자 정의 뷰가 표시되며 현재 SwiftUI 파일에 추가하기 위해 드래그하거나 두 번 클릭할 수 있습니다.

사용자 정의 보기처럼 라이브러리에 사용자 정의 수정기를 추가할 수도 있습니다.
다시 사용할 수 있는 수정기를 추가하려면 Library Content에 보기 확장을 추가해야 합니다.swift 파일.확장 내부에서, 우리가 추가하고자 하는 수정기를 포함하는 보기를 되돌려주는 함수를 만들어야 합니다.
아래의 예시 코드를 봅시다.
뷰 확장
func customViewStyle () -> 일부 뷰 {
자기
.배경 (색상. 빨간색)
.커브 반지름(22)
.음영 (색상: 색상. 빨간색. 불투명도 (0.3), 반지름: 20, x:0, y:10)
}
}
사용자 정의 수식자 3개가 있는 보기를 되돌려주는customViewStyle () 함수를 만들었습니다.
이 코드가 있으면 프로젝트의 모든 파일로 이동하여 새로운 사용자 정의 수식자를 적용할 수 있습니다.ContentView 를 통해 이 점을 살펴보겠습니다.swift 파일.Hello World 텍스트 보기의 끝에 새 수식자를 추가할 수 있습니다.
SwiftUI 가져오기
구조 컨텐트 뷰: 뷰
변수: 일부 뷰 {
글("안녕하세요, 세상!"
.채우기()
.customViewStyle()
}
}

이것은 매우 좋지만, 유일한 문제는 우리가 보는 새 수정기가 Xcode 라이브러리에 표시되지 않았다는 것이다.
Library Content로 돌아가겠습니다.CloseButton () 아래에 다음 코드로 다른 @Library ContentBuilder 를 추가합니다.
@LibraryContentBuilder
func 수정자 (기본: 이미지) -> [LibraryItem]{
도서관 프로젝트(
기초customViewStyle(),
제목: 사용자 정의 뷰 스타일 1,
범주:.효과
)
}
위의 예시에서 보듯이 이 코드는 라이브러리에 사용자 정의 닫기 단추를 추가하는 방식과 매우 비슷합니다.이제 두 번째 탭을 선택한 상태에서 라이브러리에 들어가 수정기를 검색하면'사용자 정의 보기 스타일 1'수정기가 추가되었습니다.

마지막으로 수정기를 사용자 정의합시다.우리는 하드코딩의 값을 변수로 바꾸어 우리의 수식자를 사용하는 모든 사람들이 자신의 취향에 따라 스타일을 설정할 수 있도록 할 것이다.우리 도서관으로 돌아가자.swift 파일, 다음 변경 사항을 코드에 추가합니다.
@LibraryContentBuilder
func 수정자 (기본: 이미지) -> [LibraryItem]{
도서관 프로젝트(
//customViewStyle 함수에 기본값 추가
기초customViewStyle(색상: color.red, cornerRadius:22),
제목: 사용자 정의 뷰 스타일 1,
범주:.효과
)
}
}
뷰 확장
//변수를 함수에 추가하면 우리가 처리하고 있는 특정한 보기에 따라 사용자 정의할 수 있습니다
func customViewStyle (색상: color, cornerRadius: cgloat) -> 일부 보기 {
자기
.배경 (색상)
.코너 반지름(cornerRadius)
.그림자 (색상: 색상. 불투명도 (0.3), 반지름: 20, x:0, y:10)
}
}
위의 코드에서 보듯이 우리는customViewStyle () 함수에 변수를 추가했기 때문에 색과 각 반경을 원하는 값으로 변경할 수 있습니다.우리는 또한 이전의 하드코딩 값을 수식자의 기본값으로 추가했다.ContentView로 돌아가겠습니다.swift 파일과 업데이트된 수정기를 Hello World 텍스트 보기에 적용합니다.
SwiftUI 가져오기
구조 컨텐트 뷰: 뷰
변수: 일부 뷰 {
글("안녕하세요, 세상!"
.채우기()
.customViewStyle (색상: 녹색, 모서리 반지름: 10)
}
}

다음 SwiftUI 프로젝트에 도움이 되었으면 좋겠습니다!
읽어주셔서 감사합니다!
이 글의 모든 코드는 나의 Github 에서 찾을 수 있다.
👨🏻‍💻 즐거운 인코딩!👨🏻‍💻