WaterfallGrid

폭포

Swiftui의 폭포 그리드 레이아웃보기.

특징

• 불규칙한 컨텐츠 그리드.
• 열 번호 장치 방향마다 다릅니다.
• 간격 및 그리드 패딩 사용자 정의 가능.
• 수평 또는 수직 스크롤 방향.
• 항목 업데이트는 애니메이션 할 수 있습니다.

용법

초기화

데이터 모음을 전달하여 컬렉션 요소를 표시하는 그리드를 만들 수 있으며 컬렉션의 각 요소에 대한보기를 제공하는 클로저를 만들 수 있습니다. 그리드는 제공된 클로저를 사용하여 컬렉션의 각 요소를 어린이보기로 변환합니다.

Waterfallgrid는 식별 가능한 데이터 (Swiftui.list)와 함께 작동합니다. 데이터와 함께 각 요소를 고유하게 식별하는 속성의 핵심 경로를 사용하거나 데이터 유형이 식별 가능한 프로토콜을 준수하여 데이터를 두 가지 방법 중 하나로 식별 할 수 있습니다.

예 1

주요 경로로 식별 된 데이터 모음에서 유형 Image 보기의 그리드.

 WaterfallGrid ( ( 0 ..< 10 ) , id :  . self ) { index in
  Image ( " image ( index ) " )
    . resizable ( )
    . aspectRatio ( contentMode : . fit )
}

예 2

Identifiable 데이터 모음에서 유형의 RectangleView 의보기 그리드.

 WaterfallGrid ( rectangles ) { rectangle in
  RectangleView ( rectangle : rectangle )
}

또는 이와 같은 간단한 경우에는 다음과 같습니다.

 WaterfallGrid ( rectangles , content : RectangleView . init )

그리드 스타일

그리드의 모양을 사용자 정의하려면 gridStyle 기능을 호출하고 사용자 정의하려는 매개 변수를 전달하십시오.

열

 WaterfallGrid ( cards ) { card in
  CardView ( card : card )
}
. gridStyle ( columns : 2 ) 

 WaterfallGrid ( cards , content : CardView . init )
. gridStyle (
  columnsInPortrait : 2 ,
  columnsInLandscape : 3
)

간격 및 패딩

 WaterfallGrid ( rectangles , content : RectangleView . init )
. gridStyle ( spacing : 8 )
. padding ( EdgeInsets ( top : 16 , leading : 8 , bottom : 16 , trailing : 8 ) )

생기

 WaterfallGrid ( rectangles , content : RectangleView . init )
. gridStyle ( animation : . easeInOut ( duration : 0.5 ) )

스크롤 동작

ScrollView & Indicators 옵션에 포함됩니다

 ScrollView ( showsIndicators : true ) {
  WaterfallGrid ( rectangles , content : RectangleView . init )
}

수평 스크롤 방향

 ScrollView ( . horizontal ) {
  WaterfallGrid ( rectangles , content : RectangleView . init )
  . scrollOptions ( direction : . horizontal )
}

완전한 예

 ScrollView ( . horizontal , showsIndicators : false ) {
  WaterfallGrid ( cards ) { card in
    CardView ( card : card )
  }
  . gridStyle (
    columnsInPortrait : 2 ,
    columnsInLandscape : 3 ,
    spacing : 8 ,
    animation : . easeInOut ( duration : 0.5 )
  )
  . scrollOptions ( direction : . horizontal )
  . padding ( EdgeInsets ( top : 16 , leading : 8 , bottom : 16 , trailing : 8 ) )
} 

샘플 앱

더 자세하고 대화식 예제를 보려면 WaterfallGridSample 앱을 탐색하십시오.

설치

스위프트 패키지 관리자

앱 종속성

파일> 신속한 패키지> 패키지 종속성 추가 및 리포지토리 URL을 입력하십시오 (앱에 패키지 종속성 추가)

패키지 의존성

Package.swift 내의 종속성으로 추가하십시오. 스수어 매니페스트 :

dependencies: [
  . package ( url : " https://github.com/paololeonardi/WaterfallGrid.git " , from : " 1.1.0 " )
]

코코 포드

Podfile 에 다음 줄을 추가하여 Cocoapods를 통해 WaterfallGrid 설치할 수 있습니다.

 pod 'WaterfallGrid' , '~> 1.1.0'

pod install 명령을 실행하여 라이브러리를 다운로드하여 Xcode 프로젝트에 통합하십시오.

마이그레이션 가이드

• Waterfallgrid 1.0.0 마이그레이션 가이드

버전 작성

사용 가능한 버전은이 저장소의 릴리스를 참조하십시오.

기여

기부금은 환영받는 것 이상입니다. 구현을 계획하고 논의하기위한 풀 요청을 제출하기 전에 Github 문제를 만들어주세요.

작가

• Paolo Leonardi (@paololeonardi)

크레딧

Waterflgrid는 다음 프로젝트에서 영감을 얻었습니다.

• qgrid- https://github.com/q-mobile/qgrid
• 그리드 - https://github.com/swiftuiextensions/grid
• Swiftui Lab -https://swiftui-lab.com

특허

Waterflgrid는 MIT 라이센스에 따라 제공됩니다. 자세한 내용은 라이센스 파일을 참조하십시오.