自定义view，仿淘宝快递的物流信息的时间轴

最新推荐文章于 2024-04-30 16:46:02 发布
置顶 最新推荐文章于 2024-04-30 16:46:02 发布
阅读量6.4k 收藏 3
点赞数
分类专栏： android自定义view 文章标签： android 淘宝网 物流
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013979330/article/details/47858201
版权

　学了Android有一段时间了，一直没有时间写博客，趁着周末有点空，就把自己做的一些东西写下来． 一方面锻炼一下自己的写文档的能力，另一方面分享代码的同时也希望能与大家交流一下技术，共同学习，共同进步．
　废话不多少说，我们先来看看我们自定义view要实现的效果:
　
　效果图

自定义属性

<resources>
    <declare-styleable name="TimeLineView">
        <attr name="timelineRadius" format="dimension" />
        <attr name="timelineHeadRadius" format="dimension" />
        <attr name="timelineHeadColor" format="color" />
        <attr name="timelineOtherColor" format="color" />
        <attr name="timelineRadiusDistance" format="dimension" />
        <attr name="timelineCount" format="integer" />
        <attr name="timelineMarginTop" format="dimension" />
        <attr name="timelineWidth" format="dimension" />
    </declare-styleable>
</resources>

onDraw方法
关键方法，写了大量的代码注释，希望大家能看明白。

@Override
    protected void onDraw(Canvas canvas) {
        //默认设置时间轴的位置位于view的中间
        viewWidth = getMeasuredWidth() / 2;
        //设置第一个节点的颜色
        mPaint.setColor(timelineHeadColor);
        /**
         * 根据时间轴的节点数目，画对应的节点和轴
         */
        for (int j = 1; j <= timelineCount; j++) {

            /**
             * 当j==1，画第一个节点的时候，有点特殊，我们需要在节点的外面再换一个圆环
             */
            if (j == 1) {
                //画笔设置为空心
                canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineRadius, mPaint);
                mPaint.setStyle(Paint.Style.STROKE);
                mPaint.setStrokeWidth(5.0f);
                //画第一个节点外围的圆环
                canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineHeadRadius, mPaint);
                //设置画笔颜色，画其他时间节点的颜色
                mPaint.setColor(timelineOtherColor);
                //画笔设置为实心
                mPaint.setStyle(Paint.Style.FILL);
                /**
                 * 画第一个节点下面的轴
                 */
                canvas.drawRect(new Rect(viewWidth - timelineWidth / 2, (int) (2 * timelineHeadRadius + marginTop) + 5, viewWidth + timelineWidth / 2, (int) (2 * timelineHeadRadius + timelineRadiusDistance + marginTop + 5)), mPaint);
                continue;
            }
            /**
             * 画时间轴的节点,即画圆形
             * 圆心的x都是一样的,view的中间
             * 圆心的y的计算是根据节点的位置来计算的,例如:第一个节点的y是根据第一个节点距离上面的距离加上第一个节点的半径:timelineHeadRadius + marginTop
             * 其余的节点就是在一个节点的y的基础上,加上两倍半径和节点之间的轴的长度＊节点数:(2 * timelineRadius + timelineRadiusDistance) * (j - 1) + timelineHeadRadius - timelineRadius + marginTop
             *
             */
            canvas.drawCircle(viewWidth, (2 * timelineRadius + timelineRadiusDistance) * (j - 1) + 2 * timelineHeadRadius - timelineRadius + marginTop, timelineRadius, mPaint);
            /**
             * 　
             *  画其余的轴
             *  left:每个轴距离左边距离都是一样的　　　时间轴的中心位置-1/2的时间轴的宽度  viewWidth - timelineWidth / 2
             *  top:   (int) (j * (2 * timelineRadius + timelineRadiusDistance) - timelineRadiusDistance + 2 * (timelineHeadRadius-timelineRadius)+ marginTop)　
             *  right:每个轴距离右边距离都是一样的　　　时间轴的中心位置+1/2的时间轴的宽度  viewWidth + timelineWidth / 2
             *  bottom: (int) (j * (2 * timelineRadius + timelineRadiusDistance) + 2 * (timelineHeadRadius-timelineRadius)+ marginTop)
             */

            canvas.drawRect(new Rect(viewWidth - timelineWidth / 2, (int) (j * (2 * timelineRadius + timelineRadiusDistance) - timelineRadiusDistance + 2 * (timelineHeadRadius - timelineRadius) + marginTop), viewWidth + timelineWidth / 2, (int) (j * (2 * timelineRadius + timelineRadiusDistance) + 2 * (timelineHeadRadius - timelineRadius) + marginTop)), mPaint);
        }
    }

