【商城开发五】时间轴，订单消息

自己写的一个时间轴效果，效果如下

每一个item的界面是这个样子的

这个虚线是一个自定义的view，代码如下：

public class DashView extends View {
    private static final String TAG = "DashView";
    public static final int DEFAULT_DASH_WIDTH = 100;
    public static final int DEFAULT_LINE_WIDTH = 100;
    public static final int DEFAULT_LINE_HEIGHT = 10;
    public static final int DEFAULT_LINE_COLOR = 0x9E9E9E;

    /**虚线的方向*/
    public static final int ORIENTATION_HORIZONTAL = 0;
    public static final int ORIENTATION_VERTICAL = 1;
    /**默认为水平方向*/
    public static final int DEFAULT_DASH_ORIENTATION = ORIENTATION_HORIZONTAL;
    /**间距宽度*/
    private float dashWidth;
    /**线段高度*/
    private float lineHeight;
    /**线段宽度*/
    private float lineWidth;
    /**线段颜色*/
    private int lineColor;
    private int dashOrientation;

    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private int widthSize;
    private int heightSize;

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

    public DashView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.DashView);
        dashWidth = typedArray.getDimension(R.styleable.DashView_dashWidth,DEFAULT_DASH_WIDTH);
        lineHeight = typedArray.getDimension(R.styleable.DashView_lineHeight, DEFAULT_LINE_HEIGHT);
        lineWidth = typedArray.getDimension(R.styleable.DashView_lineWidth, DEFAULT_LINE_WIDTH);
        lineColor = typedArray.getColor(R.styleable.DashView_lineColor, DEFAULT_LINE_COLOR);
        dashOrientation = typedArray.getInteger(R.styleable.DashView_dashOrientation,DEFAULT_DASH_ORIENTATION);
        mPaint.setColor(lineColor);
        mPaint.setStrokeWidth(lineHeight);
        typedArray.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        widthSize = MeasureSpec.getSize(widthMeasureSpec)-getPaddingLeft()-getPaddingRight();
        heightSize = MeasureSpec.getSize(heightMeasureSpec - getPaddingTop() - getPaddingBottom());
        if(dashOrientation == ORIENTATION_HORIZONTAL){
            不管在布局文件中虚线高度设置为多少，控件的高度统一设置为线段的高度
            setMeasuredDimension(widthSize, (int) lineHeight);
        }else{
            //当为竖直方向时，控件宽度设置为虚线的高度
            setMeasuredDimension((int) lineHeight, heightSize);
        }

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (dashOrientation){
            case ORIENTATION_VERTICAL:
                drawVerticalLine(canvas);
                break;
            default:
                drawHorizontalLine(canvas);
        }
    }

    /**
     * 画水平方向虚线
     * @param canvas
     */
    public void drawHorizontalLine(Canvas canvas){
        float totalWidth = 0;
        canvas.save();
        float[] pts = {0,0,lineWidth,0};
        //在画线之前需要先把画布向下平移办个线段高度的位置，目的就是为了防止线段只画出一半的高度
        //因为画线段的起点位置在线段左下角
        canvas.translate(0,lineHeight/2);
        while(totalWidth<=widthSize){
            canvas.drawLines(pts,mPaint);
            canvas.translate(lineWidth + dashWidth,0);
            totalWidth += lineWidth + dashWidth;
        }
        canvas.restore();
    }

    /**
     * 画竖直方向虚线
     * @param canvas
     */
    public void drawVerticalLine(Canvas canvas){
        float totalWidth = 0;
        canvas.save();
        float[] pts = {0,0,0,lineWidth};
        //在画线之前需要先把画布向右平移半个线段高度的位置，目的就是为了防止线段只画出一半的高度
        //因为画线段的起点位置在线段左下角
        canvas.translate(lineHeight/2,0);
        while(totalWidth<=heightSize){
            canvas.drawLines(pts,mPaint);
            canvas.translate(0,lineWidth + dashWidth);
            totalWidth += lineWidth + dashWidth;
        }
        canvas.restore();
    }
}

    <declare-styleable name="DashView">
        <attr name="dashWidth" format="dimension"/>
        <attr name="lineWidth" format="dimension"/>
        <attr name="lineHeight" format="dimension"/>
        <attr name="lineColor" format="color"/>
        <attr name="dashOrientation" format="integer"/>
    </declare-styleable>

虚线上的小球

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

    <solid android:color="@android:color/white" />
    <stroke
        android:width="2dp"
        android:color="#b7b7b7" />
    <size
        android:width="10dp"
        android:height="10dp" />
</shape>

item布局大致是这个样子的

<?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="163dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <FrameLayout
        android:id="@+id/time_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp">

        <com.muzi.timeline.DashView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            app:dashOrientation="1"
            app:dashWidth="3dp"
            app:lineColor="#b7b7b7"
            app:lineHeight="1dp"
            app:lineWidth="4dp" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginTop="18dp"
            android:background="@drawable/bg_point_gray" />
    </FrameLayout>

    <TextView
        android:id="@+id/item_message_order_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="6.5dp"
        android:layout_marginTop="14dp"
        android:textSize="13sp"
        android:layout_toRightOf="@id/time_line"
        android:textColor="#b7b7b7" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="114dp"
        android:layout_below="@id/item_message_order_time"
        android:layout_marginLeft="6.5dp"
        android:layout_marginRight="14dp"
        android:layout_marginTop="16dp"
        android:layout_toRightOf="@id/time_line"
        android:background="@drawable/bg_gray"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="32dp"
            android:gravity="center_vertical"
            android:paddingLeft="9dp"
            android:text="订单支付提醒"
            android:textColor="@android:color/black"
            android:textSize="13sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#b7b7b7" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.muzi.timeline.RoundImageView
                android:id="@+id/item_message_order_img"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="8dp"
                android:scaleType="centerCrop"
                app:borderRadius="4dp"
                app:type="round" />

            <ImageView
                android:id="@+id/img_right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="9dp"
                android:src="@mipmap/right3_arrow" />

            <TextView
                android:id="@+id/item_message_order_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="12dp"
                android:layout_toLeftOf="@id/img_right"
                android:layout_toRightOf="@id/item_message_order_img"
                android:textColor="@android:color/black"
                android:textSize="13sp" />
        </RelativeLayout>
    </LinearLayout>
</RelativeLayout>

添加

compile 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.8.3'

需要在build.gradle(Project) 做如下配置

allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

demo下载