imageviewer 다운로드 - imageviewer 소스 코드 다운로드

imageviewer

AI 소스 코드

2.1.23

다운로드

이미지뷰어

썸네일 보기에서 원본 보기로 원활하게 전환되는 시각적 효과를 제공하며 일반 사진, 긴 사진, 애니메이션 사진을 우아하게 탐색할 수 있습니다.

주요 기능

전환 애니메이션: 썸네일에서 큰 이미지로 또는 큰 이미지에서 썸네일로 원활한 전환 애니메이션 제공
탐색 제스처: 큰 사진을 탐색할 때 사진 확대/축소 등 손을 사용하는 일반적인 제스처를 사용할 수 있습니다.(PhotoView)
초대형 이미지 이미지 블록 로딩(SubsamplingScaleImageView)
비디오는 비디오 로딩을 지원합니다(ExoPlayer)
드래그하여 닫고 큰 이미지에 대해 위/아래 작업을 수행하여 탐색을 종료합니다.
페이지에 데이터 로드: 큰 이미지를 탐색하는 동안 데이터를 비동기적으로 로드합니다.
데이터 삭제
미리보기 페이지에 UI 요소의 사용자 정의 UI 사용자 정의 추가
RTL에 적합

소개하다

 implementation 'com.github.iielse:imageviewer:x.y.z'

가장 간단한 호출 코드

 fun show() { //
    val dataList： List<Photo> = // 将要展示的图片集合列表
    val clickedData: Photo = // 被点击的其中的那个图片元素信息
    val builder = ImageViewerBuilder(
        context = view.context,
        dataProvider = SimpleDataProvider(clickedData, dataList), // 一次性全量加载 // 实现DataProvider接口支持分页加载
        imageLoader = SimpleImageLoader(), // 可使用demo固定写法 // 实现对数据源的加载.支持自定义加载数据类型，加载方案
        transformer = SimpleTransformer(), // 可使用demo固定写法 // 以photoId为标示，设置过渡动画的'配对'.
    )
    builder.show()
}

 // 基本是固定写法. Glide 可以换成别的. demo代码中有video的写法.
class SimpleImageLoader : ImageLoader {
    /** 根据自身photo数据加载图片.可以使用其它图片加载框架. */
    override fun load(view: ImageView, data: Photo, viewHolder: RecyclerView.ViewHolder) {
        val it = (data as? MyData?)?.url ?: return
        Glide.with(view).load(it)
                .placeholder(view.drawable)
                .into(view)
    }

    /**
     * 根据自身photo数据加载超大图.subsamplingView数据源需要先将内容完整下载到本地.
     */
    override fun load(subsamplingView: SubsamplingScaleImageView, data: Photo, viewHolder: RecyclerView.ViewHolder) {
        val it = (data as? MyData?)?.url ?: return
        subsamplingDownloadRequest(it)
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .doOnSubscribe { findLoadingView(viewHolder)?.visibility = View.VISIBLE }
                .doFinally { findLoadingView(viewHolder)?.visibility = View.GONE }
                .doOnNext { subsamplingView.setImage(ImageSource.uri(Uri.fromFile(it))) }
                .doOnError { toast(it.message) }
                .subscribe().bindLifecycle(subsamplingView)
    }

    private fun subsamplingDownloadRequest(url: String): Observable<File> {
        return Observable.create {
            try {
                it.onNext(Glide.with(appContext).downloadOnly().load(url).submit().get())
                it.onComplete()
            } catch (e: java.lang.Exception) {
                if (!it.isDisposed) it.onError(e)
            }
        }
    }

    private fun findLoadingView(viewHolder: RecyclerView.ViewHolder): View? {
        return viewHolder.itemView.findViewById<ProgressBar>(R.id.loadingView)
    }

    ......
}

 // 基本是可以作为固定写法.
class SimpleTransformer : Transformer {
    override fun getView(key: Long): ImageView? = provide(key)
    
    companion object {
        private val transition = HashMap<ImageView, Long>()
        fun put(photoId: Long, imageView: ImageView) {
            require(isMainThread())
            if (!imageView.isAttachedToWindow) return
            imageView.addOnAttachStateChangeListener(object : View.OnAttachStateChangeListener {
                override fun onViewAttachedToWindow(p0: View?) = Unit
                override fun onViewDetachedFromWindow(p0: View?) {
                    transition.remove(imageView)
                    imageView.removeOnAttachStateChangeListener(this)
                }
            })
            transition[imageView] = photoId
        }

        private fun provide(photoId: Long): ImageView? {
            transition.keys.forEach {
                if (transition[it] == photoId)
                    return it
            }
            return null
        }
    }
}

