跟蹤記錄View

》導讀：

無論是做電商型app，還是物流型，或者其他，我們往往都要做一些記錄型展示。下面爲大家帶來一款賣相不錯的CustomView；

》控件：

/**
 * Created by Kvin on 2016/3/24.
 */
public class RecordView extends ViewGroup {
    private final int DEFAULT_CHILD = 4;
    private final int[] circleColors = {Color.parseColor("#ff0000"), Color.parseColor("#ff6600"), Color.parseColor("#ffcc00"), Color.parseColor("#00ff00"), Color.parseColor("#0000ff"),
            Color.parseColor("#006600"), Color.parseColor("#999999"), Color.parseColor("#000000"), Color.parseColor("#ff66cc"), Color.parseColor("#ff9224")};
    private int circleRadium = 20;
    private int circleColor;
    private int circleWidth=10;
    private RectF circleRect;
    private int lineColor;
    private int topTxtColor;
    private int bottomTxtColor;
    private int topTxtSize;
    private int bottomTxtSize;
    private int leftWidth;//use for drawing circle
    private int middleGap;
    private Paint linePaint;
    private Paint circlePaint;

    private String txt1;
    private String txt2;
    private String txt3;
    private String txt4;


    public RecordView(Context context) {
        super(context);
        initProperty(context);
    }

