android 仿淘宝物流时间轴控件

最新推荐文章于 2021-05-26 12:41:42 发布

原创

最新推荐文章于 2021-05-26 12:41:42 发布 · 9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#android #淘宝网 #需求 #物流

本文介绍如何在Android中仿照淘宝物流时间轴，实现一个自定义的控件。基于现有Demo进行修改，适应项目需求。设计图和自定义View的详细方法展示，包括使用画布绘制头结点。左边采用自定义View，右边结合ListView来完成时间轴布局。提供下载链接以供参考和讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

android 仿淘宝物流时间轴控件

在这里感谢一片作者的demo,我在他的基础上做了写修改，改成我们项目所用的样式！还是那句话没有实现不了的需求，只有想不到的。首先看我们项目的设计图。
这里写图片描述

首先看一下别人的自定义时间轴控件，是通过画布的方法自己写的一个view.

`public class TimeLineView extends View {

private Paint mPaint;
/**
 * 第一个节点的外半径
 */
private float timelineHeadRadius;
/**
 * 第一个节点的颜色值
 */
// private int timelineHeadColor;
/**
 * 第二个节点的颜色值
 */
private int timelineOtherColor;
/**
 * 时间线的节点数
 */
private int timelineCount;
/**
 * 时间轴的位置
 */
private int viewWidth;
/**
 * 时间轴到距离顶部的距离
 */
private int marginTop;
/**
 * 时间轴的节点的半径
 */
private int timelineRadius;
/**
 * 时间轴节点之间的距离
 */
private int timelineRadiusDistance;
/**
 * 时间轴的宽度
 */
private int timelineWidth;
/**
 * 时间轴的高度
 */
private float timeLineViewHeight;

/**
 * 自己需求第一个显示的颜色图片
 * */

private Bitmap bitmapHead;

public TimeLineView(Context context) {
    this(context, null);
}

public TimeLineView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public TimeLineView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context, attrs, defStyle);
}

/**
 * 初始化
 *
 * @param context
 * @param attrs
 * @param defStyle
 */
private void init(Context context, AttributeSet attrs, int defStyle) {

    final TypedArray a = getContext().obtainStyledAttributes(attrs,
            R.styleable.TimeLineView, defStyle, 0);
    timelineRadiusDistance = (int) a.getDimension(
            R.styleable.TimeLineView_timelineRadiusDistance,
            convertDIP2PX(context, 20));
    // timelineHeadRadius =
    // a.getDimension(R.styleable.TimeLineView_timelineHeadRadius,
    // convertDIP2PX(context, 10));
    timelineRadius = (int) a.getDimension(
            R.styleable.TimeLineView_timelineRadius,
            convertDIP2PX(context, 5));