仿淘宝物流效果(物流时间轴效果)

仿淘宝物流效果(物流时间轴效果)

不bb直接开始.
先来看一下效果图吧
这个是淘宝的效果

这个是我做的效果图

细节没做处理,也没图片,所以不好看,不过时间轴的效果还是有的,关键是效果嘛.

因为技术不行,不会做自定义控件画出来,只能想别的方法实现这个效果了,有大神可以教教我自定义控件哈.

先说说思路:
首先右边的列表信息肯定是RecyclerView来实现了,但是左边的怎么实现呢? 用图片? 感觉不靠谱:不同手机拉伸效果不一样万一出现上个条目跟下个条目的线对不齐不是很影响效果. 那怎么办呢?
想了想,可以各个view的相对位置来实现啊,比如那一条竖线可以用imageview来实现,那个圆点也可以用imageview实现啊,唯一不同的就是竖线的view是穿过灰色的圆view的,而position为0的竖线是不穿过蓝色的圆view的,这个也有办法搞定,在adapter里面单独处理,设置他们的相对位置就可以呀!

下面先做两个shape圆,一个灰色的一个蓝色的

蓝色圆shape_circle_logistics_green:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#2fad62" />
    <stroke
        android:width="2dp"
        android:color="#b9e4cc" />
</shape>

灰色圆shape_circle_logistics_gray:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#dddddd" />
</shape>

主activity里面的的布局就不贴了,主要的就是一个recycleview
还是贴adapter的代码吧,先上布局文件的:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/rl_left"
        android:layout_width="50dp"
        android:layout_height="86dp"
        android:layout_alignParentLeft="true">

        <ImageView
            android:id="@+id/iv_status"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_centerInParent="true" />

        <ImageView
            android:id="@+id/iv_line"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_below="@id/iv_status"
            android:layout_centerInParent="true"
            android:src="#dddddd" />
    </RelativeLayout>

    <TextView
        android:id="@+id/tv_status"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@id/rl_left"
        android:autoLink="email|phone|web"
        android:text="正在派送途中,请您准备签收(派件人:张小建,电话:18513394441)" />

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_below="@id/tv_status"
        android:layout_marginRight="15dp"
        android:layout_toRightOf="@id/rl_left"
        android:gravity="center_vertical"
        android:text="2016-10-12 08:02:18" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_below="@id/tv_time"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        android:layout_toRightOf="@id/rl_left"
        android:background="#9b9b9b" />

</RelativeLayout>

然后adapter里面的代码:

/**
 * Created by Aaron on 16/10/14.
 */

public class LogisticsAdapter extends RecyclerView.Adapter<LogisticsAdapter.LogisticsAdapterHolder> {

    private Context ctx;
    private LayoutInflater mLayoutInflater;
    private JSONArray jsonArray;

    private String TAG = getClass().getSimpleName();

    public LogisticsAdapter(Context ctx, JSONArray jsonArray) {
        this.ctx = ctx;
        this.mLayoutInflater = LayoutInflater.from(ctx);
        this.jsonArray = jsonArray;
    }

    @Override
    public int getItemCount() {
        return jsonArray.length();
    }

