네이티브 연동하기

네이티브 연동하기

Type1

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

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

Type2

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

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

Short-form의 목록을 원하는 곳에 3가지 형식으로 노출할 수 있습니다.
영상의 비율은 9 : 16입니다. 고객사가 원하는 너비, 높이를 유연하게 적용 할 수 있어 고객사가 원하는대로 Customizing 가능 합니다.

  • 콘텐츠 집중형 (CARD)
  • 세로 스크롤 (VERTICAL)
  • 가로 스크롤 (HORIZONTAL)

[1단계] 고객사 AccessKey 적용하기

ShopLiveCommon.setAccessKey("your accessKey")

[2단계] 네이티브 적용하기

콘텐츠 집중형 (ShopLiveShortformCardTypeView) 적용하기

콘텐츠 집중형 목록을 노출할 화면에 다음과 같이 구성합니다.

고객사 xml에 ShopLiveShortformCardTypeView 추가하세요.

<cloud.shoplive.sdk.shorts.ShopLiveShortformCardTypeView
    android:id="@+id/shopLiveShortformCardTypeView"
    android:layout_width="match_parent"
    android:layout_height="custom height" />

세로 스크롤 (ShopLiveShortformVerticalTypeView) 적용하기

세로 스크롤 목록을 노출할 화면에 다음과 같이 구성합니다.

고객사 xml에 ShopLiveShortformVerticalTypeView 추가하세요.

<cloud.shoplive.sdk.shorts.ShopLiveShortformVerticalTypeView
    android:id="@+id/shopLiveShortformVerticalTypeView"
    android:layout_width="match_parent"
    android:layout_height="custom height" />

가로 스크롤 (ShopLiveShortformHorizontalTypeView) 적용하기

가로 스크롤 목록을 노출할 화면에 다음과 같이 구성합니다.

고객사 xml에 ShopLiveShortformHorizontalTypeView 추가하세요.

<cloud.shoplive.sdk.shorts.ShopLiveShortformHorizontalTypeView
    android:id="@+id/shortsHorizontalType1View"
    android:layout_width="match_parent"
    android:layout_height="custom height" />

속성 소개

목록 뷰를 구성하고 view의 public function으로 속성을 설정 할 수 있습니다.


submit()

View를 활성화 상태로 만듭니다.

yourView.submit()

setViewType(type: ShopLiveShortform.CardViewType)

카드 레이아웃 설정합니다.

// CARD_VIEW_TYPE1, CARD_VIEW_TYPE2
yourView.setViewType(type: ShopLiveShortform.CardViewType)

enableSnap()

스냅 효과를 설정

yourView.enableSnap() 

disableSnap()

스냅 효과를 해제 (기본값)

yourView.disableSnap()

enablePlayVideos()

View의 영상을 재생합니다. (기본값)

응용 - Pager 구조에서 Tab을 이동 할때 Play 되고 있던 View에서 disablePlayVideos()를 호출하여 메모리를 해제하고 되돌아가면 다시 해당 Tab으로 돌아갈때 View의 enablePlayVideos()를 다시 호출하면 고객사 앱의 메모리를 관리 할 수 있습니다.

yourView.enablePlayVideos()

disablePlayVideos()

View의 영상 재생을 해제 합니다.

yourView.disablePlayVideos()

scrollToTop()

목록 뷰를 최상단으로 스크롤 합니다.

yourView.scrollToTop()

setPlayOnlyWifi(isEnabled : Boolean)

wifi에서만 재생이 가능하게 할지 설정합니다.

true: wifi 에서만 재생
false: 모든 네트워크에서 재생 (기본값)

yourView.setPlayOnlyWifi(isEnabled : Boolean)

addItemDecoration(decor: RecyclerView.ItemDecoration)

목록뷰 inner View들의 간격을 custom 설정합니다. 기본 간격은 default 설정 되어 있습니다.

yourView.addItemDecoration(object : ItemDecoration() {
    override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {
        super.getItemOffsets(outRect, view, parent, state)
    // Do something
    }
})

setHandler(handler: ShopLiveShortformBaseTypeHandler)

View에서 발생한 알림을 클라이언트에서 Handler 함수를 통해 전달받고 필요한 처리를 합니다.

yourView.handler = object : ShopLiveShortformBaseTypeHandler() {
    override fun onError(error: ShopLiveCommonError) {
        // Do something
    }
}