一周内从0到1开发一款 AR眼镜相机应用？

1. 📂 前言

2. 💠 任务拆分

2.1 产品需求拆分

2.2 开发工作拆分

3. 🔱 开发实现

3.1 代码目录截图

3.2 app 模块

3.3 middleware 模块

3.4 portal 模块

4. ⚛️ 拍照与录像

4.1 前滑后滑统一处理

4.2 初始化 View 以及 Camera

4.3 页面前后滑处理

4.4 字符串资源

4.5 照片视频存放

4.6 拍照

4.7 录像

5. ⚛️ 图片视频查看

5.1 数据结构定义

5.2 图片视频获取工具类

5.3 解耦 viewmodel 和 model 层

5.4 初始化 View

5.5 BannerViewPager 组件加载和使用

5.6 获取数据并加载到 View 显示

5.7 页面前后滑处理

5.8 gradle 依赖

6. ✅ 小结

1. 📂 前言

背景：为了满足用户对 AR 眼镜相机功能的体验，研发内部决定开发一款带有 AR 眼镜特性相机应用，无产品、设计、测试以及项目同学的参与。

参与开发人员：OS/应用开发同学（本人）。

客户与用户：用户是最终使用产品的人，更多关注功能实用性，当前阶段用户是OS/应用开发同学，未来用户是产品经理、设计同学，以及未来会使用此OS的用户；客户是直属领导，更多关注功能完成度。

2. 💠 任务拆分

2.1 产品需求拆分

由于是研发内部需求，没有产品经理参与，所以需要通过调研已有产品，并结合过往相机应用开发经验，大致拆分为三块需求：拍照、录像以及图片视频查看。

2.2 开发工作拆分

根据拆分需求以及 AR 眼镜的特性，拆分出如下开发工作：

搭建项目；——0.5人/天（基于 Android应用开发框架轮子构造相机应用初版代码）
实现打开应用后默认拍照模式的开发与自测；——0.5人/天（使用CameraX API，参考开源库 KotlinCameraXDemo）
实现TP点击拍照并保存在图库的开发与自测；——0.5人/天
实现TP前滑切换为录像模式、TP点击录像、再次TP点击结束录像、并保存在图库、TP再次前滑切换为拍照模式的开发与自测；——1人/天
实现TP后滑打开图库查看功能的开发与自测；——0.5人/天
实现图库查看时可前滑后滑浏览图片、视频，对于视频可点击播放与暂停功能的开发与自测；——1人/天（此部分任务，由于本人曾经做过有现成代码可搬运过来，正常情况下可能至少需要3天左右时间的开发与调优）
请产品同学以及开发同学进行功能体验并优化功能；——0.5人/天
代码整理、新建仓库上传代码以及内置 APK 在系统 OS；——0.5人/天

3. 🔱 开发实现

3.1 代码目录截图

3.2 app 模块

主要定制 Application 与 manifest。

3.3 middleware 模块

中间件层，主要放置一些模块间共用的元素，比如中英文文字翻译、应用 logo、一些 base 类等，由于开发框架文章有对应阐述，此处就不再赘述。

3.4 portal 模块

按照 MVVM 应用架构，在 MainActivity 类中实现了拍照和录像功能，在 MediaDetailActivity 类中实现了图片视频的查看功能，功能具体代码实现，将在接来下的章节作为本文重点展开。

4. ⚛️ 拍照与录像

4.1 前滑后滑统一处理

在 BaseActivity 中重写 dispatchGenericMotionEvent方法，提供 scrollForward 和 scrollBackward 方法，方便子类统一处理前滑后滑事件。

abstract class BaseActivity<VB : ViewBinding, VM : BaseViewModel> : AppCompatActivity(), IView {

    protected lateinit var binding: VB

    protected val viewModel: VM by lazy {
        ViewModelProvider(this)[(this.javaClass.genericSuperclass as ParameterizedType).actualTypeArguments[1] as Class<VM>]
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = initBinding(layoutInflater)
        setContentView(binding.root)

        initData()
        initViewModel()
        initView()
    }

    override fun dispatchGenericMotionEvent(event: MotionEvent): Boolean {
        if (event.action == MotionEvent.ACTION_SCROLL && FastScrollUtils.isNotFastScroll(binding.root)) {
            if (event.getAxisValue(MotionEvent.AXIS_VSCROLL) < 0) scrollForward() else scrollBackward()
        }
        return super.dispatchGenericMotionEvent(event)
    }

    abstract fun initBinding(inflater: LayoutInflater): VB
    abstract fun scrollForward()
    abstract fun scrollBackward()


}

并且加上了防快速操作的逻辑，避免不必要 bug。

/**
 * Description: 防止快速滑动，多次触发事件
 * CreateDate:  2022/11/29 17:59
 * Author:      agg
 */
object FastScrollUtils {

    private const val MIN_CLICK_DELAY_TIME = 500

    fun isNotFastScroll(view: View, time: Int = MIN_CLICK_DELAY_TIME): Boolean {
        var flag = true
        val curClickTime = System.currentTimeMillis()
        view.getTag(view.id)?.let {
            if (curClickTime - (it as Long) < time) {
                flag = false
            }
        }
        if (flag) view.setTag(view.id, curClickTime)
        return flag
    }

}

4.2 初始化 View 以及 Camera

首先，在 Activity 的初始化过程中，初始化窗口时将 WIndow 设置为 0dof，让可视窗口跟随用户视野移动。

    private fun initWindow() {
        Log.i(TAG, "initWindow: ")
        val lp = window.attributes
        lp.dofIndex = 0
        lp.subType = WindowManager.LayoutParams.MB_WINDOW_IMMERSIVE_0DOF
        window.attributes = lp
    }

然后，初始化 CameraX 相关配置，包括了 ImageCapture 拍照和 VideoCapture 录像 API 的初始化，bindToLifecycle 绑定生命周期。

    private val CAMERA_MAX_RESOLUTION = Size(3264, 2448)
    private lateinit var mCameraExecutor: ExecutorService
    private var mImageCapture: ImageCapture? = null
    private var mVideoCapture: VideoCapture? = null
    private var mIsVideoModel = false
    private var mVideoRecordTime = 0L

    private fun initCameraView() {
        Log.i(TAG, "initCameraView: ")
        mCameraExecutor = Executors.newSingleThreadExecutor()
        val cameraProviderFuture = ProcessCameraProvider.getInstance(this)
        cameraProviderFuture.addListener({
            try {
                mImageCapture = ImageCapture.Builder()
                    .setCaptureMode(ImageCapture.CAPTURE_MODE_MAXIMIZE_QUALITY)
                    .setTargetResolution(CAMERA_MAX_RESOLUTION).build()
                mVideoCapture = VideoCapture.Builder().build()
                val cameraSelector = CameraSelector.DEFAULT_BACK_CAMERA
                val cameraProvider = cameraProviderFuture.get()
                cameraProvider.unbindAll()
                cameraProvider.bindToLifecycle(this, cameraSelector, mImageCapture, mVideoCapture)
            } catch (e: java.lang.Exception) {
                Log.e(TAG, "bindCamera Failed！: $e")
            }
        }, ContextCompat.getMainExecutor(this))
    }

其次，如果拍照、录像需要预览界面，一是需要增加 PreviewView 预览组件，二是将 bindToLifecycle 方法参数中增加 Preview 即可，如下代码所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:keepScreenOn="true">

    <androidx.camera.view.PreviewView
        android:id="@+id/previewView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