이제 간단한 통합이 완료되었습니다.

고급 사용.

(아래 3가지 방법으로 구현하세요. 맞춤형 디스플레이 및 기능 추가 가능)

예를 들어, 사진에 대한 추가 정보를 표시할 수 있으며 builder.setVHCustomizer(MyCustomViewHolderUI()) 제공합니다.
'오버레이(상단) 레이어'에서 UI를 사용자 정의합니다. 예를 들어 표시기 등을 추가합니다. builder.setOverlayCustomizer(MyCustomIndicatorUI())
페이지 전환(현재 페이지 표시), 전환 애니메이션 실행 상태 등 뷰어의 다양한 상태 변화를 모니터링합니다. builder.setViewerCallback(MyViewerStateChangedListener())

 // 一般监听翻页onPageSelected可以控制 video播放的状态
// viewer 各状态监听回调
interface ViewerCallback : ImageViewerAdapterListener {
    // 当点击缩略图变化大图的瞬间
    override fun onInit(viewHolder: RecyclerView.ViewHolder) {}
    // 当图片被拖动时
    override fun onDrag(viewHolder: RecyclerView.ViewHolder, view: View, fraction: Float) {}
    // 当图片被拖动但不至于退出浏览
    override fun onRestore(viewHolder: RecyclerView.ViewHolder, view: View, fraction: Float) {}
    // 当图片被拖动执行退出浏览
    override fun onRelease(viewHolder: RecyclerView.ViewHolder, view: View) {}
    // 翻页中状态变化
    fun onPageScrollStateChanged(state: Int) {}
    // 翻页中
    fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {}
    // 当某大图页面被选中
    fun onPageSelected(position: Int, viewHolder: RecyclerView.ViewHolder) {}
}

일반적으로 매개변수 구성을 조정할 필요가 없습니다.

재산	기능 설명
OFFSCREEN_PAGE_LIMIT	시청자가 미리 로드한 항목 수
VIEWER_ORIENTATION	뷰어 슬라이딩 방향
VIEWER_BACKGROUND_COLOR	큰 이미지를 미리 볼 때 배경색(기본값은 순수 검정색)
DURATION_TRANSITION	전환 애니메이션 기간
DURATION_BG	전환 애니메이션 배경 변경 기간
SWIPE_DISMISS	드래그 앤 드롭 반환 지원 여부
SWIPE_TOUCH_SLOP	드래그 터치 감지 임계값
DISMISS_FRACTION	경계 임계값으로 돌아가려면 드래그하세요.
TRANSITION_OFFSET_Y	투명한 상태 표시줄 아래 전환 애니메이션의 시작 위치를 수정했습니다.

데이터 소스 정의

 interface Photo {
    fun id(): Long // 每条图片数据的唯一标示. 主要用于分页数据加载. 定位过渡动画的对应关系
    fun itemType(): @ItemType.Type Int // 是否启用SubsamplingScaleImageView实现图片区块加载或ExoVideoView实现Video加载
}

FAQ

전체 페이지를 수동으로 닫고 종료하는 방법은 무엇입니까?
데이터를 삭제하는 방법은 무엇입니까?

ViewModelProvider(activity).get(ImageViewerActionViewModel::class.java) 통해 viewer 개체 참조를 얻은 다음 setCurrentItem(pos: Int) 사용하여 큰 이미지의 위치를 지정된 위치로 전환하여 탐색을 dismiss() 큰 이미지 remove(item: List<Photo>) 그 안의 요소 삭제

비디오 디스플레이를 구현하는 방법은 무엇입니까? 데모를 참조하여 데모 코드 위치 SimpleViewerCustomizer 구현할 수 있습니다.
왜 전환 애니메이션이 없나요? Transformer 올바르게 구성해야 합니다. getView 반환 값이 null이 아닌지 확인해야 합니다.
애니메이션 실행이 원본 이미지에서 크게 벗어나는 이유는 무엇입니까? 상태 표시줄의 영향을 확인하세요. Config.TRANSITION_OFFSET_Y