Android Glide照片宫格RecyclerView，点击SharedElement共享元素动画查看大图，Kotlin（1）

淩亂°似流年 2024-02-20 13:12 20阅读 0赞

### Android Glide照片宫格RecyclerView，点击SharedElement共享元素动画查看大图，Kotlin（1） ###

###  ###

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

plugins {
        id 'org.jetbrains.kotlin.kapt'
    }   
     
    
    implementation 'com.github.bumptech.glide:glide:4.16.0'
    kapt 'com.github.bumptech.glide:compiler:4.16.0'

import android.content.Context
    import android.content.Intent
    import android.os.Bundle
    import android.provider.MediaStore
    import android.view.LayoutInflater
    import android.view.View
    import android.view.View.OnClickListener
    import android.view.ViewGroup
    import android.widget.ImageView
    import android.widget.TextView
    import androidx.appcompat.app.AppCompatActivity
    import androidx.core.app.ActivityOptionsCompat
    import androidx.core.util.Pair
    import androidx.lifecycle.lifecycleScope
    import androidx.recyclerview.widget.GridLayoutManager
    import androidx.recyclerview.widget.RecyclerView
    import kotlinx.coroutines.Dispatchers
    import kotlinx.coroutines.launch
    import kotlinx.coroutines.withContext
    
    const val IMAGE_URI = "image_uri"
    const val SIZE = 200
    
    class MainActivity : AppCompatActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.recyclerview)
    
            val rv = findViewById<RecyclerView>(R.id.recycler_view)
    
            val spanCount = 7
            val layoutManager = GridLayoutManager(this, spanCount)
            layoutManager.orientation = GridLayoutManager.VERTICAL
            rv.layoutManager = layoutManager
    
            val adapter = MyAdapter()
            rv.adapter = adapter
    
            lifecycleScope.launch(Dispatchers.IO) {
                val items = readAllImage(this@MainActivity)
                withContext(Dispatchers.Main) {
                    adapter.dataChanged(items)
                }
            }
        }
    
        fun goToSharedElementAnima(view: ImageView, path: String) {
            val pair: Pair<View, String>? = Pair(view, resources.getString(R.string.shared_element))
    
            val intent = Intent(this, ImageViewActivity::class.java)
            intent.putExtra(IMAGE_URI, path)
    
            val bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(this, pair).toBundle()
            startActivity(intent, bundle)
        }
    
        inner class MyAdapter : RecyclerView.Adapter<MyVH>() {
            private var items = arrayListOf<MyData>()
    
            fun dataChanged(items: ArrayList<MyData>) {
                this.items = items
                notifyDataSetChanged()
            }
    
            override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyVH {
                val view = LayoutInflater.from(parent.context).inflate(R.layout.item, parent, false)
                return MyVH(view)
            }
    
            override fun getItemCount(): Int {
                return items.size
            }
    
            override fun onBindViewHolder(holder: MyVH, position: Int) {
                val uri = items[holder.adapterPosition].path
    
                holder.itemView.setOnClickListener(object : OnClickListener {
                    override fun onClick(v: View?) {
                        goToSharedElementAnima(holder.image, uri)
                    }
                })
    
                GlideApp.with(holder.itemView.context)
                    .load(uri)
                    .centerCrop()
                    .override(SIZE) //注意这个size，在宫格里面显示出来后表示decode完成
                    .into(holder.image)
    
                holder.pos.text = items[position].index.toString()
            }
        }
    
        class MyVH(itemView: View) : RecyclerView.ViewHolder(itemView) {
            val image: ImageView = itemView.findViewById(R.id.image)
            val pos: TextView = itemView.findViewById(R.id.pos)
        }
    
        private fun readAllImage(context: Context): ArrayList<MyData> {
            val photos = ArrayList<MyData>()
    
            //读取所有图片
            val cursor = context.contentResolver.query(
                MediaStore.Images.Media.EXTERNAL_CONTENT_URI, null, null, null, null
            )
    
            var index = 0
            while (cursor!!.moveToNext()) {
                //路径 uri
                val path = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA))
    
                //图片名称
                //val name = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DISPLAY_NAME))
    
                //图片大小
                //val size = cursor.getLong(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.SIZE))
    
                photos.add(MyData(path, index++))
            }
            cursor.close()
    
            return photos
        }
    
        class MyData(var path: String, var index: Int)
    }

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