cameraProviderFuture.addListener({
    try {
        // ...
        // 可预览
        val preview = Preview.Builder().build()
        binding.previewView.apply {
            implementationMode = PreviewView.ImplementationMode.COMPATIBLE
            preview.setSurfaceProvider(surfaceProvider)
        }
        cameraProvider.bindToLifecycle(
            this, cameraSelector, preview, mImageCapture, mVideoCapture
        )
//      cameraProvider.bindToLifecycle(this, cameraSelector, mImageCapture, mVideoCapture)
    } catch (e: java.lang.Exception) {
        Log.e(TAG, "bindCamera Failed！: $e")
    }
}, ContextCompat.getMainExecutor(this))

最后，监听窗口点击并处理对应事件即可。

    private val mVideoIsRecording = AtomicBoolean(false)
    private fun isRecording(): Boolean = mVideoIsRecording.get()

    override fun initView() {
        initWindow()
        initCameraView()
        binding.parent.setOnClickListener {
            Log.i(TAG, "click: model=$mIsVideoModel,isRecordingVideo=${isRecording()}")
            try {
                if (mIsVideoModel) if (isRecording()) stopRecord() else startRecord() else takePicture()
            } catch (e: Exception) {
                e.printStackTrace()
            }
        }
    }

4.3 页面前后滑处理

    /**
     * 往前滑动：切换为录像模式/拍照模式
     */
    override fun scrollForward() {
        Log.i(TAG, "scrollForward: model=$mIsVideoModel,isRecordingVideo=${isRecording()}")
        if (mIsVideoModel) {
            if (isRecording()) {
                MBToast(
                    this, Toast.LENGTH_SHORT, getString(R.string.record_video_in_progress)
                ).show()
            } else {
                mIsVideoModel = false
                MBToast(this, Toast.LENGTH_SHORT, getString(R.string.photo_model)).show()
            }
        } else {
            mIsVideoModel = true
            MBToast(this, Toast.LENGTH_SHORT, getString(R.string.video_model)).show()
        }
    }

    /**
     * 往后滑动：打开图库查看功能
     */
    override fun scrollBackward() {
        if (isRecording()) {
            MBToast(this, Toast.LENGTH_SHORT, getString(R.string.record_video_in_progress)).show()
        } else {
            Log.i(TAG, "scrollBackward: 打开图库查看功能")
            MediaDetailActivity.launch(this)
        }
    }

4.4 字符串资源

// 中文：
<resources>
    <string name="app_name">Mo相机</string>
    <string name="loading">加载中…</string>
    <string name="tap_to_snap">单击拍照</string>
    <string name="tap_to_record_video">单击录像</string>
    <string name="tap_to_stop_record_video">单击暂停录像</string>
    <string name="scroll_backward_to_gallery">后滑打开图库</string>
    <string name="scroll_forward_to_snap_model">前滑切换拍照模式</string>
    <string name="scroll_forward_to_video_model">前滑切换录像模式</string>
    <string name="record_video_start">开始录像</string>
    <string name="record_video_in_progress">正在录像</string>
    <string name="record_video_complete">录像完成</string>
    <string name="take_picture_complete">拍照完成</string>
    <string name="photo_model">拍照模式</string>
    <string name="video_model">录像模式</string>
</resources>

// 英文：
<resources>
    <string name="app_name">MoCamera</string>
    <string name="loading">Loading…</string>
    <string name="tap_to_snap">Tap To Snap</string>
    <string name="tap_to_record_video">Tap To Record Video</string>
    <string name="tap_to_stop_record_video">Tap To Stop Record Video</string>
    <string name="scroll_backward_to_gallery">Scroll Backward To Gallery</string>
    <string name="scroll_forward_to_snap_model">Scroll Forward To Snap Model</string>
    <string name="scroll_forward_to_video_model">Scroll Forward To Video Model</string>
    <string name="record_video_start">Record Video Start</string>
    <string name="record_video_in_progress">Video Recording In Progress</string>
    <string name="record_video_complete">Record Video Complete</string>
    <string name="take_picture_complete">Take Picture Complete</string>
    <string name="photo_model">Photo Model</string>
    <string name="video_model">Video Model</string>
</resources>

4.5 照片视频存放

initOutputDirectory 初始化存放目录，以及 createPhotoFile 创建照片存放路径和 createVideoFile 创建视频存放路径、updateMediaFile 更新系统相册。

class MainViewModel : BaseViewModel() {

    private lateinit var outputDirectory: File

    fun init(context: ContextWrapper) {
        viewModelScope.launch { SoundPoolTools.init(context) }
        initOutputDirectory(context)
    }

    /**
     * 更新系统相册
     */
    fun updateMediaFile(context: Context, file: File) {
        val intent = Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE)
        intent.data = Uri.fromFile(file)
        context.sendBroadcast(intent)
    }

    fun createPhotoFile(): File {
        return File(
            outputDirectory, System.currentTimeMillis().toString() + Constants.PHOTO_EXTENSION
        )
    }

    fun createVideoFile(): File {
        return File(
            outputDirectory, System.currentTimeMillis().toString() + Constants.VIDEO_EXTENSION
        )
    }

    private fun initOutputDirectory(context: ContextWrapper) {
        outputDirectory = File(context.externalMediaDirs[0], context.getString(R.string.app_name))
        if (!outputDirectory.exists()) outputDirectory.mkdir()
    }

}

4.6 拍照

    /**
     * 拍照
     */
    private fun takePicture() {
        Log.i(TAG, "takePicture: ")
        SoundPoolTools.playCameraPhoto(this)

        val photoFile = viewModel.createPhotoFile()
        mImageCapture?.takePicture(ImageCapture.OutputFileOptions.Builder(photoFile).build(),
            mCameraExecutor,
            object : ImageCapture.OnImageSavedCallback {
                override fun onError(exc: ImageCaptureException) {
                    Log.e(TAG, "Photo capture failed: ${exc.message}", exc)
                }

                override fun onImageSaved(output: ImageCapture.OutputFileResults) {
                    val savedUri = output.savedUri ?: Uri.fromFile(photoFile)
                    Log.i(TAG, "Photo capture succeeded: $savedUri")
                    runOnUiThread {
                        MBToast(
                            this@MainActivity,
                            Toast.LENGTH_SHORT,
                            getString(R.string.take_picture_complete)
                        ).show()
                    }
                    viewModel.updateMediaFile(this@MainActivity, photoFile)
                }
            })
    }

4.7 录像

    private fun startRecord() {
        if (isRecording()) {
            MBToast(this, Toast.LENGTH_SHORT, getString(R.string.record_video_in_progress)).show()
            return
        }
        Log.i(TAG, "startRecord: ")

        val videoFile = viewModel.createVideoFile()
        mVideoCapture?.startRecording(VideoCapture.OutputFileOptions.Builder(videoFile).build(),
            mCameraExecutor,
            object : VideoCapture.OnVideoSavedCallback {
                override fun onVideoSaved(output: VideoCapture.OutputFileResults) {
                    mVideoIsRecording.set(false)
                    val savedUri = output.savedUri ?: Uri.fromFile(videoFile)
                    Log.i(TAG, "onVideoSaved：${savedUri.path}")
                    runOnUiThread {
                        MBToast(
                            this@MainActivity,
                            Toast.LENGTH_SHORT,
                            getString(R.string.record_video_complete)
                        ).show()

                    }
                    viewModel.updateMediaFile(this@MainActivity, videoFile)
                }

                override fun onError(videoCaptureError: Int, message: String, cause: Throwable?) {
                    mVideoIsRecording.set(false)
                    Log.e(TAG, "onError：${message}")
                }
            })
        mVideoIsRecording.set(true)

        if (isRecording()) {
            MBToast(this, Toast.LENGTH_SHORT, getString(R.string.record_video_start)).show()
        }
    }

    private fun stopRecord() {
        Log.i(TAG, "stopRecord: ")
        if (mVideoIsRecording.get()) mVideoCapture?.stopRecording()
    }