最后附上全部代码

package com.demo.zes.timelinedemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;

/**
 * TODO: document your custom view class.
 */
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;

    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));
        timelineHeadColor = a.getColor(R.styleable.TimeLineView_timelineHeadColor, Color.parseColor("#73be36"));
        timelineOtherColor = a.getColor(R.styleable.TimeLineView_timelineOtherColor, Color.parseColor("#e0e0e0"));
        timelineCount = a.getInteger(R.styleable.TimeLineView_timelineCount, 0);
        timelineWidth = (int) a.getDimension(R.styleable.TimeLineView_timelineWidth, convertDIP2PX(context, 1));
        marginTop = (int) a.getDimension(R.styleable.TimeLineView_timelineMarginTop, convertDIP2PX(context, 50));
        a.recycle();

        mPaint = new Paint();
        mPaint.setAntiAlias(true);

    }


    @Override
    protected void onDraw(Canvas canvas) {
        //默认设置时间轴的位置位于view的中间
        viewWidth = getMeasuredWidth() / 2;
        //设置第一个节点的颜色
        mPaint.setColor(timelineHeadColor);
        /**
         * 根据时间轴的节点数目，画对应的节点和轴
         */
        for (int j = 1; j <= timelineCount; j++) {

            /**
             * 当j==1，画第一个节点的时候，有点特殊，我们需要在节点的外面再换一个圆环
             */
            if (j == 1) {
                //画笔设置为空心
                canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineRadius, mPaint);
                mPaint.setStyle(Paint.Style.STROKE);
                mPaint.setStrokeWidth(5.0f);
                //画第一个节点外围的圆环
                canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineHeadRadius, mPaint);
                //设置画笔颜色，画其他时间节点的颜色
                mPaint.setColor(timelineOtherColor);
                //画笔设置为实心
                mPaint.setStyle(Paint.Style.FILL);
                /**
                 * 画第一个节点下面的轴
                 */
                canvas.drawRect(new Rect(viewWidth - timelineWidth / 2, (int) (2 * timelineHeadRadius + marginTop) + 5, viewWidth + timelineWidth / 2, (int) (2 * timelineHeadRadius + timelineRadiusDistance + marginTop + 5)), mPaint);
                continue;
            }
            /**
             * 画时间轴的节点,即画圆形
             * 圆心的x都是一样的,view的中间
             * 圆心的y的计算是根据节点的位置来计算的,例如:第一个节点的y是根据第一个节点距离上面的距离加上第一个节点的半径:timelineHeadRadius + marginTop
             * 其余的节点就是在一个节点的y的基础上,加上两倍半径和节点之间的轴的长度＊节点数:(2 * timelineRadius + timelineRadiusDistance) * (j - 1) + timelineHeadRadius - timelineRadius + marginTop
             *
             */
            canvas.drawCircle(viewWidth, (2 * timelineRadius + timelineRadiusDistance) * (j - 1) + 2 * timelineHeadRadius - timelineRadius + marginTop, timelineRadius, mPaint);
            /**
             * 　
             *  画其余的轴
             *  left:每个轴距离左边距离都是一样的　　　时间轴的中心位置-1/2的时间轴的宽度  viewWidth - timelineWidth / 2
             *  top:   (int) (j * (2 * timelineRadius + timelineRadiusDistance) - timelineRadiusDistance + 2 * (timelineHeadRadius-timelineRadius)+ marginTop)　
             *  right:每个轴距离右边距离都是一样的　　　时间轴的中心位置+1/2的时间轴的宽度  viewWidth + timelineWidth / 2
             *  bottom: (int) (j * (2 * timelineRadius + timelineRadiusDistance) + 2 * (timelineHeadRadius-timelineRadius)+ marginTop)
             */

            canvas.drawRect(new Rect(viewWidth - timelineWidth / 2, (int) (j * (2 * timelineRadius + timelineRadiusDistance) - timelineRadiusDistance + 2 * (timelineHeadRadius - timelineRadius) + marginTop), viewWidth + timelineWidth / 2, (int) (j * (2 * timelineRadius + timelineRadiusDistance) + 2 * (timelineHeadRadius - timelineRadius) + marginTop)), mPaint);
        }
    }

    public float getTimelineHeadRadius() {
        return timelineHeadRadius;
    }

    public void setTimelineHeadRadius(float timelineHeadRadius) {

        this.timelineHeadRadius = timelineHeadRadius;
        invalidate();
    }

    public int getTimelineHeadColor() {
        return timelineHeadColor;
    }

    public void setTimelineHeadColor(int timelineHeadColor) {

        this.timelineHeadColor = timelineHeadColor;
        invalidate();
    }

    public int getTimelineOtherColor() {
        return timelineOtherColor;
    }

    public void setTimelineOtherColor(int timelineOtherColor) {
        this.timelineOtherColor = timelineOtherColor;
        invalidate();
    }

    public int getTimelineCount() {
        return timelineCount;
    }

    public void setTimelineCount(int timelineCount) {
        this.timelineCount = timelineCount;
        invalidate();
    }

    public int getMarginTop() {
        return marginTop;
    }

    public void setMarginTop(int marginTop) {

        this.marginTop = marginTop;
        invalidate();
    }

    public int getTimelineRadius() {
        return timelineRadius;
    }

    public void setTimelineRadius(int timelineRadius) {

        this.timelineRadius = timelineRadius;
        invalidate();
    }

    public int getTimelineRadiusDistance() {
        return timelineRadiusDistance;
    }

    public void setTimelineRadiusDistance(int timelineRadiusDistance) {

        this.timelineRadiusDistance = timelineRadiusDistance;
        invalidate();
    }

    public int getTimelineWidth() {
        return timelineWidth;
    }

    public void setTimelineWidth(int timelineWidth) {
        this.timelineWidth = timelineWidth;
    }

    public float getTimeLineViewHeight() {
        this.timeLineViewHeight = getMarginTop() + getTimelineCount() * (2 * getTimelineRadius() + getTimelineRadiusDistance());
        return timeLineViewHeight;
    }

    public void setTimeLineViewHeight(float timeLineViewHeight) {
        this.timeLineViewHeight = timeLineViewHeight;
        invalidate();

    }

    public int getViewWidth() {
        return viewWidth;
    }

    public void setViewWidth(int viewWidth) {
        this.viewWidth = viewWidth;
        invalidate();
    }

    /**
     * 转换dip为px
     */
    public static int convertDIP2PX(Context context, int dip) {
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));
    }

}