共享元素动画必须设置相同的transitionName值：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="1dp">
    
        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:transitionName="@string/shared_element" />
    
        <TextView
            android:id="@+id/pos"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textSize="5dp" />
    
        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textSize="10dp" />
    
        <View
            android:layout_width="20dp"
            android:layout_height="1px"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="10dp"
            android:background="@color/cardview_dark_background" />
    </LinearLayout>

import android.os.Bundle
    import android.widget.ImageView
    import androidx.appcompat.app.AppCompatActivity
    
    class ImageViewActivity : AppCompatActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.image)
            val imageView = findViewById<ImageView>(R.id.image)
    
            val uri = intent.getStringExtra(IMAGE_URI)
    
            GlideApp.with(this)
                .load(uri)
                .fitCenter()
                .thumbnail(
                    //一种技巧，规避原始decode耗时造成共享元素动画异常。 thumbnail主要为了加载速度，此处查看大图，原始decode非常耗时，先放一张在上一个页面宫格里面已经decode好的图。
                    GlideApp.with(this)
                        .load(uri)
                        .centerCrop()
                        .override(SIZE)
                )
                .error(android.R.drawable.stat_notify_error)
                .into(imageView)
        }
    }

共享元素动画必须设置相同的transitionName值：

<?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:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:transitionName="@string/shared_element" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>

系统通过transitionName作为识别共享元素动画的要素之一。

<resources>
        <string name="shared_element">my_shared_element</string>
    </resources>

[Android读取设备所有Video视频，Kotlin-CSDN博客文章浏览阅读81次。【Android设置头像，手机拍照或从本地相册选取图片作为头像】像微信、QQ、微博等社交类的APP，通常都有设置头像的功能，设置头像通常有两种方式：1，让用户通过选择本地相册之类的图片库中已有的图像，裁剪后作为头像。Android设置头像，手机拍照或从本地相册选取图片作为头像\_android 头像拍照\_zhangphil的博客-CSDN博客。Android图片添加文字水印并保存水印文字图片到指定文件\_zhangphil的博客-CSDN博客。Android读取设备所有视频，Kotlin。![favicon32.ico][]https://blog.csdn.net/zhangphil/article/details/132173745][Android_Video_Kotlin-CSDN_81_Android_QQ_APP_1_Android_android _zhangphil_-CSDN_Android_zhangphil_-CSDN_Android_Kotlin_favicon32.ico_https_blog.csdn.net_zhangphil_article_details_132173745][Android load all photos into RecyclerView,pinch to zoom by ScaleGestureDetector,kotlin(4)\_zhangphil的博客-CSDN博客文章浏览阅读77次。Android RecyclerView的StaggeredGridLayoutManager实现交错排列的子元素分组先看实现的结果如图：设计背景：现在的产品对设计的需求越来越多样化，如附录文章2是典型的联系人分组RecyclerView，子元素排列到一个相同的组，但是有些时候，UI要求把这些元素不是垂直方向的，而是像本文开头的图中所示样式排列，这就需要用StaggeredGridLayoutMa。在处理大图的浏览查看动作过程中，往往还有其他额外的事情需要处理，典型的以微信。![favicon32.ico][]https://blog.csdn.net/zhangphil/article/details/131296499][Android load all photos into RecyclerView_pinch to zoom by ScaleGestureDetector_kotlin_4_zhangphil_-CSDN_77_Android RecyclerView_StaggeredGridLayoutManager_2_RecyclerView_UI_StaggeredGridLayoutMa_favicon32.ico_https_blog.csdn.net_zhangphil_article_details_131296499]

[favicon32.ico]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/d1598d907a1441b1b54497660eea848b.png
[Android_Video_Kotlin-CSDN_81_Android_QQ_APP_1_Android_android _zhangphil_-CSDN_Android_zhangphil_-CSDN_Android_Kotlin_favicon32.ico_https_blog.csdn.net_zhangphil_article_details_132173745]: https://blog.csdn.net/zhangphil/article/details/132173745
[Android load all photos into RecyclerView_pinch to zoom by ScaleGestureDetector_kotlin_4_zhangphil_-CSDN_77_Android RecyclerView_StaggeredGridLayoutManager_2_RecyclerView_UI_StaggeredGridLayoutMa_favicon32.ico_https_blog.csdn.net_zhangphil_article_details_131296499]: https://blog.csdn.net/zhangphil/article/details/131296499