5. ⚛️ 图片视频查看

5.1 数据结构定义

首先，定义图片、视频及其父类的数据结构。

open class MediaInfo(
    @Expose
    var size: Long = 0L, // 大小 单位B
    @Expose
    var width: Float = 0f, // 宽
    @Expose
    var height: Float = 0f, // 高
    @Expose
    var localPath: String = "", // 系统绝对路径
    @Expose
    var localPathUri: String = "", // 媒体文件Uri
    @Expose
    var fileName: String = "", // 文件名
    @Expose
    var mimeType: String = "", // 媒体类型
    @Expose
    var mediaId: String = "", // 媒体ID
    @Expose
    var lastModified: Long = 0L, // 最后更改时间
) {

    companion object {
        const val PHOTO_MIMETYPE_DEFAULT = "image/jpeg"
        const val VIDEO_MIMETYPE_DEFAULT = "video/mp4"

        const val PHOTO_MIMETYPE_DEFAULT_CONTAIN = "image"
        const val VIDEO_MIMETYPE_DEFAULT_CONTAIN = "video"
    }

    enum class MediaType(val type: Int) {
        NOT_DEFINE(0),
        PHOTO(1),
        VIDEO(2),
    }

}

data class PhotoInfo(
    var photoId: String = "",
    @SerializedName("photoCoverFull") var photoCoverFull: String = "", // 在线图片url 或者 系统图片media路径
    @SerializedName("photoCover") // 在线图片缩略图 或者 系统图片media路径
    var photoCover: String = "",
) : MediaInfo() {
    override fun equals(other: Any?): Boolean {
        return if (other is PhotoInfo) {
            other.photoId == this.photoId
        } else {
            false
        }
    }

    override fun hashCode(): Int {
        return photoId.hashCode()
    }
}

/**
 * Description:
 * CreateDate:      2022/11/16 18:09
 * Author:          agg
 *
 * 码率（比特率），单位为 bps，比特率越高，传送的数据速度越快。在压缩视频时指定码率，则可确定压缩后的视频大小。
 * 视频大小（byte） = (duration(ms) / 1000) * (biteRate(bit/s) / 8)
 */
data class VideoInfo(
    var firstFrame: Bitmap? = null, // 视频第一帧图，业务层使用，可能为空。
    @Expose
    var duration: Long = 0L, // 视频长度 ms
    @Expose
    var biteRate: Long = 0L, // 视频码率 bps

    /* --------not necessary, maybe not value---- */
    @Expose
    var addTime: Long = 0L, // 视频添加时间
    @Expose
    var videoRotation: Int = 0, // 视频方向
    /* --------not necessary, maybe not value---- */
) : MediaInfo()

其次，需要提供混合图片视频的数据结构，混合展示图片视频时需使用到。

data class MixMediaInfoList(
    var isLoadVideoListFinish: Boolean = false,
    var isLoadPhotoListFinish: Boolean = false,
    var videoList: MutableList<MediaInfo> = mutableListOf(),
    var photoList: MutableList<MediaInfo> = mutableListOf(),
    var maxMediaList: MutableList<MediaInfo> = mutableListOf(),
) {

    suspend fun getMaxMediaList(): MutableList<MediaInfo> = withContext(Dispatchers.IO) {
        if (maxMediaList.isEmpty()) {
            maxMediaList.addAll(videoList)
            maxMediaList.addAll(photoList)
            maxMediaList.sortByDescending { it.lastModified }
        }
        maxMediaList
    }

}

5.2 图片视频获取工具类

首先，提供图片获取工具类，并将其转为自定义的数据结构 PhotoInfo。

object PhotoInfoUtils {

    /**
     * 获取系统所有图片文件
     */
    suspend fun getSysPhotos(contentResolver: ContentResolver): MutableList<MediaInfo> =
        withContext(Dispatchers.IO) {
            val photoList: MutableList<MediaInfo> = mutableListOf()
            var cursor: Cursor? = null
            try {
                cursor = contentResolver.query(
                    Media.EXTERNAL_CONTENT_URI, arrayOf(
                        Media._ID,
                        Media.DATA,
                        Media.DISPLAY_NAME,
                        Media.MIME_TYPE, // 媒体类型
                        Media.SIZE,
                        Media.WIDTH, // 图片宽
                        Media.HEIGHT, // 图片高
                        Media.DATE_MODIFIED,
                    ), null, null, ContactsContract.Contacts._ID + " DESC", null
                )
                cursor?.moveToFirst()
                if (cursor == null || cursor.isAfterLast) return@withContext photoList

                cursor.let {
                    while (!it.isAfterLast) {
                        val photoLibraryInfo = getPhoto(it)
                        // cursor并不能保证每张图都能获取到宽高，仅在这里取size
                        photoList.add(photoLibraryInfo)
                        it.moveToNext()
                    }
                }
            } catch (e: Exception) {
                LogUtils.e(e)
            } finally {
                cursor?.close()
            }
            photoList
        }

    @SuppressLint("Range")
    private fun getPhoto(cursor: Cursor): PhotoInfo {
        val phoneLibraryInfo = PhotoInfo()
        phoneLibraryInfo.photoId = cursor.getString(cursor.getColumnIndex(Media._ID))
        phoneLibraryInfo.localPath = cursor.getString(cursor.getColumnIndex(Media.DATA))
        phoneLibraryInfo.mimeType = cursor.getString(cursor.getColumnIndex(Media.MIME_TYPE))
        phoneLibraryInfo.size = cursor.getLong(cursor.getColumnIndex(Media.SIZE))
        phoneLibraryInfo.width = cursor.getFloat(cursor.getColumnIndex(Media.WIDTH))
        phoneLibraryInfo.height = cursor.getFloat(cursor.getColumnIndex(Media.HEIGHT))
        phoneLibraryInfo.lastModified = cursor.getLong(cursor.getColumnIndex(Media.DATE_MODIFIED))

        val thumbnailUri: Uri = ContentUris.withAppendedId(
            Media.EXTERNAL_CONTENT_URI, phoneLibraryInfo.photoId.toLong()
        )
        phoneLibraryInfo.photoCoverFull = thumbnailUri.toString()
        phoneLibraryInfo.photoCover = thumbnailUri.toString()
        phoneLibraryInfo.localPathUri = thumbnailUri.toString()
        return phoneLibraryInfo
    }

}

然后，提供视频获取工具类，并将其转为自定义的数据结构 VideoInfo。

/**
 * Description: 视频信息工具类
 * CreateDate:  2022/11/16 18:46
 * Author:      agg
 */
@SuppressLint("Range", "Recycle")
object VideoInfoUtils {

    private const val VIDEO_FIRST_FRAME_TIME_US = 1000L
    private const val URI_VIDEO_PRE = "content://media/external/video/media"

