多张网络图片像视频一样连贯播放

最新推荐文章于 2022-12-13 11:15:57 发布

weixin_41650019

最新推荐文章于 2022-12-13 11:15:57 发布

阅读量882

点赞数

分类专栏：计算机

本文链接：https://blog.csdn.net/weixin_41650019/article/details/119464175

版权

计算机专栏收录该内容

51 篇文章 0 订阅

订阅专栏

使用Glide连贯展示多张网络图片

1.目标：

每一秒更换一张图片，使得像视频播放一样

2.实现

1.将获取到的图片url放入list中


        //网络图片集合,放在外边的全局变量
        private val imageUrlOneList = mutableListOf<String>()
        //网络图片对应的drawable集合，放在外边的全局变量
        private val imageUrlDrawableList = mutableListOf<Drawable>()
        
        imageUrlOneList.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20181230%2Fea8753e4582b425bb372410c0e3eadb8.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630845074&t=0e31149e483c3471d6c01085e3cc9eaf")
        imageUrlOneList.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F5b%2F24%2Fcc%2F5b24ccca5653b3161d5cf28703b905c2.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630845074&t=6067241a4e28217d66035a73a89b5ede")
        imageUrlOneList.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Fmw690%2F757f4db3ly1fs63cu8z6zj20ms14iago.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630845074&t=84ebeb08d799d49dec72f4d4f267e1b3")
        imageUrlOneList.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201303%2F16%2F173710lvx470i4348z6i6z.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630845074&t=7f015979c255bc636a0c6a1f40847464")
        imageUrlOneList.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.wangchao.net.cn%2Ffengjing%2F1324784233343.JPG&refer=http%3A%2F%2Fimage.wangchao.net.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630845074&t=a7b2411358730381dcd328ac8ba77160")

2.将网络图片转为本地drawable,并将drawable放入imageUrlDrawableList中

        //将网络图片转为本地drawable,并将drawable放入list中
        //由于转换过程不能在主线程中，所以我这里开一个协程来加载数据
        CoroutineScope(Dispatchers.IO).launch{
            for (imageUrl in imageUrlOneList){
                val drawable = loadImageFromNetwork(imageUrl)
                Log.d(TAG,"imageUrl===>${imageUrl}")
                if (drawable != null){
                    Log.d(TAG,"imageUrl=11==>${imageUrl}")
                    imageUrlDrawableList.add(drawable)
                }

                withContext(Dispatchers.Main){
                //数据是否加载完成
                    isImageLoadingFinish = true
                }
            }
        }

3.通过定时器和EventBus配合完成每秒刷新

        //定时器刷新图片，这里由于ui操作不能在这里面做，所以用eventbus来更新视图
        val timer = Timer()
        timer.scheduleAtFixedRate(object : TimerTask() {
            override fun run() {
//                        println("Time's up!")
                //图片数据加载完成再展示
                if (isImageLoadingFinish){
                    EventBus.getDefault().postSticky(TIMER_ALARM)
                }
            }
        }, 0, 1000)

注意使用EventBus需要在onCreate中注册EventBus

EventBus.getDefault().register(this)

