네이티브 연동하기
네이티브 연동하기
Type1

좌측 - ShopLiveShortformCardTypeView
중앙 - ShopLiveShortformVerticalTypeView
우측 - ShopLiveShortformHorizontalTypeView
Type2

좌측 - ShopLiveShortformCardTypeView
중앙 - ShopLiveShortformVerticalTypeView
우측 - ShopLiveShortformHorizontalTypeView
Short-form의 목록을 원하는 곳에 3가지 형식으로 노출할 수 있습니다.
영상의 비율은 9 : 16입니다.
- 콘텐츠 집중형 (CARD)
- 세로 스크롤 (VERTICAL)
- 가로 스크롤 (HORIZONTAL)
콘텐츠 집중형 (ShopLiveShortformCardTypeView) 적용하기
콘텐츠 집중형 목록을 노출할 화면에 다음과 같이 구성합니다.
private var builder = ShopLiveShortform.CardTypeViewBuilder()
lazy private var cardTypeView : UIView = {
let cardTypeView = builder.build(cardViewType: .type1,
enableSnap: true,
enablePlayVideo: true,
playOnlyOnWifi: false,
cellSpacing: 20).getView()
return cardTypeView
}()
view.addSubView(cardTypeView)
//set constraints
세로 스크롤 (ShopLiveShortformVerticalTypeView) 적용하기
세로 스크롤 목록을 노출할 화면에 다음과 같이 구성합니다.
private var builder = ShopLiveShortform.ListViewBuilder()
lazy private var verticalTypeView : UIView = {
let verticalTypeView = builder.build(cardViewType: .type1,
listViewType: .vertical,
enableSnap: true,
enablePlayVideo: true,
playOnlyOnWifi: false,
cellSpacing: 20).getView()
return verticalTypeView
}()
view.addSubView(verticalTypeView)
//set constraints
가로 스크롤 (ShopLiveShortformHorizontalTypeView) 적용하기
가로 스크롤 목록을 노출할 화면에 다음과 같이 구성합니다.
private var builder = ShopLiveShortform.ListViewBuilder()
lazy private var horizontalTypeView : UIView = {
let horizontalTypeView = builder.build(cardViewType: .type1,
listViewType: .horizontal,
enableSnap: true,
enablePlayVideo: true,
playOnlyOnWifi: false,
cellSpacing: 20).getView()
return horizontalTypeView
}()
view.addSubView(horizontalTypeView)
//set constraints
속성 소개
목록 뷰를 구성할때 builder를 통하여 다음과 같은 속성들을 설정 할 수 있습니다.
카드 타입 설정
카드 레이아웃 설정합니다.
// .type1 , .type2
builder.setCardViewType(type : ShopLiveShortform.CardTypeView)
스냅 효과 설정
스냅 효과를 사용하여 개별 컨텐츠 강조 여부를 설정합니다.
enableSnap()
: 스냅 효과를 설정
disableSnap()
: 스냅 효과를 해제 (기본값)
builder.enableSnap()
builder.disableSnap()
영상 자동 재생 효과 설정
셀의 영상을 자동을 재생할지 설정합니다.
enablePlayVideos()
: 영상을 재생한다. (기본값)
disablePlayVideos()
: 영상 재생을 해제 한다.
builder.enablePlayVideos()
builder.disablePlayVideos()
최상단으로 스크롤 하기
목록 뷰를 최상단으로 스크롤 합니다.
builder.scrollToTop()
wifi에서만 영상 재생하도록 설정
wifi에서만 재생이 가능하게 할지 설정합니다.
true
: wifi 에서만 재생
false
: 모든 네트워크에서 재생 (기본값)
builder.setPlayOnlyWifi(isEnabled : Bool)
item 간격 설정
목록뷰 셀의 간격을 설정합니다.
//기본값 - 20
builder.setCellSpacing(spacing : CGFloat)
handler 설정
ShopLiveShortformSDK에서 발생한 알림을 ShopLiveShortformReceiveHandlerDelegate
를 통해서 전달받고 처리할 수 있습니다.
ShopLiveShortformReceiveHandlerDelegate
에는 다음 3가지의 함수로 구성되어 있습니다.
protocol ShopLiveShortformReceiveHandlerDelegate : AnyObject {
@objc optional func handleShare(shareUrl: String)
@objc optional func onError(error: Error)
@objc optional func onEvent(command: String, payload: String?)
}
//핸들러 채택하기
ShopLiveShortform.ShortsReceiveInterface.setHandler(self)
공유하기 함수
handleShare(shareUrl: String)
를 통하여 해당 쇼츠의 Url정보를 String의 형태로 받아올 수 있습니다.
class ViewController : ShopLiveShortformReceiveHandlerDelegate {
func handleShare(shareUrl: String) {
if let url = URL(string : shareUrl) {
//Do something
}
}
}
에러 핸들링 함수
onError(error: Error)
를 통하여 쇼츠 SDK에서 발생한 Error를 받아보고 핸들링 할 수 있습니다.
class ViewController : ShopLiveShortformReceiveHandlerDelegate {
func onError(error: Error) {
if let error = error as? ShortsError {
//Do something
}
}
}
이벤트 핸들링 함수
onEvent(command: String, payload: String?)
를 통하여 쇼츠에서 발생한 Event를 받아보고 핸들링 할 수 있습니다.
class ViewController : ShopLiveShortformReceiveHandlerDelegate {
func onEvent(command: String, payload: String?){
//Do Somethig
}
}
Updated 13 days ago