    /**
     * 获取系统所有视频文件
     */
    suspend fun getSysVideos(contentResolver: ContentResolver): MutableList<MediaInfo> =
        withContext(Dispatchers.IO) {
            val videoList: MutableList<MediaInfo> = mutableListOf()
            var cursor: Cursor? = null
            try {
                val queryArray = arrayOf(
                    Media._ID,
                    Media.SIZE, // 视频大小
                    Media.WIDTH, // 视频宽
                    Media.HEIGHT, // 视频高
                    Media.DATA, // 视频绝对路径
                    Media.DISPLAY_NAME, // 视频文件名
                    Media.MIME_TYPE, // 媒体类型
                    Media.DURATION, // 视频长度
                    Media.DATE_ADDED, // 视频添加时间
                    Media.DATE_MODIFIED, // 视频最后更改时间
                ).toMutableList()
//                if (SDK_INT >= Build.VERSION_CODES.R) queryArray.add(Media.BITRATE)// 视频码率
                cursor = contentResolver.query(
                    Media.EXTERNAL_CONTENT_URI,
                    queryArray.toTypedArray(),
                    null,
                    null,
                    Media.DATE_ADDED + " DESC",
                    null
                )
                cursor?.moveToFirst()
                if (cursor == null || cursor.isAfterLast) return@withContext videoList
                while (!cursor.isAfterLast) {
                    getVideoInfo(cursor).run { if (duration > 0 && size > 0) videoList.add(this) }
                    cursor.moveToNext()
                }
            } catch (e: Exception) {
                LogUtils.e(e)
            } finally {
                cursor?.close()
            }
            videoList
        }

    /**
     * 获取视频文件信息
     * 注：（1）暂未包括videoRotation；（2）biteRate通过文件大小和视频时长计算
     */
    private suspend fun getVideoInfo(cursor: Cursor): VideoInfo = withContext(Dispatchers.IO) {
        val videoInfo = VideoInfo()
        videoInfo.mediaId = cursor.getString(cursor.getColumnIndex(Media._ID))
        videoInfo.size = cursor.getLong(cursor.getColumnIndex(Media.SIZE))
        videoInfo.width = cursor.getFloat(cursor.getColumnIndex(Media.WIDTH))
        videoInfo.height = cursor.getFloat(cursor.getColumnIndex(Media.HEIGHT))
        videoInfo.localPath = cursor.getString(cursor.getColumnIndex(Media.DATA))
        videoInfo.localPathUri = getVideoPathUri(videoInfo.mediaId).toString()
        videoInfo.fileName = cursor.getString(cursor.getColumnIndex(Media.DISPLAY_NAME))
        videoInfo.mimeType = cursor.getString(cursor.getColumnIndex(Media.MIME_TYPE))
//        不能在这获取第一帧，太耗时，改为使用的地方去获取第一帧。
//        videoInfo.firstFrame = getVideoThumbnail(cursor.getString(cursor.getColumnIndex(Media.DATA)))
        videoInfo.duration = cursor.getLong(cursor.getColumnIndex(Media.DURATION))
        videoInfo.biteRate = ((8 * videoInfo.size * 1024) / (videoInfo.duration / 1000f)).toLong()
//            if (SDK_INT >= Build.VERSION_CODES.R) cursor.getLong(cursor.getColumnIndex(Media.BITRATE))
//            else ((8 * videoInfo.size * 1024) / (videoInfo.duration / 1000f)).toLong()
        videoInfo.addTime = cursor.getLong(cursor.getColumnIndex(Media.DATE_ADDED))
        videoInfo.lastModified = cursor.getLong(cursor.getColumnIndex(Media.DATE_MODIFIED))
        videoInfo
    }

    /**
     * 获取视频文件信息
     * 注：（1）暂未包括lastModified、addTime；（2）mediaId以filePath代替
     *
     * @param path 视频文件的路径
     * @return VideoInfo 视频文件信息
     */
    suspend fun getVideoInfo(path: String?): VideoInfo = withContext(Dispatchers.IO) {
        val videoInfo = VideoInfo()
        if (!path.isNullOrEmpty()) {
            val media = MediaMetadataRetriever()
            try {
                media.setDataSource(path)
                videoInfo.size =
                    File(path).let { if (FileUtils.isFileExists(it)) it.length() else 0 }
                videoInfo.width = media.extractMetadata(METADATA_KEY_VIDEO_WIDTH)?.toFloat() ?: 0f
                videoInfo.height = media.extractMetadata(METADATA_KEY_VIDEO_HEIGHT)?.toFloat() ?: 0f
                videoInfo.localPath = path
                videoInfo.localPathUri = getVideoPathUri(Utils.getApp(), path).toString()
                videoInfo.fileName = path.split(File.separator).let {
                    if (it.isNotEmpty()) it[it.size - 1] else ""
                }
                videoInfo.mimeType = media.extractMetadata(METADATA_KEY_MIMETYPE) ?: ""
//                videoInfo.firstFrame = media.getFrameAtTime(VIDEO_FIRST_FRAME_TIME_US)?.let { compressVideoThumbnail(it) }
                videoInfo.duration = media.extractMetadata(METADATA_KEY_DURATION)?.toLong() ?: 0
                videoInfo.biteRate = media.extractMetadata(METADATA_KEY_BITRATE)?.toLong() ?: 0
                videoInfo.videoRotation =
                    media.extractMetadata(METADATA_KEY_VIDEO_ROTATION)?.toInt() ?: 0
                videoInfo.mediaId = path
            } catch (e: Exception) {
            } finally {
                media.release()
            }
        }
        videoInfo
    }

    /**
     * 获取视频缩略图：通过Uri抓取第一帧
     * @param videoUriString 视频在媒体库中Uri。如：content://media/external/video/media/11378
     */
    suspend fun getVideoThumbnail(context: Context, videoUriString: String): Bitmap? =
        withContext(Dispatchers.IO) {
            var bitmap: Bitmap? = null
            val retriever = MediaMetadataRetriever()
            try {
                retriever.setDataSource(context, Uri.parse(videoUriString))
                // OPTION_CLOSEST_SYNC：在给定的时间，检索最近一个同步与数据源相关联的的帧（关键帧）
                // OPTION_CLOSEST：表示获取离该时间戳最近帧（I帧或P帧）
                bitmap = if (SDK_INT >= Build.VERSION_CODES.O_MR1) {
                    retriever.getScaledFrameAtTime(
                        VIDEO_FIRST_FRAME_TIME_US,
                        OPTION_CLOSEST_SYNC,
                        THUMBNAIL_DEFAULT_COMPRESS_VALUE.toInt(),
                        THUMBNAIL_DEFAULT_COMPRESS_VALUE.toInt()
                    )
                } else {
                    retriever.getFrameAtTime(VIDEO_FIRST_FRAME_TIME_US)
                        ?.let { compressVideoThumbnail(it) }
                }
            } catch (e: Exception) {
            } finally {
                try {
                    retriever.release()
                } catch (e: Exception) {
                }
            }
            bitmap
        }

    /**
     * 通过视频资源ID，直接获取视频Uri
     * @param mediaId 视频资源ID
     */
    fun getVideoPathUri(mediaId: String): Uri =
        Uri.withAppendedPath(Uri.parse(URI_VIDEO_PRE), mediaId)

    /**
     * 通过视频资源本地路径，获取视频Uri
     * @param path 视频资源本地路径
     */
    fun getVideoPathUri(context: Context, path: String): Uri? {
        var uri: Uri? = null
        var cursor: Cursor? = null
        try {
            cursor = context.contentResolver.query(
                Media.EXTERNAL_CONTENT_URI,
                arrayOf(Media._ID),
                Media.DATA + "=? ",
                arrayOf(path),
                null
            )
            uri = if (cursor != null && cursor.moveToFirst()) {
                Uri.withAppendedPath(
                    Uri.parse(URI_VIDEO_PRE),
                    "" + cursor.getInt(cursor.getColumnIndex(MediaStore.MediaColumns._ID))
                )
            } else {
                if (File(path).exists()) {
                    val values = ContentValues()
                    values.put(Media.DATA, path)
                    context.contentResolver.insert(Media.EXTERNAL_CONTENT_URI, values)
                } else {
                    null
                }
            }
        } catch (e: Exception) {
        } finally {
            cursor?.close()
        }
        return uri
    }

}

