내용 x
    Shortform view
      • 인쇄
      내용

      Shortform view

        • 인쇄
        기사 요약

        코드 설치

        CocoaPods

        Podfile에 아래 코드를 추가하세요.

        source 'https://github.com/CocoaPods/Specs.git'

    # Match the Version with the Project's Minimum Supported Version
    # Shoplive iOS SDK requires iOS 11.0 or later.
    platform :ios, '11.0'
    use_frameworks!

    # Set the Project Target for Shoplive iOS SDK Installation
    target 'ShortformProj' do
        pod 'ShopliveShortformSDK', '1.6.2'
      	pod 'ShopliveSDKCommon', '1.6.2'
    end

        Swift Package Manager

        Package Dependencies 에 다음 내용을 추가하세요.

        dependencies: [
    .package(url: "https://github.com/shoplive/shortform-ios", .exact(from: "1.6.2")),
    .package(url: "https://github.com/shoplive/common-ios", .exact(from: "1.6.2"))
]

        설치가 실패한다면 캐시를 지웁니다.

        터미널에서 다음 커맨드를 실행하여, 캐시를 삭제해주세요.

        rm -rf ~/Library/Caches/org.swift.swiftpm
rm -rf ~/Library/org.swift.swiftpm

        AccessKey 적용


        import ShopliveSDKCommon
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
      ShopLiveCommon.setAccessKey(accessKey: "YOUR_ACCESSKEY") //required
      return true
    }
}

        Access Key

        Access key와 secret key는 샵라이브 담당자를 통해 확인할 수 있습니다.

        숏폼 네이티브 컬렉션 적용

        원하는 형태의 컬렉션을 적용하세요

        ShopLiveShortformCardTypeView

        세로 스크롤 레이아웃(격자형 목록 Large) 컬렉션을 노출할 화면에 다음과 같이 구성합니다.

        import ShopLiveShortformSDK

class ViewController : UIViewController {
  private var builder = ShopLiveShortform.CardTypeViewBuilder()
  
  lazy private var cardTypeView : UIView = {
    let cardTypeView = builder.build(cardViewType: .type1,
                                     enableSnap: true,
                                     enablePlayVideo: true,
                                     playOnlyOnWifi: false,
                                     cellSpacing: 20,
                                     avAudioSessionCategoryOptions : .mixWithOthers).getView()
    builder.submit()
    return cardTypeView
  }()
  
  override func viewDidLoad(){ 
    super.viewDidLoad()
    view.addSubView(cardTypeView)
		//set constraints
    cardTypeView.translatesAutoresizingMaskIntoConstraints = false 
    NSLayoutConstraint.activate([
         cardTypeView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
         cardTypeView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
         cardTypeView.widthAnchor.constraint(equalToConstant: {YOUR_WIDTH}),
         cardTypeView.heightAnchor.constraint(equalToConstant: {YOUR_HEIGHT})
    ])
  }
}

        ShopLiveShortformVerticalTypeView

        세로 스크롤 레이아웃(격자형 목록 small) 컬렉션을 노출할 화면에 다음과 같이 구성합니다.

        import ShopLiveShortformSDK

class ViewController : UIViewController {
  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,
                                     avAudioSessionCategoryOptions : .mixWithOthers).getView()
    builder.submit()
    return verticalTypeView
  }()
  
  override func viewDidLoad(){ 
    super.viewDidLoad()
    view.addSubView(verticalTypeView)
    //set constraints
    verticalTypeView.translatesAutoresizingMaskIntoConstraints = false 
    NSLayoutConstraint.activate([
         verticalTypeView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
         verticalTypeView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
         verticalTypeView.widthAnchor.constraint(equalToConstant: {YOUR_WIDTH}),
         verticalTypeView.heightAnchor.constraint(equalToConstant: {YOUR_HEIGHT})
    ])
  }
}

        ShopLiveShortformHorizontalTypeView

        가로 스크롤 레이아웃 컬렉션을 노출할 화면에 다음과 같이 구성합니다.

        import ShopLiveShortformSDK

class ViewController : UIViewController {
  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,
                                     avAudioSessionCategoryOptions : .mixWithOthers).getView()
    builder.submit()
    return horizontalTypeView
  }()
  
  override func viewDidLoad(){ 
    super.viewDidLoad()
    view.addSubView(horizontalTypeView)
    //set constraints
    horizontalTypeView.translatesAutoresizingMaskIntoConstraints = false 
    NSLayoutConstraint.activate([
         horizontalTypeView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
         horizontalTypeView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
         horizontalTypeView.widthAnchor.constraint(equalToConstant: {YOUR_WIDTH}),
         horizontalTypeView.heightAnchor.constraint(equalToConstant: {YOUR_HEIGHT})
    ])
  }
}

        View 속성 설정

        목록 View를 구성할 때 builder를 통하여 다음과 같은 속성들을 설정할 수 있습니다.

        View 활성화

        builder를 통해 뷰를 구성하고 submit() 함수를 호출하여 데이터를 로드합니다.

        • submit() 함수를 호출하지 않으면 데이터가 로드되지 않아 화면에 목록 View가 구성되지 않습니다.

        builder.submit()

        컬렉션 내 상품 카드 레이아웃 설정

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

        • .type0 : 컬렉션에 상품 카드 미노출

        • .type1 : 컬렉션에 카드형 상품 카드 노출

        • .type2 : 컬렉션에 원형 상품 카드 노출

        //.type0, .type1 , .type2
