항목 슬라이더로 이전/다음 으로 이동하는 기능 구현

[QuaRang1225]

항목리스트에서 이미지 슬라이더 시 다음 혹은 이전 항목으로 넘어갈 수 있는 기능 개발 추가적으로 항목을 넘길 시 항목아래에 현재 항목 위치를 항목 하단에 썸네일 그룹으로 표시

[QuaRang1225]

항목 슬라이더로 이전/다음 으로 이동하는 기능 구현

• 기존에는 vm.assetList로 루프를 돌렸지만 .indice속성으로 index값을 파라미터로 받고 asset을 사용해야할 땐 vm.assetList[index]로 사용 하도록 수정
• 항목을 터치할 때 현재 index값을 상태변수에 저장
• 항목을 양옆으로 드래그 시 index값을 -1/+1씩 증감 시켜 항목을 이동하는 로직 구현
• 만약 처음 혹은 마지막 항목일 경우 index out of range exception이 나지 않도록 예외처리

[QuaRang1225]

항목은 이미지,비디오가 각자 다른 타입을 사용하고 있었지만 이번에 항목리스트를 넘기는 과정에서 서로 통합하기로 함

• 기존에 VideoPlayerItem이였던 DTO 모델을 AssetItem으로 변경한 뒤 이미지 항목 그 리스트로 통합
• 기존에 selectedAssets/selectedVideo으로 나눠져 있던 항목 뷰 변수를 하나로 통합

[QuaRang1225]

항목 썸네일 그룹

• 항목을 슬라이더 해서 다음/이전으로 넘길 수 있는 기능을 사전에 개발했었음

• 항목 하단에 이전/다음 항목들을 작게 확인할 수 있는 썸네일 그룹 구현

• 현재 항목 기준으로 이전/다음 각각 4개씩 그룹에 추가되어 총 9개의 썸네일이 배치되어있음

• 사용자에게 보여지고 있는 항목은 다른 항목에 비해 크기가 큼

• 항목의 index값에 따라 썸네일 그룹 내부에서 이동할 수 있음

• 만약 현재 리스트의 항목개수가 9개 이하일 경우, 첫 항목 부터 마지막 항목까지 전부 그룹에 표시

• 만약 [index-4…index+4]의 기준을 만족하지 못할 경우

• ex) 현재 인덱스가 3 즉, 3번째 이미지일 경우 배열이[-1,0,1….7]이 될 것을 방지해 첫 값의 절댓값을 배열의 마지막 값과 더해 index out of range exception을 방지(반대도 마찬가지)

var generateArray:[Int]{
    var range = 0
    switch vm.assetList.count {
    case 1...9:
        return Array(0...(vm.assetList.count - 1))
    default:
        range = 4
    }
    var indexRange = Array(selecteIndex-range...selecteIndex+range)
    indexRange = indexRange.map { element in
        if element < 0 {
            return abs(element - (indexRange.last ?? 0))
        } else {
            return element
        }
    }
    indexRange = indexRange.map { element in
        if element > vm.assetList.count-1 {
            return  (indexRange.first ?? 0) - (element - vm.assetList.count)
        } else {
            return element
        }
    }
    print(Array(Set(indexRange).sorted()))
    return Array(Set(indexRange).sorted())
}