同时，提供视频缩略图工具类，方便业务代码使用。

/**
 * Description: 视频缩略图工具类
 * 宽高压缩、缩放法压缩可针对Bitmap操作，而采样率压缩和质量压缩针对于File、Resource操作
 * CreateDate:  2022/11/24 18:48
 * Author:      agg
 */
object VideoThumbnailUtils {

    /**
     * 视频缩略图默认压缩尺寸
     */
    const val THUMBNAIL_DEFAULT_COMPRESS_VALUE = 1024f

    /**
     * 视频缩略图默认压缩比例
     */
    private const val THUMBNAIL_DEFAULT_SCALE_VALUE = 0.5f

    private const val MAX_IMAGE_SIZE = 500 * 1024  //图片压缩阀值

    /**
     * 压缩视频缩略图
     * @param bitmap 视频缩略图
     */
    fun compressVideoThumbnail(bitmap: Bitmap): Bitmap? {
        val width: Int = bitmap.width
        val height: Int = bitmap.height
        val max: Int = Math.max(width, height)
        if (max > THUMBNAIL_DEFAULT_COMPRESS_VALUE) {
            val scale: Float = THUMBNAIL_DEFAULT_COMPRESS_VALUE / max
            val w = (scale * width).roundToInt()
            val h = (scale * height).roundToInt()
            return compressVideoThumbnail(bitmap, w, h)
        }
        return bitmap
    }

    /**
     * 压缩视频缩略图：宽高压缩
     * 注：如果用户期望的长度和宽度和原图长度宽度相差太多的话，图片会很不清晰。
     * @param bitmap 视频缩略图
     */
    fun compressVideoThumbnail(bitmap: Bitmap, width: Int, height: Int): Bitmap? {
        return Bitmap.createScaledBitmap(bitmap, width, height, true)
    }

    /**
     * 压缩视频缩略图：缩放法压缩
     * 注：长度和宽度没有变，内存缩小4倍（内存像素宽高各缩小一半）
     */
    fun compressVideoThumbnailMatrix(bitmap: Bitmap): Bitmap? {
        val matrix = Matrix()
        matrix.setScale(THUMBNAIL_DEFAULT_SCALE_VALUE, THUMBNAIL_DEFAULT_SCALE_VALUE)
        return Bitmap.createBitmap(bitmap, 0, 0, bitmap.width, bitmap.height, matrix, true)
    }

    /**
     * 压缩视频缩略图：采样率压缩
     * @param filePath 视频缩略图路径
     */
    fun compressVideoThumbnailSample(filePath: String, width: Int, height: Int): Bitmap? {
        return BitmapFactory.Options().run {
            // inJustDecodeBounds 设置为 true后，BitmapFactory.decodeFile 不生成Bitmap对象，而仅仅是读取该图片的尺寸和类型信息。
            inJustDecodeBounds = true
            BitmapFactory.decodeFile(filePath, this)
            inSampleSize = calculateInSampleSize(this, width, height)
            inJustDecodeBounds = false
            BitmapFactory.decodeFile(filePath, this)
        }
    }

    /**
     * 压缩图片到指定宽高
     * @param localPath 图片本地路径
     * @param size 原图所占空间大小
     */
    fun compressLocalImage(localPath: String, size: Int): Bitmap? {
        return if (size > MAX_IMAGE_SIZE) {
            val scale = size.toDouble() / MAX_IMAGE_SIZE
            val simpleSize = ceil(sqrt(scale)).toInt() //取最接近的平方根
            var bitmap = BitmapFactory.Options().run {
                inPreferredConfig = Bitmap.Config.RGB_565
                inSampleSize = simpleSize
                inJustDecodeBounds = false

                val ins = Utils.getApp().contentResolver.openInputStream(Uri.parse(localPath))
                BitmapFactory.decodeStream(ins, null, this)
            }

            val angle = readImageRotation(localPath)
            if (angle != 0 && bitmap != null) {
                bitmap = rotatingImageView(angle, bitmap)
            }
            if (bitmap == null) {
                return null
            }
            val result = tryCompressAgain(bitmap)

            result
        } else { //不压缩
            null
        }
    }

    /**
     * 试探性进一步压缩体积
     */
    private fun tryCompressAgain(original: Bitmap): Bitmap {
        val out = ByteArrayOutputStream()
        original.compress(Bitmap.CompressFormat.JPEG, 100, out)
        val matrix = Matrix()
        var resultBp = original

        try {
            var scale = 1.0f
            while (out.toByteArray().size > MAX_IMAGE_SIZE) {
                matrix.setScale(scale, scale)//每次缩小 1/10
                resultBp =
                    Bitmap.createBitmap(
                        original,
                        0,
                        0,
                        original.width,
                        original.height,
                        matrix,
                        true
                    )
                out.reset()
                resultBp.compress(Bitmap.CompressFormat.JPEG, 100, out)
                scale *= 0.9f
            }
        } catch (e: Exception) {
            e.printStackTrace()
        } finally {
            out.close()
        }
        return resultBp
    }

    //获取图片旋转角度
    private fun readImageRotation(path: String): Int {
        return kotlin.runCatching {
            val ins = Utils.getApp().contentResolver.openInputStream(Uri.parse(path)) ?: return 0
            val exifInterface = ExifInterface(ins)
            val orientation: Int = exifInterface.getAttributeInt(
                ExifInterface.TAG_ORIENTATION,
                ExifInterface.ORIENTATION_NORMAL
            )
            ins.close()
            return when (orientation) {
                ExifInterface.ORIENTATION_ROTATE_90 -> 90
                ExifInterface.ORIENTATION_ROTATE_180 -> 180
                ExifInterface.ORIENTATION_ROTATE_270 -> 270
                else -> 0
            }
        }.getOrNull() ?: 0
    }

    /**
     * 旋转图片
     */
    private fun rotatingImageView(angle: Int, bitmap: Bitmap): Bitmap? {
        // 旋转图片 动作
        val matrix = Matrix()
        matrix.postRotate(angle.toFloat())
        // 创建新的图片
        return Bitmap.createBitmap(bitmap, 0, 0, bitmap.width, bitmap.height, matrix, true)
    }

    /**
     * 计算采样率：值为2的幂。例如, 一个分辨率为2048x1536的图片，如果设置 inSampleSize 为4，那么会产出一个大约512x384大小的Bitmap。
     * @param options
     * @param reqWidth 想要压缩到的宽度
     * @param reqHeight  想要压缩到的高度
     * @return
     */
    fun calculateInSampleSize(options: BitmapFactory.Options, reqWidth: Int, reqHeight: Int): Int {
        var inSampleSize = 1
        if (options.outHeight > reqHeight || options.outWidth > reqWidth) {
            val halfHeight: Int = options.outHeight / 2
            val halfWidth: Int = options.outWidth / 2
            while (halfHeight / inSampleSize >= reqHeight && halfWidth / inSampleSize >= reqWidth) {
                inSampleSize *= 2
            }
        }
        return inSampleSize
    }

    /**
     * 计算采样率：值为整数的采样率。
     */
    fun calculateInSampleSizeFixed(options: BitmapFactory.Options, width: Int, height: Int): Int {
        val hRatio = ceil(options.outHeight.div(height.toDouble())) // 大于1：图片高度>手机屏幕高度
        val wRatio = ceil(options.outWidth.div(width.toDouble())) // 大于1：图片宽度>手机屏幕宽度
        return if (hRatio > wRatio) hRatio.toInt() else wRatio.toInt()
    }

}

