一个简单的时间线控件,采用RecyclerView实现,无任何三方依赖库,一个纯净的库。主要特性:
- 可定制timeline的icon图标,每个图标可以通过list作为参数传入
- 可定制item布局,每个item中的view都可通过anchor注解来设置不同的style
- 支持时间线的前景色和后景色,采用src_in方式覆盖
- 时间线进度可随意控制,可以实现10%,15%,96%等进度
- 采用编译期注解,在运行期未使用反射
- 支持四种时间线位置,item大小不同时会自动进行位置对齐。比如时间线在上方,所有的item会自动顶部对齐。
- 支持三种时间线模式
看两张效果图,仿淘宝退款,和一个不太标准的仿慕课:
0.2.4更新:
新增可以控制icon大小的属性:
app:timeLineIconHeight="30dp"
app:timeLineIconWidth="30dp"
新增样式
app:strokeType="midEndPoint"
如图:
未设置该大小时会自动设置成为timePadding的三分之二;当其中一个设置另一个未设置时, 未设置的值会自动设置成为已设置的值。
可以设置dividerNum为浮点型,会自动调整进度,这种形式在noEndPoint模式下工作最好。
implementation 'com.rangaofei:sakatimeline:0.2.4'
annotationProcessor 'com.rangaofei:JavaTimeLine:0.2.4'
然后修改app级别的module的build.gradle 文件:
android {
defaultConfig {
//省略代码
javaCompileOptions{
annotationProcessorOptions.includeCompileClasspath=true
}
}
}
假如没出现问题的话就集成成功了
StepView基于注解
StepView内部使用apt处理注解实现了adapter,adapter包含两种布局,key和value。目前推出的只需要使用value布局即可。
首先要定义一个model,这个model要编写一些注解
@TimeLine(valueLayoutId = "R.layout.item_value")
public class StepViewModel {
@TimeLineTextView(key = false, value = "R.id.value")
public String text;
public StepViewModel(String text) {
this.text = text;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
注意,每个变量必须采用public修饰,否则获取不到变量的值(其实是目前我没有做任何getter和setter方法)
然后先build一次,在需要使用model的时候要写入
private AbstractTimeLineAdapter adapter;
private List<StepViewModel> stepViewModels = new ArrayList<>();
系统会自动生成一个StepViewModelViewAdapter文件,这个adapter需要传入一个list作为数据源, 这个list中的item类型必须设置为被标注为TimeLine的类。
stepViewModels.add(new StepViewModel("快递发出"));
stepViewModels.add(new StepViewModel("快递签收"));
stepViewModels.add(new StepViewModel("快递丢失"));
adapter = new StepViewModelAdapter(stepViewModels);
binding.tlv.setTimeLineConfig(adapter, TimeLineType.StepViewType.RIGHT_STEP_PROGRESS);
这样我们就完成了基本设置。 运行可以看到效果图:
## 为item设置不同的样式注意:目前只支持textview的部分属性的不同样式设置,支持imageview的src显示。
同样是前边的类,稍微修改一下:
@TimeLine(valueLayoutId = "R.layout.item_value")
public class StepViewModel {
@TimeLineTextView(key = false, id = "R.id.value", style = "R.style.StepView1", styleAnchor = "R.style.StepView2")
public String text;
@TimeLineAnchor({"R.id.value"})
public boolean right;
public StepViewModel(String text, boolean right) {
this.text = text;
this.right = right;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
我们为TimeLineTextView加上了style和styleAnchor的值,这两个值是自己定义的style样式,这些样式只包含部分attr
<attr name="android:textSize"/>
<attr name="android:textColor"/>
<attr name="android:textColorHint"/>
<attr name="android:textColorLink"/>
<attr name="android:textStyle"/>
<attr name="android:typeface"/>
<attr name="android:fontFamily"/>
<attr name="android:shadowColor"/>
<attr name="android:shadowDy"/>
<attr name="android:shadowDx"/>
<attr name="android:shadowRadius"/>
下面是示例中定义的两个style:
<style name="StepView1" parent="AppTheme">
<item name="android:textSize">14sp</item>
<item name="android:textColor">@color/white</item>
</style>
<style name="StepView2" parent="AppTheme">
<item name="android:textSize">20sp</item>
<item name="android:textColor">@color/black</item>
<item name="backgroundProxy">@color/white</item>
</style>
修改主界面代码:
stepViewModels.add(new StepViewModel("快递发出\n我没收到", false));
stepViewModels.add(new StepViewModel("快递签收我收到了", false));
stepViewModels.add(new StepViewModel("快递丢失", true));
可以看到第三个item设置为true了,那么StepViewModel中的@TextView注解中的styleAnchor将会生效, 其他未设置为true的item生效的将会是@TextView注解中的style。
背景可以是任意的drawable和color,设置背景使用了动态代理。
首先要定义一个List<Drawable> list
,这个drawable中添加要替换index位置的drawable。
要注意添加的顺序,将会与step的顺序一致,假如传入null,则会绘制原有的圆圈。 假如添加的drawable数量少于index位置的数量,则会循环利用
list = new ArrayList<>();
list.add(getResources().getDrawable(R.drawable.ic_order));
list.add(null);
((TimeLineView) findViewById(R.id.one)).
setTimeLineConfig(adapter, TimeLineType.StepViewType.BOTTOM_STEP_PROGRESS, 1, list);
((TimeLineView) findViewById(R.id.two)).
setTimeLineConfig(adapter, TimeLineType.StepViewType.TOP_STEP_PROGRESS, 1);
((TimeLineView) findViewById(R.id.three)).
setTimeLineConfig(adapter, TimeLineType.StepViewType.LEFT_STEP_PROGRESS, 3, list);
((TimeLineView) findViewById(R.id.four)).
setTimeLineConfig(adapter, TimeLineType.StepViewType.RIGHT_STEP_PROGRESS, 3);
为1和3添加了自定义drawable,看一下效果图
用于标记类,被标记的类将作为model使用
-
name 不为空的时候生成的adapter名称为name,为空的时候生成的adapter名称为model的name加"Adapter"
-
keyLayoutId 用来设置KeyViewHolder的布局文件,必须是string类型,例如:"R.layout.item_key",
-
valueLayoutId 用来设置ValueViewHolder的布局文件,必须是string类型,例如:"R.layout.item_value"
这里的id必须和下文中将要介绍的TimeLineTextView和TimeLineImageView中的key对应,key为true,则必须对应keyLayoutId, key为false,则必须对应valueLayoutId。
//初始化TimeLine的配置
void setTimeLineConfig(AbstractTimeLineAdapter adapter, TimeLineType type)
TimeLineType的类型:
enum StepViewType implements TimeLineType {
LEFT_STEP_PROGRESS,//左侧显示当前的步骤,右侧显示内容
RIGHT_STEP_PROGRESS,//右侧显示当前的步骤,左侧显示内容
TOP_STEP_PROGRESS,//上侧显示当前的步骤,下侧显示内容
BOTTOM_STEP_PROGRESS,//下侧显示当前的步骤,上侧显示内容
}
//升级当前分隔点,默认使用动画,可以通过设置showAnim来设置
public void updateDividerNum(int dividerNum)
public void updateDividerNum(int dividerNum, boolean showAnim)
空白位置的大小,也就是用来显示时间轴的宽度(纵向)或者高度(横向) 设置后,自定义时间轴指示器drawable的默认宽和高均为此值的2/3; 默认的时间轴指示器的半径为此值的1/2.
时间轴的粗细。默认值是10dp。
时间轴的颜色。默认是灰色。
时间轴的类型。有三种:normal,midEndPoint和noEndPoint。如图所示
时间轴的位置,共有四种:left、right、top、bottom
显示序号的颜色
显示序号的字的大小
是否显示序号
设置前景色
设置后景色
设置可见性,visible,invisible,gone,和view的可见性一致
设置背景,和view的background一致
设置可点击,与view的clickable一致
最后,有建议的朋友可以邮箱或者微信: