Kotlin超简单实现StepView

TimeLineStepView

支持时间轴和StepView,三种布局,支持水平布局,垂直布局和自定义布局,截图如下

添加依赖

implementation 'com.joketng:TimeLineStepView:1.0.1'

使用方法

  • 在布局文件中添加TimeLineStepView
<com.joketng.timelinestepview.view.TimeLineStepView
        android:id="@+id/rvVertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:lineWidth="3dp"
        app:markSize="10dp"
        android:paddingStart="20dp"
        app:markStart="@drawable/shape_circle_orange"
        app:layoutType="right" />
  • 在代码中调用
//OrientationShowType对应三种布局方式
//OrientationShowType.TIMELINE(时间轴方式)
//OrientationShowType.CENTER_VERTICAL(垂直方式)
//OrientationShowType.CENTER_HORIZONTAL(水平方式,支持左右滑动)
rvVertical.initData(listContent, OrientationShowType.CENTER_VERTICAL,
                object : TimeLineStepView.OnInitDataCallBack{
                    override fun onBindDataViewHolder(holder: TimeLineStepAdapter.CustomViewHolder, position: Int) {

                    }

                    override fun createCustomView(leftLayout: ViewGroup, rightLayout: ViewGroup, holder: TimeLineStepAdapter.CustomViewHolder) {
                         //LayoutInflater.from(context).inflate(R.layout.item_add_left_view, leftLayout, true)
                         //LayoutInflater.from(context).inflate(R.layout.item_add_right_view, rightLayout, true)
                    }

                })
                .setLayoutType(type)//设置布局显示的样式左边:LayoutType.LEFT,右边:LayoutType.RIGHT,左右:LayoutType.ALL
                //设置stepview进度激活的mark图标
                .setMarkActive(ContextCompat.getDrawable(context,R.drawable.shape_dot_orange)!!)
                //设置stepview进度没激活的mark图标
                .setMarkInActive(ContextCompat.getDrawable(context,R.drawable.shape_dot_gray)!!)
                //设置stepview当前进度点的mark图标
                .setMarkCurrent(ContextCompat.getDrawable(context,R.drawable.shape_current)!!)
                //设置stepview第一个mark的图标
                .setMarkStart(ContextCompat.getDrawable(context,R.drawable.shape_circle_orange)!!)
                //设置stepview最后一个mark的图标
                .setMarkEnd(ContextCompat.getDrawable(context,R.drawable.shape_circle_orange)!!)
                //设置stepview线的宽度
                .setLineWidth(context.dipc(2))
                //设置stepview进度激活时线的颜色
                .setLineActiveColor(ContextCompat.getColor(context,R.color.c_main_orange))
                //设置stepview进度没有激活时线的颜色
                .setLineInActiveColor(ContextCompat.getColor(context,R.color.c_main_gray))
                //设置是否需要自定义布局(此时将createCustomView中的注释打开将自定义布局传入)
                .setIsCustom(true)

listContent的取值为 mutableListOf(),当存在自定义布局的时候,listContent中添加的实体需要继承BaseBean这个实体,如果不需要自定义布局,可以直接添加实体BaseBean

        listContent.add(BaseBean(leftTitle = "11-11", leftTime = "08:30", rightTitle = "订单提交成功", rightTime = "订单提交成功描述", timeLineState = TimeLineState.ACTIVE))
        listContent.add(BaseBean(leftTitle = "11-11", leftTime = "08:31", rightTitle = "订单付款成功", rightTime = "订单付款成功描述", timeLineState = TimeLineState.ACTIVE))
        listContent.add(BaseBean(leftTitle = "11-11", leftTime = "10:00", rightTitle = "仓库已经接单", rightTime = "仓库已经接单描述", timeLineState = TimeLineState.ACTIVE))
        listContent.add(BaseBean(leftTitle = "11-11", leftTime = "10:30", rightTitle = "仓库处理中", rightTime = "仓库处理中描述", timeLineState = TimeLineState.ACTIVE))
        listContent.add(BaseBean(leftTitle = "11-11", leftTime = "11:00", rightTitle = "已出库", rightTime = "已出库描述", timeLineState = TimeLineState.ACTIVE))
        listContent.add(BaseBean(leftTitle = "11-11", leftTime = "11:30", rightTitle = "已发货", rightTime = "已发货描述", timeLineState = TimeLineState.CURRENT))
        listContent.add(BaseBean(leftTitle = "11-11", leftTime = "16:00", rightTitle = "已揽件", rightTime = "已揽件描述", timeLineState = TimeLineState.INACTIVE))
        listContent.add(BaseBean(leftTitle = "11-11", leftTime = "16:30", rightTitle = "运输中", rightTime = "运输中描述", timeLineState = TimeLineState.INACTIVE))