5.3 解耦 viewmodel 和 model 层

class MediaDetailViewModel : BaseViewModel() {

    private val model by lazy { MediaDetailModel() }
    val getSysPhotosLiveData: MutableLiveData<List<MediaInfo>> by lazy { MutableLiveData<List<MediaInfo>>() }
    val getSysVideosLiveData: MutableLiveData<List<MediaInfo>> by lazy { MutableLiveData<List<MediaInfo>>() }

    fun getSysVideos(contentResolver: ContentResolver) {
        viewModelScope.launch(Dispatchers.IO) {
            getSysVideosLiveData.postValue(model.getSysVideos(contentResolver))
        }
    }

    fun getSysPhotos(contentResolver: ContentResolver) {
        viewModelScope.launch(Dispatchers.IO) {
            getSysPhotosLiveData.postValue(model.getSysPhotos(contentResolver))
        }
    }

}

open class BaseViewModel : ViewModel()


class MediaDetailModel {

    suspend fun getSysVideos(contentResolver: ContentResolver) =
        VideoInfoUtils.getSysVideos(contentResolver)

    suspend fun getSysPhotos(contentResolver: ContentResolver) =
        PhotoInfoUtils.getSysPhotos(contentResolver)

}

5.4 初始化 View

首先，在 Activity 的初始化过程中，初始化窗口时将 WIndow 设置为 0dof，让可视窗口跟随用户视野移动。

    private fun initWindow() {
        Log.i(TAG, "initWindow: ")
        val lp = window.attributes
        lp.dofIndex = 0
        lp.subType = WindowManager.LayoutParams.MB_WINDOW_IMMERSIVE_0DOF
        window.attributes = lp
    }

其次，引入图片视频 BannerViewPager 组件。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.zhpan.bannerview.BannerViewPager
        android:id="@+id/bvFeedPhotoContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

最后，初始化 BannerViewPager 组件。

    private fun initBannerViewPager() {
        (binding.bvFeedPhotoContent as BannerViewPager<MediaInfo>).apply {
            bigDetailAdapter = MediaDetailItemAdapter()
            adapter = bigDetailAdapter
            setLifecycleRegistry(lifecycle)
            setCanLoop(false)
            setAutoPlay(false)
            setIndicatorVisibility(GONE)
            disallowParentInterceptDownEvent(true) // 不允许内部拦截，使得activity可以获得下滑能力
            registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
                /**
                 * 某个页面被选中(从0计数) 翻页成功才会调用
                 * @param position 翻页后的视图在集合中位置
                 */
                @SuppressLint("SetTextI18n")
                override fun onPageSelected(position: Int) {
                    super.onPageSelected(position)
                    // 刷新上个页面的信息（图片缩放置为初始状态、视频停止播放）
                    Log.i(TAG, "onPageSelected: position = $position")
                }
            })
        }.create()
    }

    private fun updateViewPager(allMediaInfoList: MutableList<MediaInfo>) {
        Log.i(TAG, "updateViewPager: size = ${allMediaInfoList.size}")
        binding.bvFeedPhotoContent.refreshData(allMediaInfoList)
        binding.bvFeedPhotoContent.setCurrentItem(0, false)
    }

5.5 BannerViewPager 组件加载和使用

首先，自定义适配器 MediaDetailItemAdapter。

class MediaDetailItemAdapter : BaseBannerAdapter<MediaInfo>() {

    private var context: Context? = null

    override fun getLayoutId(viewType: Int): Int = R.layout.media_detail_item_adapter

    override fun createViewHolder(
        parent: ViewGroup, itemView: View?, viewType: Int
    ): BaseViewHolder<MediaInfo> {
        context = parent.context
        return super.createViewHolder(parent, itemView, viewType)
    }

    override fun bindData(
        holder: BaseViewHolder<MediaInfo>, mediaInfo: MediaInfo, position: Int, pageSize: Int
    ) {
        val vpViewGroup = holder.findViewById<VideoPlayerViewGroup>(R.id.vpViewGroup)
        val ivAvatarDetail = holder.findViewById<PhotoView>(R.id.ivAvatarDetail)
        val ivAvatarDetailLarge =
            holder.findViewById<SubsamplingScaleImageView>(R.id.ivAvatarDetailLarge)
        if (mediaInfo is PhotoInfo) {
            vpViewGroup.visibility = GONE
            initPhotoInfo(mediaInfo, ivAvatarDetail, ivAvatarDetailLarge)
        } else if (mediaInfo is VideoInfo) {
            vpViewGroup.visibility = VISIBLE
            ivAvatarDetail.visibility = GONE
            ivAvatarDetailLarge.visibility = GONE
            vpViewGroup.initVideoInfo(mediaInfo)
        }
    }

    fun releaseAllVideos() {
        GSYVideoManager.releaseAllVideos()
    }

    private fun initPhotoInfo(
        photoInfo: PhotoInfo,
        ivAvatarDetail: PhotoView,
        ivAvatarDetailLarge: SubsamplingScaleImageView
    ) {
        ivAvatarDetail.visibility = VISIBLE
        ivAvatarDetailLarge.visibility = VISIBLE
        ivAvatarDetail.maximumScale = MAX_SCALE
        ivAvatarDetail.minimumScale = MIN_SCALE
        ivAvatarDetail.scale = MIN_SCALE

        val imageUrl = photoInfo.photoCoverFull
        val thumbUrl = photoInfo.photoCover
        if (imageUrl.isNotEmpty()) {
            ivAvatarDetail.visibility = VISIBLE
            context?.let {
                val isLarge = photoInfo.size > 5000 * 1024 // 大于5m认为是大图
                if (!isLarge) {
                    ivAvatarDetail.visibility = VISIBLE
                    Glide.with(it).load(imageUrl).thumbnail(Glide.with(it).load(thumbUrl))
                        .override(SIZE_ORIGINAL, SIZE_ORIGINAL).into(ivAvatarDetail)
                    ivAvatarDetailLarge.visibility = INVISIBLE
                } else {
                    ivAvatarDetailLarge.visibility = VISIBLE
                    Glide.with(it).load(imageUrl).downloadOnly(object : SimpleTarget<File>() {
                        override fun onResourceReady(
                            resource: File, transition: Transition<in File>?
                        ) {
                            // 在宽高均大于手机屏幕的图片被下载到media后会被强制旋转，这里需要禁止
                            ivAvatarDetailLarge.orientation =
                                SubsamplingScaleImageView.ORIENTATION_USE_EXIF
                            ivAvatarDetailLarge.setImage(
                                ImageSource.uri(Uri.fromFile(resource))
                            )
                            ivAvatarDetail.visibility = INVISIBLE
                        }
                    })
                }
            }
        } else {
            ivAvatarDetail.visibility = GONE
            ivAvatarDetailLarge.visibility = GONE
        }
    }

    companion object {
        const val MAX_SCALE = 5F
        const val MIN_SCALE = 1F
    }

}

对于视频组件，需要自定义 View 及其 ViewGroup。

class VideoPlayerView : StandardGSYVideoPlayer {

    constructor(context: Context?) : super(context)

    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)

    constructor(context: Context?, fullFlag: Boolean?) : super(context, fullFlag)

    override fun getLayoutId(): Int = R.layout.video_player_view

    override fun touchSurfaceMoveFullLogic(absDeltaX: Float, absDeltaY: Float) {
        super.touchSurfaceMoveFullLogic(absDeltaX, absDeltaY)
        //不给触摸快进，如果需要，屏蔽下方代码即可
        mChangePosition = false

        //不给触摸音量，如果需要，屏蔽下方代码即可
        mChangeVolume = false

        //不给触摸亮度，如果需要，屏蔽下方代码即可
        mBrightness = false
    }

    override fun touchDoubleUp(e: MotionEvent?) {
        //super.touchDoubleUp();
        //不需要双击暂停
    }

}

