美文网首页
Android之MaterialDesign使用(二)—— Re

Android之MaterialDesign使用(二)—— Re

作者: 乌托邦式的爱情 | 来源:发表于2021-08-17 16:30 被阅读0次

    RecyclerView是Material Design里面非常重要的一个控件,这也是我想单独把它拿出来的原因,记得刚开始工作的时候,还是使用的ListView,但是自从Google 推出了RecyclerView之后,很多小伙伴就开始抛弃ListView转而投入到RecyclerView的怀抱了,那么,RecyclerView到底好在哪里?相比较ListView它又有哪些亮点呢?

    RecyclerView与ListView对比
    (1)布局效果对比:Android 默认提供的 RecyclerView 就能支持 线性布局、网格布局、瀑布流布局 三种,而且同时还能够控制横向还是纵向滚动,而ListView仅仅只能支持线性布局。
    (2)基础使用:RecyclerView 中ViewHolder的编写规范化了,而且所有的复用工作已经在底层全部实现,并不再需要人为通过代码去实现了。
    (3)空数据处理:ListView 提供了 setEmptyView 这个 API 来让我们处理 Adapter 中数据为空的情况,只需轻轻一 set 就能搞定一切。而RecyclerView 并没有提供,需要自己手动去实现。
    (4)添加头部和尾部:ListView自动提供了添加头部和底部的API,而RecyclerView 并没有这个支持,需要自己手动去实现。
    (5)局部刷新:ListView 并没有提供局部刷新刷新某个 Item 的 API 给我们,只提供了全局刷新notifyDataSetChanged(),但是RecyclerView 不仅支持全局刷新,也支持局部刷新。
    (6)动画效果:RecyclerView 在做局部刷新的时候有一个渐变的动画效果,而ListView 需要自己去实现。
    (7)监听事件:ListView 为我们准备了几个专门用于监听 Item 的回调接口,如单击、长按、选中某个 Item 等,而RecyclerView 系统并没有提供这样的支持,需要我们自己去手动实现。
    (8)嵌套滚动:RecyclerView 配合NestedScrollView可以实现嵌套滚动,但是使用ListView则无法实现。

    上面这样看太累了,用表格来整理一下:

    RecyclerView ListView
    布局效果对比 支持 线性布局、网格布局、瀑布流布局 三种 支持线性布局
    基础使用 ViewHolder编写规范化 需要手动去处理
    空数据处理 自己手动去实现 提供了 setEmptyView
    添加头部和尾部 自己手动去实现 提供了添加头部和底部的API
    局部刷新 提供了API 自己手动去实现
    动画效果 局部刷新的时候有一个渐变的动画效果 自己手动去实现
    监听事件 自己手动去实现 准备了几个专门用于监听 Item 的回调接口,如单击、长按、选中某个 Item 等
    嵌套滚动 RecyclerView 配合NestedScrollView可以实现嵌套滚动 无法实现这种效果

    关于RecyclerView 和ListView的对比就到这里,因为这不是这次的重点,下面我们开始进入正题。

    RecyclerView的使用
    先来看一下效果


    recyclerView.gif

    1.编写布局文件

    <LinearLayout 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"
        android:orientation="vertical"
        tools:context=".recyclerview.RecyclerViewActivity">
    
        <LinearLayout
            android:id="@+id/choose"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent">
    
            <Button
                android:id="@+id/linear_recycler_view"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="线性布局" />
    
            <Button
                android:id="@+id/grid_recycler_view"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="网格布局" />
    
            <Button
                android:id="@+id/staggered_recycler_view"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="瀑布流布局" />
    
            <Button
                android:id="@+id/multiple_recycler_view"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="多视图布局" />
        </LinearLayout>
    
    
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/choose" />
    
    
    </LinearLayout>
    

    2.编写适配器

    /**
     * author: zhoufan
     * data: 2021/8/17 13:43
     * content: RecyclerView的适配器
     */
    class RecyclerViewAdapter : RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder>() {
    
        companion object {
            const val SPECIAL = 1
            const val NORMAL = 2
        }
    
    
        private var useList: MutableList<User> = arrayListOf()
    
        fun setUserList(list: MutableList<User>) {
            if (list.size > 0) {
                useList.addAll(list)
            }
        }
    
        /**
         * 处理多布局的情况
         */
        override fun getItemViewType(position: Int): Int {
            if (useList[position].userName.contains("明")) {
                return SPECIAL
            }
            return NORMAL
        }
    
        inner class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
            var recyclerImageView: ImageView = itemView.findViewById(R.id.adapter_recycler_view_image)
            var recyclerName: TextView = itemView.findViewById(R.id.adapter_recycler_view_name)
            var recyclerContent: TextView = itemView.findViewById(R.id.adapter_recycler_view_content)
        }
    
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
            var view: View? = null
            if (viewType == SPECIAL) {
                view = LayoutInflater.from(parent.context)
                    .inflate(R.layout.adapter_recycler_view, parent, false)
            }else {
                view = LayoutInflater.from(parent.context)
                    .inflate(R.layout.adapter_recycler_view_two, parent, false)
            }
            return MyViewHolder(view!!)
        }
    
        override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
            Glide.with(holder.itemView.context).load(useList[position].userImageUrl)
                .into(holder.recyclerImageView)
            holder.recyclerName.text = useList[position].userName
            holder.recyclerContent.text = useList[position].userInfo
        }
    
        override fun getItemCount() = useList.size
    }
    

    3.通过代码实现所有效果

    class RecyclerViewActivity : AppCompatActivity() {
    
        private var useList: MutableList<User> = arrayListOf()
        private var adapter: RecyclerViewAdapter? = null
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_recycler_view)
            initUserInfo()
            initRecyclerView()
            initEvent()
        }
    
        private fun initEvent() {
            // 切换到线性布局
            linear_recycler_view.setOnClickListener {
                recycler_view.layoutManager = LinearLayoutManager(this)
                runLayoutAnimation(recycler_view)
            }
            // 切换到网格布局
            grid_recycler_view.setOnClickListener {
                recycler_view.layoutManager = GridLayoutManager(this, 3)
                runLayoutAnimation(recycler_view)
            }
            // 切换到瀑布流布局
            staggered_recycler_view.setOnClickListener {
                recycler_view.layoutManager = StaggeredGridLayoutManager(
                    2,
                    StaggeredGridLayoutManager.VERTICAL
                )
                runLayoutAnimation(recycler_view)
            }
        }
    
        private fun initRecyclerView() {
            recycler_view.layoutManager = LinearLayoutManager(this)
            adapter = RecyclerViewAdapter()
            recycler_view.adapter = adapter
            adapter!!.setUserList(useList)
        }
    
        private fun initUserInfo() {
            val userJackie = User(
                "成龙",
                "中国影视男演员 [1]  、导演、制作人、编剧、歌手 [2]  ,国家一级演员。",
                "https://bkimg.cdn.bcebos.com/pic/2f738bd4b31c87016b20bd8e287f9e2f0608ffc0?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5/format,f_auto"
            )
            val userJet = User(
                "李连杰",
                "华语影视男演员、导演、制作人、武术运动员、商人。",
                "https://bkimg.cdn.bcebos.com/pic/a044ad345982b2b78cb4089e3eadcbef76099b44?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5/format,f_auto"
            )
            val userChow = User(
                "周润发",
                "华语影视男演员、摄影家,国家一级演员。",
                "https://bkimg.cdn.bcebos.com/pic/d31b0ef41bd5ad6e8d802d198bcb39dbb7fd3cc3?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto"
            )
            val userLeon = User(
                "黎明",
                "中国香港男歌手、演员、导演。",
                "https://bkimg.cdn.bcebos.com/pic/7dd98d1001e93901b24f585472ec54e736d1960f?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5/format,f_auto"
            )
            val userAaron = User(
                "郭富城",
                "华语影视男演员、歌手、舞者。",
                "https://bkimg.cdn.bcebos.com/pic/adaf2edda3cc7cd98d10ad8d8d49363fb80e7bec3b04?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyMjA=,g_7,xp_5,yp_5/format,f_auto"
            )
            val userRichie = User(
                "任贤齐",
                "华语流行乐男歌手、影视演员、词曲创作人、导演、赛车手。",
                "https://bkimg.cdn.bcebos.com/pic/faedab64034f78f0915e29c973310a55b3191cb6?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto"
            )
            val userChen = User(
                "陈道明",
                "中国影视男演员、国家一级演员",
                "https://bkimg.cdn.bcebos.com/pic/9f2f070828381f30520de8c2a6014c086e06f041?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto"
            )
            val userAndy = User(
                "刘德华",
                "华语影视男演员、歌手、制片人、作词人",
                "https://bkimg.cdn.bcebos.com/pic/a08b87d6277f9e2f07089a9d537bfe24b899a9015558?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto"
            )
            val userG = User(
                "古天乐",
                "华语影视男演员、歌手 [1]  ,香港演艺人协会会长",
                "https://bkimg.cdn.bcebos.com/pic/622762d0f703918fa0ec47229771319759ee3c6d6e8c?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto"
            )
            val userNick = User(
                "张家辉",
                "华语影视男演员、导演",
                "https://bkimg.cdn.bcebos.com/pic/d53f8794a4c27d1ed21b5bf67f9bba6eddc451da92f9?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5/format,f_auto"
            )
            for (i in 0..2) {
                useList.add(userJackie)
                useList.add(userJet)
                useList.add(userChow)
                useList.add(userLeon)
                useList.add(userAaron)
                useList.add(userRichie)
                useList.add(userChen)
                useList.add(userAndy)
                useList.add(userG)
                useList.add(userNick)
            }
        }
    
        /**
         * 刷新数据时候的动画效果
         */
        private fun runLayoutAnimation(recyclerView: RecyclerView) {
            val context: Context = recyclerView.context
            val controller: LayoutAnimationController =
                AnimationUtils.loadLayoutAnimation(context, R.anim.layout_animation_from_bottom)
            recyclerView.layoutAnimation = controller
            recyclerView.adapter!!.notifyDataSetChanged()
            recyclerView.scheduleLayoutAnimation()
        }
    }
    

    相关文章

      网友评论

          本文标题:Android之MaterialDesign使用(二)—— Re

          本文链接:https://www.haomeiwen.com/subject/xxdibltx.html