附上Github链接 https://github.com/zeschi/TimeLineDemo

zesprogrammer
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android仿快递物流时间轴的代码实现
sinat_16458039的博客
11-03 9056
首先，这篇参考了别人的代码。根据自己的项目需求简单改造了一下，效果图如下 xml：代码 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_par
Android自定义view仿淘宝快递物流信息时间轴
01-04
学了Android有一段时间了，一直没有时间写博客，趁着周末有点空，就把自己做的一些东西写下来． 一方面锻炼一下自己的写文档的能力，另一方面分享代码的同时也希望能与大家交流一下技术，共同学习，共同进步． 废话不多少说，我们先来看看我们自定义view要实现的效果: 效果图 自定义属性 <resources> <declare name=TimeLineView> <attr name=timelineRadius format=dimension> <attr name=timelineHeadRadius format=dimension
vue 时间轴页面 自己的写法 欢迎交流指正
最新发布
qq_27806371的博客
04-30 287
vue 时间轴页面 自己的写法 欢迎交流指正
android物流轨迹,android物流时间轴
weixin_39633976的博客
05-26 346
public class TimeLineView extends View {public TimeLineView(Context context) {this(context,null);}public TimeLineView(Context context, @Nullable AttributeSet attrs) {this(context, attrs,0);}public Tim...
Android 仿淘宝物流快递时间轴代码Demo
10-12
自定义View 实现物流快递时间轴 代码仅供参考
Android仿淘宝物流时间轴
12-10
Android仿淘宝物流时间轴,可添加删除节点，调节时间轴位置，非常实用，效果图可见https://blog.csdn.net/qq_39361915/article/details/103476017
Android仿淘宝京东物流时间轴demo
09-21
总的来说，"Android仿淘宝京东物流时间轴demo"提供了一个学习和实践Android自定义视图、数据绑定、UI设计以及性能优化的好例子。通过研究这个示例，开发者可以深入理解Android UI开发的技巧，提升自己的应用开发能力...
Android仿淘宝物流信息TimeLineView
08-31
总之，Android仿淘宝物流信息TimeLineView的实现涉及自定义视图的创建、属性的获取与解析、以及在`onDraw`方法中的图形绘制。通过这个过程，开发者不仅可以学习到Android视图的基本原理，还能掌握如何通过自定义视图...
Android组装View——快递查询时间轴
09-19
Android组装View——快递查询时间轴
android 仿淘宝物流时间轴控件
u014007519的专栏
03-07 8959
android 仿淘宝物流时间轴控件在这里感谢一片作者的demo,我在他的基础上做了写修改 ，改成我们项目所用的样式！还是那句话没有实现不了的需求，只有想不到的。首先看我们项目的设计图。 首先看一下别人的自定义时间轴控件，是通过画布的方法自己写的一个view.`public class TimeLineView extends View {private Paint mPaint; /** *
小程序仿快递查询、显示时间轴
06-23
最近小程序项目中需要一个时间轴，此代码实现小程序快递查询，时间轴显示物流信息
仿物流进度demo
06-02
物流进度demo
仿淘宝物流效果(物流时间轴效果)
lndlazy的专栏
10-17 7216
仿淘宝物流效果(物流时间轴效果)不bb直接开始. 先来看一下效果图吧 这个是淘宝的效果 这个是我做的效果图 细节没做处理,也没图片,所以不好看,不过时间轴的效果还是有的,关键是效果嘛.因为技术不行,不会做自定义控件画出来,只能想别的方法实现这个效果了,有大神可以教教我自定义控件哈.先说说思路: 首先右边的列表信息肯定是RecyclerView来实现了,但是左边的怎么实现呢? 用图片? 感觉
Android自定义View:快递时间轴实现
Darry_R的博客
03-29 432
前言 在Android开发中，时间轴的 UI非常常见，如下图： 储备知识: 1.自定义view基础 2.RecyclerView的使用 3.自定义RecyclerView.ItemDecoration 具体实现 1.最终效果如下: 2.实现思路 使用RecyclerView,自定义RecyclerView.ItemDecoration 复习ItemDecoration中getIt...
Android仿快递 物流时间轴 的代码实现
diaodishui8923的博客
08-02 107
首先，这篇参考了别人的代码。根据自己的项目需求简单改造了一下，效果图如下 xml：代码 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 andro...
仿淘宝物流的跟踪图，不需要自定义时间轴
fuzhongbin的博客
07-16 5951
最近遇到一个项目需要实现如下图这种流程看了网上很多都是要自定义时间轴配合ListView来实现，但是本项目的流程又区别于淘宝物流的跟踪图，所以自己写了一个流程图，代码如下：item的布局 view_process_item.xml：&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://...
使用RecyclerView实现电商物流信息的时光轴效果
nanxuan521的专栏
01-26 2634
转载请标明出处： http://blog.csdn.net/lmj623565791/article/details/49734867； 本文出自:【kirk.wang的博客】相信RecyclerView大家已经不陌生了，最近公司项目中查看物流信息需要用到时光轴，所以在完成此功能之后写下了这一篇文章，希望对大家有所帮助. 需求 要达到的效果 实现功能 需求首先为什么要做时光轴，用它来体现有什么好
React Native 仿天猫物流跟踪时间轴
05-24
如果你想要实现天猫物流跟踪时间轴的功能，可以考虑使用 React Native 开发。 下面是一个简单的实现流程： 1. 安装 React Native 开发环境，可以参考官方文档进行安装。 2. 创建一个新的 React Native 项目，使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值