对应的，视频播放的核心操作逻辑放在 VideoPlayerViewGroup。

class VideoPlayerViewGroup(context: Context, attrs: AttributeSet?) :
    ConstraintLayout(context, attrs), GSYVideoProgressListener, SeekBar.OnSeekBarChangeListener {

    companion object {
        private const val DELAY_DISMISS_3_SECOND = 3000L
        private const val VIDEO_RESOLUTION_BEYOND_2K = 3500f
    }

    private val binding by lazy {
        VideoPlayerViewGroupBinding.inflate(LayoutInflater.from(context), this, true)
    }

    private val runnable: Runnable = Runnable {
        binding.playBtn.isVisible = false
        binding.currentPosition.isVisible = false
        binding.seekbar.isVisible = false
        binding.duration.isVisible = false
    }

    private var videoInfo: VideoInfo? = null

    /**
     * seekbar拖动后的进度
     */
    private var seekbarTouchFinishProgress = -1L

    /**
     * 视频未初始化时，记录seekbar拖动后的进度，初始化后，需定位到记录位置。
     */
    private var seekbarTouchFinishProgressNotInitial = -1L

    fun initVideoInfo(videoInfo: VideoInfo) {
        this.videoInfo = videoInfo
        updateVideoSeekbar(0, 0, videoInfo.duration)

        if (videoInfo.firstFrame != null) {
            binding.firstFrame.setImageBitmap(videoInfo.firstFrame)
        } else {
            CoroutineScope(Dispatchers.Main).launch {
                videoInfo.firstFrame = getVideoThumbnail(context, videoInfo.localPathUri)
                binding.firstFrame.setImageBitmap(videoInfo.firstFrame)
            }
        }
        binding.playBtn.setOnClickListener { handleVideoPlayer() }
        binding.clickScreen.setOnClickListener { handleClickScreen() }
        binding.seekbar.setOnSeekBarChangeListener(this)

        if (!binding.firstFrame.isVisible) restoreVideoPlayer()
        if (!binding.seekbar.isVisible) {
            binding.currentPosition.isVisible = true
            binding.seekbar.isVisible = true
            binding.duration.isVisible = true
            binding.playBtn.isVisible = true
        }
    }

    /**
     * 更新seekbar
     */
    private fun updateVideoSeekbar(
        progress: Int, currentPosition: Long, duration: Long
    ) {
        binding.currentPosition.text = convertToVideoTimeFromSecond(currentPosition / 1000)
        binding.seekbar.progress = progress
        binding.duration.text = convertToVideoTimeFromSecond(duration / 1000)
    }

    private fun handleVideoPlayer() {
        when {
            binding.firstFrame.isVisible -> {
                seekbarTouchFinishProgress = -1L
                binding.firstFrame.isVisible = false
                binding.playBtn.setImageResource(R.drawable.ic_pause)

                // 初始化播放
                binding.videoPlayer.backButton?.isVisible = false
                if (videoInfo?.width ?: 0f > VIDEO_RESOLUTION_BEYOND_2K || videoInfo?.height ?: 0f > VIDEO_RESOLUTION_BEYOND_2K) {
                    PlayerFactory.setPlayManager(SystemPlayerManager::class.java)
                } else {
                    PlayerFactory.setPlayManager(IjkPlayerManager::class.java)
                }
                binding.videoPlayer.setUp(videoInfo?.localPathUri, true, "")
                binding.videoPlayer.startPlayLogic()
                binding.videoPlayer.setGSYVideoProgressListener(this)
                binding.videoPlayer.setVideoAllCallBack(object : GSYSampleCallBack() {
                    override fun onAutoComplete(url: String?, vararg objects: Any?) {
                        super.onAutoComplete(url, *objects)
                        restoreVideoPlayer()
                        updateVideoSeekbar(0, 0, videoInfo?.duration ?: 0)
                    }
                })

                if (binding.seekbar.isVisible) {
                    seekbarDelayDismiss()
                } else {
                    binding.playBtn.isVisible = false
                }
            }

            binding.videoPlayer.currentState == GSYVideoView.CURRENT_STATE_PAUSE -> {
                binding.playBtn.setImageResource(R.drawable.ic_pause)
                binding.videoPlayer.onVideoResume(false)

                // playBtn不可见，则底部seekbar不可见
                if (binding.seekbar.isVisible) {
                    seekbarDelayDismiss()
                } else {
                    binding.playBtn.isVisible = false
                }
            }

            binding.videoPlayer.isInPlayingState -> {
                binding.playBtn.setImageResource(R.drawable.ic_play)
                binding.videoPlayer.onVideoPause()

                handler.removeCallbacks(runnable)
            }
        }
    }

    private fun handleClickScreen() {
        when {
            binding.firstFrame.isVisible -> {
                if (binding.videoPlayer.currentState == -1 || binding.videoPlayer.currentState == CURRENT_STATE_NORMAL) {
                    binding.currentPosition.isVisible = !binding.currentPosition.isVisible
                    binding.seekbar.isVisible = !binding.seekbar.isVisible
                    binding.duration.isVisible = !binding.duration.isVisible
                    binding.playBtn.isVisible = true
                }
            }

            binding.videoPlayer.currentState == GSYVideoView.CURRENT_STATE_PAUSE -> {
                binding.currentPosition.isVisible = !binding.currentPosition.isVisible
                binding.seekbar.isVisible = !binding.seekbar.isVisible
                binding.duration.isVisible = !binding.duration.isVisible
                binding.playBtn.isVisible = true
            }

            binding.videoPlayer.isInPlayingState -> {
                if (binding.playBtn.isVisible) {
                    if (binding.seekbar.isVisible) {
                        handler.post(runnable)
                    } else {
                        binding.currentPosition.isVisible = true
                        binding.seekbar.isVisible = true
                        binding.duration.isVisible = true

                        seekbarDelayDismiss()
                    }
                } else {
                    if (!binding.seekbar.isVisible) {
                        binding.currentPosition.isVisible = true
                        binding.seekbar.isVisible = true
                        binding.duration.isVisible = true
                    }
                    binding.playBtn.isVisible = true
                    seekbarDelayDismiss()
                }
            }
        }
    }

    /**
     * 进度条延迟3秒消失
     */
    private fun seekbarDelayDismiss() {
        handler.removeCallbacks(runnable)
        handler.postDelayed(runnable, DELAY_DISMISS_3_SECOND)
    }

    /**
     * 还原播放
     */
    private fun restoreVideoPlayer() {
        binding.firstFrame.isVisible = true
        binding.playBtn.setImageResource(R.drawable.ic_play)
        binding.playBtn.isVisible = true
        binding.currentPosition.isVisible = true
        binding.seekbar.isVisible = true
        binding.duration.isVisible = true
        if (handler != null) handler.removeCallbacks(runnable)

        binding.videoPlayer.onVideoPause()
        binding.videoPlayer.release()
        binding.videoPlayer.onVideoReset()
        binding.videoPlayer.setVideoAllCallBack(null)
    }

    override fun onProgress(
        progress: Long, secProgress: Long, currentPosition: Long, duration: Long
    ) {
        if (seekbarTouchFinishProgress != -1L && progress <= binding.seekbar.progress) {
            return
        }
        seekbarTouchFinishProgress = -1
        if (seekbarTouchFinishProgressNotInitial != -1L) {
            seekbarTouchFinishProgress = seekbarTouchFinishProgressNotInitial
            binding.videoPlayer.seekTo(seekbarTouchFinishProgressNotInitial)
            seekbarTouchFinishProgressNotInitial = -1
            return
        }
        updateVideoSeekbar(progress.toInt(), currentPosition, videoInfo?.duration ?: 0)
    }

    override fun onStartTrackingTouch(seekBar: SeekBar) {
        handler.removeCallbacks(runnable)
    }

    override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
    }

    override fun onStopTrackingTouch(seekBar: SeekBar) {
        val position = (seekBar.progress.toLong() + 1) * (videoInfo?.duration ?: 0) / 100
        if (binding.videoPlayer.isInPlayingState) seekbarTouchFinishProgress = position
        binding.currentPosition.text = convertToVideoTimeFromSecond(position / 1000)
        binding.videoPlayer.seekTo(position)
        if (binding.videoPlayer.isInPlayingState && binding.videoPlayer.currentState != GSYVideoView.CURRENT_STATE_PAUSE) seekbarDelayDismiss()
        if (binding.videoPlayer.currentState == -1 || binding.videoPlayer.currentState == CURRENT_STATE_NORMAL) {
            seekbarTouchFinishProgressNotInitial = position
        }
    }

}