写当接收到EventBus需要执行的操作（即使用Glide显示图片）
这里面分别用两个ImageView来展示图片，两个ImageView的加载方式不同才会出现一个展示图片连贯一个展示图片会闪屏的情况
其实就是一个直接用url展示一个将url网络图片转换成Drawable来展示

  @Subscribe(threadMode = ThreadMode.MAIN)
    fun messageRespond(event: String) {
        when (event) {
            TIMER_ALARM -> {
                Log.d(TAG,"drawable.size ===> ${imageUrlDrawableList.size}")
                if (!imageUrlOneList.isNullOrEmpty()){
                    //判断是不是显示到最后一张了，到最后一张的话就定位到第一张继续展示
                    if (currentPosition == imageUrlOneList.size - 1){
                        currentPosition = 0
                    }else{
                        currentPosition++
                    }
                    //第一种加载方式，直接加载url
                    Glide.with(binding.imageTest1).load(imageUrlOneList[currentPosition]).into(binding.imageTest1)

                    //第二种用加载方式，用drawable加载
                    if (currentPosition > 0){
                        //获取上一张图，用来当占位图，这样如果图片还没有加载出来就是显示占位图
                        val oldDrawable = imageUrlDrawableList[currentPosition - 1]
                        Glide.with(binding.imageTest2).load(imageUrlDrawableList[currentPosition]).placeholder(oldDrawable).into(binding.imageTest2)
                    }else{
                        val oldDrawable = imageUrlDrawableList.last()
                        Glide.with(binding.imageTest2).load(imageUrlDrawableList[currentPosition]).placeholder(oldDrawable).into(binding.imageTest2)
                    }
                }
            }
        }
    }


    //网络图片转成drawable
    private fun loadImageFromNetwork(imageUrl: String): Drawable? {
        var drawable: Drawable? = null
        try {
            // 可以在这里通过文件名来判断，是否本地有此图片
            drawable = Drawable.createFromStream(
                URL(imageUrl).openStream(), "image.jpg"
            )
        } catch (e: IOException) {
            Log.d(TAG,"${e.message}")
        }
        if (drawable == null) {
            Log.d(TAG,"null drawable")
        } else {
            Log.d(TAG,"not null drawable")
        }
        return drawable
    }

3.代码展示

1.用到的依赖

implementation 'com.github.bumptech.glide:glide:4.12.0'
implementation 'com.github.bumptech.glide:compiler:4.12.0'
implementation 'org.greenrobot:eventbus:3.2.0'
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.4.2'

2.主活动ImageUrlActivity

class ImageUrlActivity : AppCompatActivity() {
    private val TAG = "ImageUrlActivity"

    companion object {
        const val TIMER_ALARM = "timer_alarm"
    }

    //使用viewbinding这样可以避免直接使用控件id值，有时造成的空指针问题
    private lateinit var binding: ActivityImageUrlBinding

    //标记当前展示的图片位置
    private var currentPosition = 0

    //网络图片集合,放在外边的全局变量
    private val imageUrlOneList = mutableListOf<String>()

    //网络图片对应的drawable集合，放在外边的全局变量
    private val imageUrlDrawableList = mutableListOf<Drawable>()

    //标记图片是否加载完成了
    private var isImageLoadingFinish = false

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

