네이티브 연동하기

Type1

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

Type2

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
  }
}