最后，附上 xml 文件。

1）media_detail_item_adapter.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.agg.mocamera.portal.feature.home.view.VideoPlayerViewGroup
        android:id="@+id/vpViewGroup"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />

    <com.github.chrisbanes.photoview.PhotoView
        android:id="@+id/ivAvatarDetail"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.davemorrissey.labs.subscaleview.SubsamplingScaleImageView
        android:id="@+id/ivAvatarDetailLarge"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible" />

</androidx.constraintlayout.widget.ConstraintLayout>

2）video_player_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#121212">

    <FrameLayout
        android:id="@+id/surface_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center" />

</RelativeLayout>

3）video_player_view_group.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/videoViewParent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="SpUsage">

    <com.agg.mocamera.portal.feature.home.view.VideoPlayerView
        android:id="@+id/videoPlayer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <View
        android:id="@+id/clickScreen"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ImageView
        android:id="@+id/firstFrame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@null"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/playBtn"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:contentDescription="@null"
        android:src="@drawable/ic_play"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.agg.ui.MBTextView
        android:id="@+id/currentPosition"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_marginStart="15dp"
        android:layout_marginBottom="58dp"
        android:gravity="center"
        android:textColor="#FFFFFF"
        android:textSize="12dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="00:00" />

    <SeekBar
        android:id="@+id/seekbar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="0dp"
        android:layout_height="24dp"
        android:duplicateParentState="false"
        android:max="100"
        android:maxHeight="6dp"
        android:minHeight="6dp"
        android:progress="0"
        android:progressDrawable="@drawable/video_seek_bar_progress"
        android:splitTrack="false"
        android:thumb="@drawable/ic_video_seek_bar_thumb"
        app:layout_constraintBottom_toBottomOf="@id/currentPosition"
        app:layout_constraintEnd_toStartOf="@id/duration"
        app:layout_constraintStart_toEndOf="@id/currentPosition"
        app:layout_constraintTop_toTopOf="@id/currentPosition" />

    <com.agg.ui.MBTextView
        android:id="@+id/duration"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_marginEnd="15dp"
        android:gravity="center"
        android:textColor="#FFFFFF"
        android:textSize="12dp"
        app:layout_constraintBottom_toBottomOf="@id/currentPosition"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/currentPosition"
        tools:text="04:59" />

</androidx.constraintlayout.widget.ConstraintLayout>

5.6 获取数据并加载到 View 显示

    private var allPhotoInfoList: MutableList<MediaInfo> = mutableListOf()
    private var mixMediaInfoList = MixMediaInfoList()
    private var bigDetailAdapter: MediaDetailItemAdapter? = null


    private fun initAllMediaInfoList() {
        viewModel.getSysPhotos(contentResolver)
        viewModel.getSysVideos(contentResolver)
    }

    override fun initViewModel() {
        viewModel.getSysPhotosLiveData.observe(this) { photoList ->
            Log.i(TAG, "initViewModel: photoList = ${photoList.size}")
            if (!mixMediaInfoList.isLoadPhotoListFinish) {
                mixMediaInfoList.isLoadPhotoListFinish = true
                mixMediaInfoList.photoList.addAll(photoList)
                if (mixMediaInfoList.isLoadVideoListFinish) {
                    lifecycleScope.launch { updateViewPager(mixMediaInfoList.getMaxMediaList()) }
                }
            }
        }
        viewModel.getSysVideosLiveData.observe(this) { videoList ->
            Log.i(TAG, "initViewModel: videoList = ${videoList.size}")
            if (!mixMediaInfoList.isLoadVideoListFinish) {
                mixMediaInfoList.isLoadVideoListFinish = true
                mixMediaInfoList.videoList.addAll(videoList)
                if (mixMediaInfoList.isLoadPhotoListFinish) {
                    lifecycleScope.launch { updateViewPager(mixMediaInfoList.getMaxMediaList()) }
                }
            }
        }
    }

    override fun onDestroy() {
        super.onDestroy()
        bigDetailAdapter?.releaseAllVideos()
    }

5.7 页面前后滑处理

    override fun scrollForward() {
        val position = binding.bvFeedPhotoContent.currentItem
        Log.i(TAG, "scrollForward: position=$position，size=${allPhotoInfoList.size}")
        binding.bvFeedPhotoContent.currentItem = position + 1
    }

    override fun scrollBackward() {
        val position = binding.bvFeedPhotoContent.currentItem
        Log.i(TAG, "scrollBackward: position=$position，size=${allPhotoInfoList.size}")
        binding.bvFeedPhotoContent.currentItem = position - 1
    }

5.8 gradle 依赖

    // CameraX core library using the camera2 implementation
    // The following line is optional, as the core library is included indirectly by camera-camera2
    // implementation "androidx.camera:camera-core:${camerax_version}"
    implementation "androidx.camera:camera-camera2:${CAMERAX}"
    // If you want to additionally use the CameraX Lifecycle library
    implementation "androidx.camera:camera-lifecycle:${CAMERAX}"
    // If you want to additionally use the CameraX View class
    implementation "androidx.camera:camera-view:${CAMERA_VIEW}"
    // If you want to additionally use the CameraX Extensions library
    // implementation "androidx.camera:camera-extensions:1.0.0-alpha31"

    implementation "com.github.zhpanvip:BannerViewPager:${BANNER_VIEW_PAGER}"
    implementation "com.github.chrisbanes:PhotoView:${PHOTO_VIEW}"
    implementation "com.davemorrissey.labs:subsampling-scale-image-view-androidx:${SUBSAMPLING_SCALE_IMAGE_VIEW_ANDROIDX}"
    // ijkplayer
    implementation "com.github.CarGuo.GSYVideoPlayer:gsyVideoPlayer-java:${GSY_VIDEO_PLAYER}"
    implementation "com.github.CarGuo.GSYVideoPlayer:gsyVideoPlayer-armv7a:${GSY_VIDEO_PLAYER}"
    implementation 'com.tencent.tav:libpag:4.2.41'


    CAMERAX = "1.1.0-alpha11"
    CAMERA_VIEW = "1.0.0-alpha31"
    BANNER_VIEW_PAGER = "3.5.0"
    PHOTO_VIEW = "2.0.0"
    SUBSAMPLING_SCALE_IMAGE_VIEW_ANDROIDX = "3.10.0"
    GSY_VIDEO_PLAYER = "v8.3.4-release-jitpack"