builder.setCardViewType(type : ShopLiveShortform.CardTypeView)

        자세한 예시는 아래 내용을 참고해주세요.

        • Type0

        • Type1

        • Type2

        태그 기반 컬렉션

        HashTag 단위로 검색을 할 수 있습니다.

        • ShopLiveTagSearchOperator.OR : HashTag 통합 검색 (Default)

        • ShopLiveTagSearchOperator.AND : HashTag 교차 검색

        builder.setHashTags(tags :[String]?, tagSearchOperator : ShopLiveTagSearchOperator?)

        브랜드 기반 컬렉션

        브랜드 단위로 검색을 할 수 있습니다. (제목, 식별자 둘 다 검색)

        builder.setBrands(brands : [String]?)

        그룹 기반 컬렉션

        그룹 단위로 검색을 할 수 있습니다. (제목, 식별자 둘 다 검색)

        builder.setShortsCollectionId(shortsCollectionId : String?)

        무작위로 컬렉션 데이터 구성

        무작위 혹은 최신순으로 보이게 설정합니다.

        • enableShuffle() : 숏폼을 무작위로 보여줍니다.

        • disableShuffle(): 숏폼을 최신순으로 보여줍니다.

        builder.enableShuffle() 
builder.disableShuffle()

        스냅 효과 설정

        스냅 효과를 사용하여 개별 콘텐츠 강조 여부를 설정합니다.

        • enableSnap(): 스냅 효과 설정

        • disableSnap(): 스냅 효과 해제 (Default)

        builder.enableSnap() 
builder.disableSnap()

        영상 재생 범위(가로 스크롤 전용)

        가로 스크롤 레이아웃에서 어떤 셀을 재생할지 설정합니다.

        • ShopLiveShortform.PlayableType.First: 가시 영역의 가장 왼쪽 셀만 재생 (Default)

        • ShopLiveShortform.PlayableType.Center: 가시 영역의 중앙 셀만 재생

        • ShopLiveShortform.PlayableType.All: 가시 영역의 모든 셀을 재생

        builder.setPlayableType(type : ShopLiveShortform.PlayableType)

        영상 자동 재생 설정

        셀의 영상을 자동 재생할지 설정합니다.

        • enablePlayVideos(): 영상 자동 재생 설정 (Default)

        • disablePlayVideos(): 영상 자동 재생 해제

        builder.enablePlayVideos()
builder.disablePlayVideos()

        최상단으로 스크롤 하기

        페이지의 최상단으로 스크롤합니다.

        builder.scrollToTop()

        와이파이 환경에서만 재생 설정

        와이파이 환경에서만 재생이 가능하도록 설정합니다.

        • true: 와이파이 환경에서만 재생

        • false: 모든 네트워크 환경에서 재생 (Default)

        builder.setPlayOnlyWifi(isEnabled : Bool)

        셀 간격 설정

        셀의 간격을 설정합니다.

        builder.setCellSpacing(spacing : CGFloat)

        데이터 갱신

        데이터를 갱신합니다.

        builder.reloadItems()

        조회수 숨김 처리

        영상 조회 수를 위한 view의 노출 여부를 설정합니다. (Default: visible)

        builder.setVisibleViewCount(isVisible : Bool)

        상품 갯수 숨김 처리

        상품 갯수를 위한 view의 노출 여부를 설정합니다. (Default: visible)

        builder.setVisibleProductCount(isVisible : Bool)

        브랜드 숨김 처리

        브랜드를 위한 view의 노출 여부를 설정합니다. (Default: visible)

        builder.setVisibleBrand(isVisible : Bool)

        제목 숨김 처리

        제목 노출 여부를 설정합니다.  (Default: visible)

        builder.setVisibleTitle(isVisible : Bool)

        설명 숨김 처리

        설명 노출 여부를 설정합니다. (Default: visible)

        builder.setVisibleDescription(isVisible : Bool)

        셀의 Corner Radius 설정

        셀의 cornerRadius를 설정합니다. (Default:6px)

        builder.setCellCornerRadius(radius : CGFloat)

        셀의 placeholder 색상 설정

        셀의 placeholder 값을 설정합니다. (Default: CBCBCB)

        builder.setCellBackgroundColor(color: UIColor)

        화면 회전 이벤트 전달

        목록 view의 superview가 회전되면 builder?.notifyViewRotated() 함수를 호출하여 레이아웃을 다시 그릴 수 있습니다.

        // ViewController, UIWindow가 회전하였을때 목록뷰에 화면 회전 이벤트를 전달
builder.notifyViewRotated()

        ListViewDelegate 설정

        ShopLiveShortformListViewDelegate 를 통해 해당 목록 뷰로부터 알림을 수신하고 처리할 수 있습니다. ShopLiveShortformListViewDelegate 에는 다음 1가지의 함수로 구성되어 있습니다.

        protocol ShopLiveShortformListViewDelegate : NSObject  {
    func onListViewError(error : Error)
}

//delegate 채택하기
builder.build(...listViewDelegate : self,...).getView()

        에러 핸들링 함수

        onListViewError(error: Error) 를 통하여 목록 view에서 발생한 에러를 핸들링할 수 있습니다.

        class ViewController : ShopLiveShortformListViewDelegate { 
  func onListViewError(error: Error) { 
    // 목록뷰 Api Error 및 목록뷰의 avplayer error받아서 처리할 수 있습니다.
  }
}

        What's Next
        ask ask@shoplive.cloud
        sales sales@shoplive.cloud
        demo www.shoplive.cloud/demo
        © 2024, SHOPLIVE PTE. LTD. All Rights Reserved. 개인정보처리방침