仿联系人列表页的轮子

作者: 坑吭吭 | 来源:发表于2018-06-22 17:16 被阅读85次

    GroupingViewSample

    制作类似联系人页面所需要的Slider,还有用来给recyclerview进行分组的ItemDecoration,我觉得最实用的地方是可以用xml来画对应部分的布局,而不是用cavas

    最基本的效果图,效果图比较low

    深度截图_选择区域_20180622172445.png

    链接地址:

    https://github.com/nelson1110/GroupingViewSample

    1. SliderView

    简介:这是一个列表view,继承自Linearlayout,可实现水平或垂直布局,主要作用是当手指划过或点击某个里面的item的时候会有相应的回调

    interface ItemListener {
            //只要是摸到了或者划过了这个某个item就会触发,返回对应的item和对应的数据
            fun onTouch(item: View, data: Any?){}
            
            fun onUp(item: View, data: Any?){}
    
            fun onClick(item: View, data: Any?){}
    
            fun onLongClick(item: View, data: Any?){}
    
        }
    

    用法:

    • 首先在xml中添加SliderView
    <com.libs.nelson.groupingview.SliderView
            android:background="@color/colorPrimary"
            android:id="@+id/slider"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            />
    
    • 然后在代码中给Slider绑定对应的Adapter
    slider.setAdapter(object : SliderView.SliderAdapter(){
    
                override fun getItemDataList(): List<Any> {
                   return listOf("a","b","c","d","e","f","g","h","i")
                }
    
                override fun onBindItem(item: View, data: Any) {
                    item.findViewById<TextView>(R.id.item).text = data.toString()
                }
    
            })
    

    如果没有特殊需求,默认会提供一个item的布局,大概长这样

    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="test"
        android:textSize="20sp">
    </TextView>
    

    如果不喜欢也可以自定义,只需要重写Adapter中的getItemLayout(): Int{}方法,例如:

    override fun getItemLayout(): Int{
                return R.layout.item_slider_default
            }
    
    • 最后就是设置监听事件,需要监听啥就重写啥就好了
    slider.setItemListener(object : SliderView.ItemListener{
    
                override fun onTouch(item: View, data: Any?) {
                    Toast.makeText(this@MainActivity,data.toString(),Toast.LENGTH_SHORT).show()
                }
    
            })
    

    2. GroupDecoration

    简介:可以自己控制列表的分组规则和分组标题的样式,而且可以用xml绘制分组标题
    用法:

    • 像所有其他的ItemDecoration一样,add到recyclerview上就可以了,主要需要实现下面几个方法
        //判断当前position的数据是否是一个组的第一个,也就是需要加分组item的position
        abstract fun checkItemIsFirstOfGroup(position: Int): Boolean
        //返回分组标题的布局,例如:return R.layout.xxx
        abstract fun getGroupViewLayout(position: Int): Int
        //给分组标题绑定数据,groupView为这个需要绘制的view,position是当前组第一个item的位置
        abstract fun onBindGroupView(groupView: View,position: Int)
    

    相关文章

      网友评论

        本文标题:仿联系人列表页的轮子

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