自定义时间轴
- 可配合 recyclerView 进行使用
- 动态的指点具体的位置
- 高度自定义，根据需求修改 View 即可
- 可设置默认 圆点 的选中，以及修改其位置
效果图如下：
public class LineCircle extends View {
private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Path path = new Path();
/**
* 线的颜色
*/
private int mPathColor = Color.parseColor("#eeeeee");
/**
* 外圆的颜色
*/
private int outerCircleColor = Color.parseColor("#96ccff");
/**
* 内圆的颜色
*/
private int innerCircleColor = Color.parseColor("#2988e2");
/**
* 外圆半径
*/
private int outRadius = Utils.dp2px(5f).intValue();
/**
* 内圆半径
*/
private int inRadius = Utils.dp2px(2.5f).intValue();
/**
* 通过 {@link #add(int)} 添加位置的圆的半径
*/
private int listRadius = Utils.dp2px(2.5f).intValue();
/**
* 是否为头部
*/
private boolean mHead = false;
/**
* 是否发为尾部
*/
private boolean mEnd = false;
/**
* 是否选中
*/
private boolean isSelect = false;
//偏移
private int offsetY;
/**
* 默认的圆在高度上的百分比
*/
private float mScale = 0.3f;
/**
* 原点 y 轴位置
*/
private ArrayList<Integer> mList = new ArrayList<>();
public LineCircle(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
int width = getWidth();
// 默认圆的高度
int scaleHeight;
if (offsetY == 0) {
scaleHeight = (int) (getHeight() * mScale);
} else {
scaleHeight = offsetY;
}
int center = width / 2;
paint.setColor(mPathColor);
paint.setStrokeWidth(Utils.dp2px(1f));
path.moveTo(width / 2, 50);
path.lineTo(width / 2, getHeight());
//画线
if (mHead) {
canvas.drawLine(center, scaleHeight, center, getHeight(), paint);
} else if (mEnd) {
if (mList.size() > 0 && mList.get(mList.size() - 1) > scaleHeight) {
canvas.drawLine(center, 0, center, mList.get(mList.size() - 1), paint);
} else {
canvas.drawLine(center, 0, center, scaleHeight, paint);
}
} else {
canvas.drawLine(center, 0, center, getHeight(), paint);
}
//画圆
if (isSelect) {
paint.setColor(outerCircleColor);
canvas.drawCircle(center, scaleHeight, outRadius, paint);
paint.setColor(innerCircleColor);
canvas.drawCircle(center, scaleHeight, inRadius, paint);
} else {
paint.setColor(mPathColor);
canvas.drawCircle(center, scaleHeight, listRadius, paint);
}
if (mList.size() > 0) {
for (int i = 0; i < mList.size(); i++) {
paint.setColor(mPathColor);
canvas.drawCircle(center, mList.get(i), listRadius, paint);
}
}
}
/**
* 添加别的圆点
* 需传入具体的高度，以像素为单位
* <p>
* 全部添加完成后需调用 {@link #addSave()} ,
* 注意，需按顺序添加，从小往大
* </p>
*
* @param offsetY 偏移
*/
public void add(int offsetY) {
mList.add(offsetY);
}
public void add(List<Integer> offsetY) {
mList.clear();
mList.addAll(offsetY);
}
/**
* 添加完成后执行
*/
public void addSave() {
invalidate();
}
public void clear() {
mList.clear();
}
/**
* 是否为第一个
*/
public void setHead(boolean head) {
this.mHead = head;
invalidate();
}
/**
* 是否为最后一个
*
* @param end
*/
public void setEnd(boolean end) {
this.mEnd = end;
invalidate();
}
/**
* 设置线的颜色
*
* @param color
*/
public void pathColor(int color) {
this.mPathColor = color;
invalidate();
}
/**
* 设置圆高度的百分比
*
* @param mScale
*/
public void setScale(float mScale) {
this.mScale = mScale;
invalidate();
}
/**
* 是否选中默认的圆。
* 高度使用 {@link #setSelect(boolean)} 进行设置
*
* @param isSelect
*/
public void setSelect(boolean isSelect) {
setSelect(isSelect, 0);
}
/**
* 是否选中默认的圆，以及对应的位置
*
* @param isSelect
*/
public void setSelect(boolean isSelect, int offsetY) {
this.isSelect = isSelect;
this.offsetY = offsetY;
invalidate();
}
}
布局如下：
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.fengtong.core.ui.view.LineCircle
android:id="@+id/record_line"
android:layout_width="15dp"
android:layout_height="match_parent"
android:layout_marginStart="18dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="5dp">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/record_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/_666666"
android:textSize="12sp"
tools:ignore="HardcodedText"
tools:text="2020-06-17" />
<androidx.appcompat.widget.LinearLayoutCompat
android:id="@+id/record_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/record_date"
android:orientation="vertical"
android:paddingBottom="20dp">
</androidx.appcompat.widget.LinearLayoutCompat>
</RelativeLayout>
</androidx.appcompat.widget.LinearLayoutCompat>
使用：
1，需要配合 recyclerView 使用。也可单独使用
2，调用 setSelect 方法设置是否选中默认的，以及默认圆的位置，可通过百分比，或者 具体的Y轴值来设置。
3，通过调用 add 方法添加其他的 圆点 ，需要传入Y 轴位置。
下面是在 recyclerView 中使用的：
//当前条目的类型数据
String tag = entity.getField(MultipleFields.TAG);
//当前条目的数据
String date = entity.getField(MultipleFields.DATE);
List<String> list = entity.getField(MultipleFields.LIST);
//拿到条目中对应的控件
AppCompatTextView dateTv = holder.getView(R.id.record_date);
LineCircle line = holder.getView(R.id.record_line);
LinearLayoutCompat layout = holder.getView(R.id.record_layout);
//设置值
dateTv.setText(date);
//添加dateTv 初始化完成的监听
dateTv.getViewTreeObserver().addOnGlobalLayoutListener(() -> {
// 计算dateTv 的位置
int offsetY = dateTv.getTop() + (dateTv.getHeight() / 2);
//设置默认圆的位置，以及选中。也可单独设置选中，通过 setScale 设置百分比，从 0 到 1
line.setSelect(true, offsetY);
});
//判断条目是否为 第一个 或者最后一个
if (tag.equals("head")) {
line.setHead(true);
} else if (tag.equals("end")) {
line.setEnd(true);
}
//遍历数据，动态的创建 View 并进行添加的指定的 layout 中。
//然后计算 view 的位置，通过 add 方法进行设置。
//最后需调用 addSave
for (int i = 0; i < list.size(); i++) {
AppCompatTextView textView = (AppCompatTextView) LayoutInflater.from(holder.itemView.getContext())
.inflate(R.layout.layout_record_text, layout, false);
textView.setText(list.get(i));
layout.addView(textView);
textView.getViewTreeObserver().addOnGlobalLayoutListener(() -> {
//拿到中心点
int top = textView.getTop() + layout.getTop() + (textView.getHeight() / 2);
//绘制圆点
line.add(top);
});
line.addSave();
}
