Order process view, order view
Activity_main.xml
<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" xmlns: app = "http://schemas.android.com/apk/res-auto" android: id = "@ + id/activity_main" android: layout_width = "match_parent" android: layout_height = "match_parent" android: paddingLeft = "@ dimen/activity_horizontal_margin" android: paddingRight = "@ dimen/plugin" android: paddingTop = "@ dimen/activity_vertical_margin" android: paddingBottom = "@ dimen/activity_vertical_margin" android: background = "# b2000000" android: orientation = "vertical"> <android. support. v7.widget. cardView android: layout_width = "match_parent" android: layout_height = "wrap_content" app: cardCornerRadius = "5dp" app: cardElevation = "3dp" app: cardBackgroundColor = "# FF2384DD"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: orientation = "vertical" android: padding = "10dp"> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Merchants have received tickets" android: textSize = "14.5sp" android: textColor = "# FFF1AE0D"/> <TextView android: layout_marginTop = "5dp" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "the order is automatically completed after 12 hours" android: textSize = "13sp" android: textColor = "# fff"/> <View android: layout_marginTop = "10dp" android: layout_marginBottom = "10dp" android: layout_width = "match_parent" android: layout_height = "2dp" android: background = "@ drawable/bg_line" android: layerType = "software"/> <com. yasin. processdemo. view. processView android: id = "@ + id/id_process" android: layout_width = "match_parent" android: layout_height = "wrap_content" app: texts = "@ array/process_states"/> </LinearLayout> </android. support. v7.widget. cardView> </LinearLayout>
Arrays. xml:
<? Xml version = "1.0" encoding = "UTF-8"?> <Resources> <array name = "process_states"> <item> the order has been submitted </item> <item> paid </item> <item> the merchant has received the order </item> <item> delivered </item> </array> </resources>
Activity:
public class MainActivity extends AppCompatActivity { private ProcessView mProcessView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mProcessView= (ProcessView) findViewById(R.id.id_process); startAni(); } private void startAni() { ValueAnimator a = ValueAnimator.ofFloat(0, 1); a.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float progress = (float) animation.getAnimatedValue(); mProcessView.setProgress(progress); } }); a.setDuration(10000); a.setInterpolator(new AccelerateDecelerateInterpolator()); a.start(); }}
ProcessView:
Package com. yasin. processdemo. view; import android. content. context; import android. content. res. resources; import android. content. res. typedArray; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. graphics. radialGradient; import android. graphics. shader; import android. OS. logoff; import android. text. textPaint; import android. util. attributeSet; import android Oid. util. log; import android. util. typedValue; import android. view. view; import com. yasin. processdemo. r; public class ProcessView extends View {/*** default line width */private static final float D_LINE_WIDTH = 3; /*** default sliding dot radius */private static final float D_THUMB_RADIUS = 10;/*** default textsize */private static final float D_TEXT_SIZE = 13f; private static final int D_REACH_COLOR = 0xFFF1AE0D; private static Final int D_UNREACH_COLOR = Color. WHITE; private static final int D_TEXT_COLOR = Color. WHITE; private Paint linePaint; private TextPaint textPaint; private Paint thumbPaint; private float mTextSize = xx2px (TypedValue. COMPLEX_UNIT_SP, D_TEXT_SIZE); private float mLineWidth = xx2px (TypedValue. COMPLEX_UNIT_DIP, D_LINE_WIDTH); private float maid = xx2px (TypedValue. COMPLEX_UNIT_DIP, D_THUMB_RAD IUS); private int mReachedColor = D_REACH_COLOR; private int mUnreachedColor = D_UNREACH_COLOR; private int mTextColor = D_TEXT_COLOR; // The current progress is private float mProgress = 0.0f; // All state text private String [] texts; public ProcessView (Context context) {this (context, null);} public ProcessView (Context context, AttributeSet attrs) {this (context, attrs, 0);} public ProcessView (Context context, AttributeS Et attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); obtainStyledAttrs (context, attrs, defStyleAttr); initViews ();} /*** get our custom attributes * @ param context * @ param attrs * @ param defStyleAttr */private void obtainStyledAttrs (Context context, AttributeSet attrs, int defStyleAttr) {TypedArray a = context. obtainStyledAttributes (attrs, R. styleable. processView, defStyleAttr, 0); texts =. h AsValue (R. styleable. ProcessView_texts )? GetResources (). getStringArray (a. getResourceId (R. styleable. ProcessView_texts, 0): texts; mLineWidth = a. hasValue (R. styleable. ProcessView_line_width )? A. getDimensionPixelSize (R. styleable. ProcessView_line_width, 0): mLineWidth; balance = a. hasValue (R. styleable. ProcessView_thumb_radius )? A. getDimensionPixelSize (R. styleable. ProcessView_thumb_radius, 0): mTextSize = a. hasValue (R. styleable. ProcessView_textsize )? A. getDimensionPixelSize (R. styleable. ProcessView_text_color, 0): mTextSize; mReachedColor = a. hasValue (R. styleable. ProcessView_color_reached )? A. getColor (R. styleable. ProcessView_color_reached, D_REACH_COLOR): D_REACH_COLOR; mUnreachedColor = a. hasValue (R. styleable. ProcessView_color_unreached )? A. getColor (R. styleable. ProcessView_color_unreached, D_UNREACH_COLOR): D_UNREACH_COLOR; mTextColor = a. hasValue (R. styleable. ProcessView_text_color )? A. getColor (R. styleable. processView_text_color, D_TEXT_COLOR): D_TEXT_COLOR;. recycle ();}/*** initialize some objects */private void initViews () {linePaint = new Paint (Paint. ANTI_ALIAS_FLAG | Paint. DITHER_FLAG); linePaint. setStyle (Paint. style. FILL); textPaint = new TextPaint (Paint. ANTI_ALIAS_FLAG | Paint. DITHER_FLAG); thumbPaint = new Paint (linePaint); textPaint. setTextSize (mTextSize); textPaint. setColor (mText Color); linePaint. setStrokeWidth (mLineWidth);} @ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {int heightM = MeasureSpec. getMode (heightMeasureSpec); int defaultW = MeasureSpec. getSize (widthMeasureSpec); int defaultH = MeasureSpec. getSize (heightMeasureSpec); int resultW, resultH; resultW = defaultW; resultH = getDefaultHeight (defaultH, heightM); setMeasuredDimensi On (resultW, resultH);} private int getDefaultHeight (int height, int mode) {int result; if (mode = MeasureSpec. EXACTLY) {result = height;} else {// get the text height float textH = (textPaint. getFontMetrics (). bottom-textPaint. getFontMetrics (). top); // Height = circle radius + 2.2 * line width (that is, the vertical line height) + TEXT height * 1.3 (that is, the Gap Height) + 0.5 * Text height result = (int) (maid + mLineWidth * 2.2f + textH * 1.3f + 0.5 * textH);} return result;} @ Ov Erride protected void onDraw (Canvas canvas) {// draw the vertical line and text drawFoot (canvas) at the bottom; // draw the moving dot and progress bar drawProgressAndThumb (canvas );} /*** draw the vertical line and text at the bottom */private void drawFoot (Canvas canvas) {// set the width of the vertical line at the bottom (the vertical line at the bottom is a little smaller than the progress bar) float lineWidth = mLineWidth * 0.8f; linePaint. setStrokeWidth (mLineWidth * 0.8f); // start position (that is, the "already" position of "submitted order") float startX = textPaint. measureText (texts [0])/2; // float e NdTextW = textPaint. measureText (texts [texts. length-1])/2; // draw the end point float endX = getMeasuredWidth ()-endTextW; // float lineW = (endX-startX) /(texts. length-1); // The height of the vertical line float lineH = mLineWidth * 2.2f; // the end point of the vertical line float lineY = mThumbRadius + mLineWidth/2; // cyclically draw the vertical line and text for (int I = 0; I <texts. length; I ++) {canvas. save (); // draw a vertical line for each canvas to horizontally translate the linew width canvas. translate (I * lineW, 0); // For example: If the current progress> the position of the vertical line, the linePaint. setColor (I * lineW> = mProgress * (endX-startX) of the vertical line is changed )? MUnreachedColor: mReachedColor); float endX2 = I = texts. length-1? StartX-lineWidth/2: startX + lineWidth/2; canvas. drawLine (endX2, lineY, endX2, lineY + lineH, linePaint); // draw text textPaint. setTextAlign (Paint. align. CENTER); float textH = (textPaint. getFontMetrics (). bottom-textPaint. getFontMetrics (). top); canvas. drawText (texts [I], endX2, lineY + lineH + textH * 1.3f, textPaint); canvas. restore () ;}} private void drawProgressAndThumb (Canvas canvas) {float StartX = textPaint. measureText (texts [0])/2; float endTextW = textPaint. measureText (texts [texts. length-1])/2; float endX = getMeasuredWidth ()-endTextW; float lineY = mThumbRadius; linePaint. setStrokeWidth (mLineWidth); // draw basic line linePaint. setColor (mUnreachedColor); canvas. drawLine (startX, lineY, endX, lineY, linePaint); // draw progress line float progressX = startX + (endX-startX) * MProgress; linePaint. setColor (mReachedColor); canvas. drawLine (startX, lineY, progressX, lineY, linePaint); // A RadialGradient color gradient effect thumbPaint for the moving dot. setShader (new RadialGradient (progressX, mThumbRadius, mThumbRadius, new int [] {Color. WHITE, D_REACH_COLOR, Color. YELLOW}, null, Shader. tileMode. REPEAT); canvas. drawCircle (progressX, mThumbRadius, mThumbRadius, thumbPaint);} public void setProgress (Float progress) {if (progress! = MProgress) {mProgress = progress; if (logoff. mylogoff () = logoff. getmainlodate () {invalidate () ;}else {postInvalidate () ;}} private float xx2px (int unit, float value) {Context c = getContext (); Resources r; if (c = null) r = Resources. getSystem (); else r = c. getResources (); return (TypedValue. applyDimension (unit, value, r. getDisplayMetrics ()));}}
Github: https://github.com/ganchuanpu/ProcessDemo