BaseBean的五个参数前四个为控件的文本,前四个参数不传的话该控件就不会显示,最后一个TimeLineState对应进度的三种状态TimeLineState.ACTIVE,TimeLineState.INACTIVE,TimeLineState.CURRENT,根据状态在onBindDataViewHolder方法中设置markdrawable,linecolor等,在设置markSize的时候,如果大小超过30dp,需要在createCustomView方法或者onBindDataViewHolder方法中调用holder.llLine.layoutParams.width设置为大于等于markSize的大小或者设置为WrapContent,如下

holder.llLine.layoutParams.width = context.dip(35)
holder.llLine.layoutParams.width = LinearLayout.LayoutParams.WRAP_CONTENT

对于布局的显示位置有要求的话可以在createCustomView方法中通过layoutParams来控制

val rightLayoutParams = rightLayout.layoutParams as LinearLayout.LayoutParams
rightLayoutParams.rightMargin = context.dip(30)

如果不喜欢在代码中设置控件属性的话可以选择布局文件中增加属性

   <com.joketng.timelinestepview.view.TimeLineStepView
          android:id="@+id/rvVertical"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:paddingStart="20dp"
          app:markSize="10dp"
          app:markStart="@drawable/shape_circle_orange"
          app:markEnd="@drawable/shape_circle_orange"
          app:markActive="@drawable/shape_dot_orange"
          app:markInActive="@drawable/shape_dot_gray"
          app:markCurrent="@drawable/shape_circle_orange"
          app:lineWidth="3dp"
          app:lineActiveColor="@color/c_main_orange"
          app:lineInActiveColor="@color/c_main_gray"
          app:isCustom="false"
          app:layoutType="right"
          />

如果需要可以在onBindDataViewHolder方法中通过holder获取控件改变控件的样式,如果想要添加自定义的UI,可以在createCustomView方法中添加自己定义的布局文件,此时调用setIsCustom(true)即可

   rvVertical.initData(listContent, OrientationShowType.CENTER_VERTICAL,
                   object : TimeLineStepView.OnInitDataCallBack{
                       override fun onBindDataViewHolder(holder: TimeLineStepAdapter.CustomViewHolder, position: Int) {
                           holder.tvRightTitle.setTextColor(ContextCompat.getColor(context, R.color.c_main_black))
                           holder.tvLeftTitle.setTextColor(ContextCompat.getColor(context, R.color.c_main_black))
                           holder.tvRightTime.textSize = 12f
                           holder.tvLeftTime.textSize = 12f
                           holder.tvRightTime.setTextColor(ContextCompat.getColor(context, R.color.c_main_gray))
                           holder.tvLeftTime.setTextColor(ContextCompat.getColor(context, R.color.c_main_gray))
                       }

                       override fun createCustomView(leftLayout: ViewGroup, rightLayout: ViewGroup, holder: TimeLineStepAdapter.CustomViewHolder) {
                            LayoutInflater.from(context).inflate(布局id, leftLayout, true)//添加左边自定义布局
                            LayoutInflater.from(context).inflate(布局id, rightLayout, true)//添加右边自定义布局

                       }

                   }).setLayoutType(type).setIsCustom(true)

自定义布局的一个截图如下

github地址:https://github.com/joketng/TimeLineStepView 也可点击阅读原文获取连接

使用Maven

<dependency>
  <groupId>com.joketng</groupId>
  <artifactId>TimeLineStepView</artifactId>
  <version>1.0.1</version>
  <type>pom</type>
</dependency>

原文发布于微信公众号 - Android机动车(JsAndroidClub)

原文发表时间:2018-11-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android知识点总结

O2-开源框架使用之Picasso

15140
来自专栏Android 技术栈

性能优化之布局优化记录

做开发时间长了之后,收集后台的bug,发现很多都是OOM(Out Of Memory Killer)。性能优化这时候成为了重点,下面是自己项目中布局优化的记录,...

8220
来自专栏技术专栏

java thumbnailator 做图片处理

26910
来自专栏Nian糕的私人厨房

CSS 鼠标悬停图片,显示隐藏文本

我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果...

19640
来自专栏非典型技术宅

iOS之分段控制器UISegmentedControl1. 分段控制器(UISegmentedControl)2. 事件监听3. 手势事件大全

13620
来自专栏james大数据架构

android 中resources管理

主要存在于res/value文件夹中 定义: dimen.xml:主要用于设置像素默认值 <resources> res/values/dimens.xml...

23280
来自专栏非著名程序员

教你如何用 RecyclerView 做一个好用的轮播图

引子 一般情况下,我们手机 App 上轮播图一般都是几张图来回循环,最多也就10几张,一般都是在10张以内的轮播。所以我们一般可能都是自己写,还有可能用到了别人...

26550
来自专栏非典型技术宅

断言和分段控制器1. 断言(Assertions)2. 分段控制器(UISegmentedControl)

9930
来自专栏编程坑太多

RN组件库-别考虑了关注收藏吧

35740
来自专栏非著名程序员

AndroidTShare Weekly No.10

本周热点开源项目 SpinMenu 转动轮盘样式的Fragment切换效果,非常漂亮。 效果图如下: ? 作者:Hitomi 项目开源地址:https://gi...

218100

扫码关注云+社区

领取腾讯云代金券