        //注册到事件主线
        EventBus.getDefault().register(this)
        initImageListData()
        initButtonClick()
    }

    private fun initButtonClick() {
        binding.buttonChange.setOnClickListener{
            binding.imageTest1.isVisible = !binding.imageTest1.isVisible
            binding.imageTest2.isVisible = !binding.imageTest2.isVisible
        }
    }

    private fun initImageListData() {
        imageUrlOneList.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20181230%2Fea8753e4582b425bb372410c0e3eadb8.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630845074&t=0e31149e483c3471d6c01085e3cc9eaf")
        imageUrlOneList.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F5b%2F24%2Fcc%2F5b24ccca5653b3161d5cf28703b905c2.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630845074&t=6067241a4e28217d66035a73a89b5ede")
        imageUrlOneList.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Fmw690%2F757f4db3ly1fs63cu8z6zj20ms14iago.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630845074&t=84ebeb08d799d49dec72f4d4f267e1b3")
        imageUrlOneList.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201303%2F16%2F173710lvx470i4348z6i6z.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630845074&t=7f015979c255bc636a0c6a1f40847464")
        imageUrlOneList.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.wangchao.net.cn%2Ffengjing%2F1324784233343.JPG&refer=http%3A%2F%2Fimage.wangchao.net.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630845074&t=a7b2411358730381dcd328ac8ba77160")

        //将网络图片转为本地drawable,并将drawable放入list中
        //由于转换过程不能在主线程中，所以我这里开一个协程来加载数据
        CoroutineScope(Dispatchers.IO).launch{
            for (imageUrl in imageUrlOneList){
                val drawable = loadImageFromNetwork(imageUrl)
                Log.d(TAG,"imageUrl===>${imageUrl}")
                if (drawable != null){
                    Log.d(TAG,"imageUrl=11==>${imageUrl}")
                    imageUrlDrawableList.add(drawable)
                }

                withContext(Dispatchers.Main){
                    isImageLoadingFinish = true
                }
            }
        }

        //定时器刷新图片，这里由于ui操作不能在这里面做，所以用eventbus来更新视图
        val timer = Timer()
        timer.scheduleAtFixedRate(object : TimerTask() {
            override fun run() {
//                        println("Time's up!")
                //图片数据加载完成在展示
                if (isImageLoadingFinish){
                    EventBus.getDefault().postSticky(TIMER_ALARM)
                }
            }
        }, 0, 1000)
    }

    @Subscribe(threadMode = ThreadMode.MAIN)
    fun messageRespond(event: String) {
        when (event) {
            TIMER_ALARM -> {
                Log.d(TAG,"drawable.size ===> ${imageUrlDrawableList.size}")
                if (!imageUrlOneList.isNullOrEmpty()){
                    //判断是不是显示到最后一张了，到最后一张的话就定位到第一张继续展示
                    if (currentPosition == imageUrlOneList.size - 1){
                        currentPosition = 0
                    }else{
                        currentPosition++
                    }
                    //第一种加载方式，直接加载url
                    Glide.with(binding.imageTest1).load(imageUrlOneList[currentPosition]).into(binding.imageTest1)

                    //第二种用加载方式，用drawable加载
                    if (currentPosition > 0){
                        //获取上一张图，用来当占位图，这样如果图片还没有加载出来就是显示占位图
                        val oldDrawable = imageUrlDrawableList[currentPosition - 1]
                        Glide.with(binding.imageTest2).load(imageUrlDrawableList[currentPosition]).placeholder(oldDrawable).into(binding.imageTest2)
                    }else{
                        val oldDrawable = imageUrlDrawableList.last()
                        Glide.with(binding.imageTest2).load(imageUrlDrawableList[currentPosition]).placeholder(oldDrawable).into(binding.imageTest2)
                    }
                }
            }
        }
    }

    //网络图片转成drawable
    private fun loadImageFromNetwork(imageUrl: String): Drawable? {
        var drawable: Drawable? = null
        try {
            // 可以在这里通过文件名来判断，是否本地有此图片
            drawable = Drawable.createFromStream(
                URL(imageUrl).openStream(), "image.jpg"
            )
        } catch (e: IOException) {
            Log.d(TAG,"${e.message}")
        }
        if (drawable == null) {
            Log.d(TAG,"null drawable")
        } else {
            Log.d(TAG,"not null drawable")
        }
        return drawable
    }
}

3.活动界面activity_image_url.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ImageUrlActivity">

    <ImageView
        android:id="@+id/image_test1"
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:scaleType="centerCrop"
        android:visibility="gone"
        app:layout_constraintTop_toBottomOf="@id/button_change"
        android:background="@color/black"/>

    <ImageView
        android:id="@+id/image_test2"
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:layout_marginTop="20dp"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toBottomOf="@id/image_test1"
        android:background="@color/black"/>

    <Button
        android:id="@+id/button_change"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="切换视图"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

4.成果展示

1.出现黑屏的展示
请添加图片描述
2.连贯图片展示

weixin_41650019

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多张网络图片像视频一样连贯播放

使用Glide连贯展示多张网络图片1.目标：每一秒更换一张图片，使得像视频播放一样2.实现1.将获取到的图片url放入list中 //网络图片集合,放在外边的全局变量 private val imageUrlOneList = mutableListOf<String>() //网络图片对应的drawable集合，放在外边的全局变量 private val imageUrlDrawableList = mutableLis
复制链接

扫一扫