    public RecordView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RecordView);
        lineColor = typedArray.getColor(R.styleable.RecordView_rvLineColor, Color.GRAY);
        topTxtColor = typedArray.getColor(R.styleable.RecordView_rvTopTxtColor, Color.BLACK);
        bottomTxtColor = typedArray.getColor(R.styleable.RecordView_rvBottomTxtColor, Color.GRAY);
        topTxtSize = typedArray.getDimensionPixelSize(R.styleable.RecordView_rvTopTxtSize, 10);
        bottomTxtSize = typedArray.getDimensionPixelSize(R.styleable.RecordView_rvBottomTxtSize, 10);
        leftWidth = typedArray.getDimensionPixelSize(R.styleable.RecordView_rvLeftWidth, 10);
        middleGap = typedArray.getDimensionPixelSize(R.styleable.RecordView_rvMiddleGap, 10);
        circleRadium = typedArray.getDimensionPixelSize(R.styleable.RecordView_rvCircleRadium, 20);
        circleWidth = typedArray.getDimensionPixelSize(R.styleable.RecordView_rvCircleWidth, 10);
        circleColor = typedArray.getColor(R.styleable.RecordView_rvCircleColor, circleColors[0]);
        initProperty(context);
    }

    public RecordView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    //default properties
    private void initProperty(Context context) {
        setWillNotDraw(false);//allow to draw
        lineColor = Color.parseColor("#dadada");
        topTxtColor = Color.BLACK;
        bottomTxtColor = Color.GRAY;
        topTxtSize = getResources().getDimensionPixelSize(R.dimen.sv_top_txtSize);
        bottomTxtSize = getResources().getDimensionPixelSize(R.dimen.sv_bottom_txtSize);
        leftWidth = getResources().getDimensionPixelSize(R.dimen.sv_left_width);
        middleGap = getResources().getDimensionPixelSize(R.dimen.sv_middle_width);
        addChildViews(DEFAULT_CHILD, context);

        //init line paint
        linePaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        linePaint.setColor(lineColor);


        //init circle paint
        circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        circlePaint.setColor(circleColors[(int) (10 * Math.random())]);
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setStrokeWidth(circleWidth);

        circleRect = new RectF();
        circleRect.left = leftWidth / 2 - circleRadium;
        circleRect.right = leftWidth / 2 + circleRadium;
    }


    /**
     * add child view
     *
     * @param childNum
     * @param context
     */
    private void addChildViews(int childNum, Context context) {
        for (int i = 0; i < childNum; i++) {
            addView(new TextView(context));
        }
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        measureChildren(widthMeasureSpec, heightMeasureSpec);//measure children`s size
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //draw line
        canvas.drawLine(leftWidth / 2, 0, leftWidth / 2, getHeight() / 2 - circleRadium, linePaint);
        canvas.drawLine(leftWidth / 2, getHeight() / 2 + circleRadium, leftWidth / 2, getHeight(), linePaint);
        canvas.drawLine(leftWidth + 2, getHeight() - 2, getWidth(), getHeight() - 2, linePaint);

        //draw circle
        circleRect.top = getHeight() / 2 - circleRadium;
        circleRect.bottom = getHeight() / 2 + circleRadium;
        canvas.drawArc(circleRect, 0, 360, false, circlePaint);

    }


    /**
     * set content
     */
    public void setText(String txt1, String txt2, String txt3, String txt4) {
        this.txt1 = txt1;
        this.txt2 = txt2;
        this.txt3 = txt3;
        this.txt4 = txt4;
        postInvalidate();
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        initLayout();
    }

    /**
     * set positions for childViews
     */
    private void initLayout() {
        if (getChildCount() == DEFAULT_CHILD) {
            LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, getHeight() / 2);
            TextView tv1 = ((TextView) getChildAt(0));
            tv1.setLayoutParams(params);
            tv1.setTextColor(topTxtColor);
            tv1.setTextSize(TypedValue.COMPLEX_UNIT_PX, topTxtSize);
            tv1.setText(txt1);
            tv1.setGravity(Gravity.BOTTOM);
            tv1.layout(leftWidth, 0, leftWidth + middleGap, getHeight() / 2);

            TextView tv2 = ((TextView) getChildAt(1));
            tv2.setLayoutParams(params);
            tv2.setGravity(Gravity.BOTTOM);
            tv2.setTextColor(topTxtColor);
            tv2.setTextSize(TypedValue.COMPLEX_UNIT_PX, topTxtSize);
            tv2.setText(txt2);
            tv2.layout(leftWidth + middleGap, 0, getWidth(), getHeight() / 2);

            TextView tv3 = ((TextView) getChildAt(2));
            tv3.setLayoutParams(params);
            tv3.setTextColor(bottomTxtColor);
            tv3.setTextSize(TypedValue.COMPLEX_UNIT_PX, bottomTxtSize);
            tv3.setText(txt3);
            tv3.layout(leftWidth, getHeight() / 2, leftWidth + middleGap, getHeight());

            TextView tv4 = ((TextView) getChildAt(3));
            tv4.setLayoutParams(params);
            tv4.setTextColor(bottomTxtColor);
            tv4.setTextSize(TypedValue.COMPLEX_UNIT_PX, bottomTxtSize);
            tv4.setText(txt4);
            tv4.layout(leftWidth + middleGap, getHeight() / 2, getWidth(), getHeight());
        }
    }

}

》屬性：

<!--SVRecordView attr-->
    <declare-styleable name="RecordView">
        <attr name="rvLineColor" format="color" />
        <attr name="rvTopTxtColor" format="color" />
        <attr name="rvBottomTxtColor" format="color" />
        <attr name="rvTopTxtSize" format="dimension" />
        <attr name="rvBottomTxtSize" format="dimension" />
        <attr name="rvLeftWidth" format="dimension" />
        <attr name="rvMiddleGap" format="dimension" />
        <attr name="rvCircleRadium" format="dimension" />
        <attr name="rvCircleWidth" format="dimension" />
        <attr name="rvCircleColor" format="color" />
    </declare-styleable>

》用法：

1.可以new ，也可以在xml中引用；
2. mRecordView.setText(data, list.get(position).getOrgName(), time, context.getString(R.string.batch_out));

》討論：

對於左邊的小圓圈，可以根據實際需要作實際處理；圓圈顏色的選擇，本View只有隨機數選擇一種，大家可以自己添加一種幾種顏色輪着來的算法。反正，怎麼高興，怎麼弄。