    @Override
    public LogisticsAdapter.LogisticsAdapterHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new LogisticsAdapter.LogisticsAdapterHolder(mLayoutInflater.inflate(R.layout.item_logistics, parent, false));
    }

    @Override
    public void onBindViewHolder(LogisticsAdapter.LogisticsAdapterHolder holder, int position) {

        try {

            JSONObject info = (JSONObject) jsonArray.get(position);

            holder.tv_status.setText(info.getString("status"));//订单状态
            holder.tv_time.setText(info.getString("time"));//时间

            if (position == 0) {


                //绿色的圆点
                holder.iv_status.setImageResource(R.drawable.shape_circle_logistics_green);
                RelativeLayout.LayoutParams pointParams = new RelativeLayout.LayoutParams(DensityUtil.dip2px(ctx, 20), DensityUtil.dip2px(ctx, 20));
                pointParams.addRule(RelativeLayout.CENTER_IN_PARENT);
                holder.iv_status.setLayoutParams(pointParams);

                holder.tv_time.setTextColor(ctx.getResources().getColor(R.color.color_25));
                holder.tv_status.setTextColor(ctx.getResources().getColor(R.color.color_25));

                //灰色的竖线
                RelativeLayout.LayoutParams lineParams = new RelativeLayout.LayoutParams(DensityUtil.dip2px(ctx, 1), ViewGroup.LayoutParams.MATCH_PARENT);
                lineParams.addRule(RelativeLayout.BELOW, R.id.iv_status);//让直线置于圆点下面
                lineParams.addRule(RelativeLayout.CENTER_IN_PARENT);
                holder.iv_line.setLayoutParams(lineParams);

            } else {

//                holder.iv_status.setBackgroundResource(R.mipmap.ic_logistics_bottom);
                holder.iv_status.setImageResource(R.drawable.shape_circle_logistics_gray);
                RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(DensityUtil.dip2px(ctx, 10), DensityUtil.dip2px(ctx, 10));
                lp.addRule(RelativeLayout.CENTER_IN_PARENT);

                holder.iv_status.setLayoutParams(lp);

             holder.tv_time.setTextColor(ctx.getResources().getColor(R.color.textColor_9b));
                holder.tv_status.setTextColor(ctx.getResources().getColor(R.color.textColor_9b));

                //灰色的竖线
                RelativeLayout.LayoutParams lineParams = new RelativeLayout.LayoutParams(DensityUtil.dip2px(ctx, 1), ViewGroup.LayoutParams.MATCH_PARENT);
//                lineParams.addRule(RelativeLayout.BELOW, R.id.iv_status);//让直线置于圆点下面
                lineParams.addRule(RelativeLayout.CENTER_IN_PARENT);
                holder.iv_line.setLayoutParams(lineParams);

            }

        } catch (JSONException e) {
            e.printStackTrace();
        }

    }

    //自定义的ViewHolder，持有每个Item的的所有界面元素
    public static class LogisticsAdapterHolder extends RecyclerView.ViewHolder {

        ImageView iv_status;
        TextView tv_status;
        TextView tv_time;
        ImageView iv_line;

        LogisticsAdapterHolder(View view) {
            super(view);


            iv_line = (ImageView) view.findViewById(R.id.iv_line);

            iv_status = (ImageView) view.findViewById(R.id.iv_status);
            tv_status = (TextView) view.findViewById(R.id.tv_status);
            tv_time = (TextView) view.findViewById(R.id.tv_time);

        }
    }

}

最后在activity里面设置一下就可以了

 JSONArray jsonArray = resutl.getJSONArray("list");

        if (jsonArray != null && jsonArray.length() > 0) {

            LogisticsAdapter logisticsAdapter = new LogisticsAdapter(this, jsonArray);
            rv.setAdapter(logisticsAdapter);

        }

再给一个测试的json

{"re":{"number":"926896815005","type":"sfexpress","list":[{"time":"2016-10-12 09:41:26","status":"已签收,感谢使用顺丰,期待再次为您服务"},{"time":"2016-10-12 08:02:18","status":"正在派送途中,请您准备签收(派件人:张小建,电话:18513394441)"},{"time":"2016-10-12 03:53:00","status":"快件到达 【北京通州杨庄营业点】"},{"time":"2016-10-11 23:34:05","status":"快件在【北京顺义集散中心】已装车，准备发往 【北京通州杨庄营业点】"},{"time":"2016-10-11 22:45:48","status":"快件到达 【北京顺义集散中心】"},{"time":"2016-10-11 20:26:38","status":"快件在【北京海淀天秀营业点】已装车，准备发往 【北京顺义集散中心】"},{"time":"2016-10-11 18:15:35","status":"顺丰速运 已收取快件"}],"deliverystatus":"3","issign":"1"},"code":0,"code_msg":"成功"}

ps代码中的颜色值需要在color里面添加下

 <color name="color_25">#25ae5f</color>
  <color name="textColor_9b">#9b9b9b</color>

这样一切就ok了~