Android Time Axis realize Taobao logistics information browsing effect _android

This example for you to share the android time axis production methods for your reference, the specific content as follows

1. Effect

2. Analysis and implementation

2.1 Effect Implementation:

Before thinking about this effect, because only need to use their own projects in the form of direct picture layout to achieve the effect, although the effect is realized, but later found a lot of problems: the first Android resolution too much directly set XXXDP unavoidably some of the models appear unsuitable, The second thing we need to align with this part of the right is the bigger head.

So the way the implementation works now is this:

1. Custom Timerlinemarker, according to the custom property to obtain the point and line background resources or color and width, etc., in the Onmeasure calculation layout width and height;
2. In the item Cloth Center we give the need to align that view to set an ID of Need_align_view, we in the onsizechanged to find and calculate the alignment view distance to the head height;
3. When we get the height of the alignment view, we calculate the top line, the middle marker, and the rectangular area that the line below needs to draw, call invalidate () and then draw the three parts in the OnDraw method respectively;
4. Obviously we need to show the way is somewhat different, such as the first without the above line its center mark color is not the same, the last one does not have the following line, so we need to provide two methods: SetStyle () set the display style; Setmarker (int Resouceid) Set resources for intermediate markup

2.2 Step-by-Step implementation:

1. Custom Timerlinemarker, to calculate the width and height of the layout in Onmeasure, depending on the custom attribute to get the background resource of the point and line, or the color and width, etc.

public class Timerlinemarker extends View {///3 part of drawable private drawable mbeginline, Mendline, Mmarker;
 Display size private int mmarkersize = Mlinesize = 4;

 Distance the head of the fine tuning private int mmarkermargintop = 0;
 Public Timerlinemarker {This (context, NULL);
 Public Timerlinemarker (context, AttributeSet attrs) {This (context, attrs, 0); 
  Public Timerlinemarker (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);
 Initattribute (ATTRS); /** * Initializes the custom attribute */private void Initattribute (AttributeSet attrs) {final TypedArray TypedArray = GetContext (). O
  Btainstyledattributes (Attrs, R.styleable.timerlinemarker);
  Gets the size mmarkersize = Typedarray.getdimensionpixelsize (r.styleable.timerlinemarker_markersize, mMarkerSize);
  Mlinesize = Typedarray.getdimensionpixelsize (r.styleable.timerlinemarker_linesize, mLineSize); Get drawable Mbeginline = TypedArray. Getdrawable (R.styleabLe.
  Timerlinemarker_beginline);
  Mendline = typedarray.getdrawable (r.styleable.timerlinemarker_endline);
  Mmarker = typedarray.getdrawable (R.styleable.timerlinemarker_marker); Mmarkermargintop = Typedarray.getdimensionpixelsize (R.styleable.timerlinemarker_markermargintop, MMarkerMarginTop
  );
 Typedarray.recycle ();  @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {super.onmeasure (Widthmeasurespec,
  HEIGHTMEASURESPEC);
  The width int with = Mmarkersize + getpaddingleft () + getpaddingright () is measured in the width of the view's face control.
  int height = mmarkersize + getpaddingtop () + Getpaddingbottom ();
  Through a system of a method of making decisions the final decision is wide-high int withsize = Resolvesizeandstate (with, Widthmeasurespec, 0);
  int heightsize = resolvesizeandstate (height, heightmeasurespec, 0);
 Set wide and high setmeasureddimension (Withsize, heightsize);

 }
}

2. In the item Cloth Center we give the need to align that view to set an ID of Need_align_view, we in the onsizechanged to find and calculate the alignment view distance to the head height;

 Mark Distance to head position private int mmarkertopdistance;
  @Override protected void onsizechanged (int w, int h, int oldw, int oldh) {super.onsizechanged (W, H, OLDW, OLDH);
  Initalignviewheight ();
 When the view is displayed, callback//position to the coordinates of the current several draw able, and then draw the initdrawable (); /** * Initialization Gets the view height that needs to be aligned/private void Initalignviewheight () {//get view viewgroup parent = (ViewGroup) to be aligned
  This.getparent ();

  Mneedalignview = Findneedalignview (parent);
   Gets the height of the top of the view distance that needs to be aligned if (Mneedalignview!= null) {mmarkertopdistance = 0;
  Align Mmarkertopdistance + = Calcviewtop (Mneedalignview) + mneedalignview.getmeasuredheight ()/2 with the central point of view that needs to be aligned }/** * loop fetch distance from top/private int calcviewtop (view view) {final ViewGroup Parentview = (viewgroup) view.getpa
  rent ();
  Final int childcount = Parentview.getchildcount ();
  First add paddingtop int topdistance = Parentview.getpaddingtop ();
  for (int i = 0; i < ChildCount i++) {final View Childview = Parentview.getchildat (i); Final Viewgroup.layoutparams params = (viewgroup.layoutparams) childview. Getlayoutparams ();
   Topdistance = Addtopmargin (topdistance, params);
   if (Childview = = view) {return topdistance;
   } topdistance = Addbottommargin (topdistance, params);
  Topdistance + + childview.getmeasuredheight ();
 return topdistance;  /** * Cumulative Bottom margin Height */private int addbottommargin (int topdistance, viewgroup.layoutparams params) {if (params
   instanceof relativelayout.layoutparams) {relativelayout.layoutparams param = (relativelayout.layoutparams) params;
  Topdistance + = Param.bottommargin; } if (params instanceof linearlayout.layoutparams) {linearlayout.layoutparams param = (linearlayout.layoutparams) p
   Arams;
  Topdistance + = Param.bottommargin; } if (params instanceof framelayout.layoutparams) {framelayout.layoutparams param = (FRAMELAYOUT.LAYOUTPARAMS) para
   Ms
  Topdistance + = Param.bottommargin; } if (params instanceof tablelayout.layoutparams) {tablelayout.layoutparams param = (tablelayout.layoutparams) params;
  Topdistance + = Param.bottommargin;
 return topdistance; /** * Cumulative head margin Height * * private int addtopmargin (int topdistance, viewgroup.layoutparams params) {if (params ins
   Tanceof relativelayout.layoutparams) {relativelayout.layoutparams param = (relativelayout.layoutparams) params;
  Topdistance + = Param.topmargin; } if (params instanceof linearlayout.layoutparams) {linearlayout.layoutparams param = (linearlayout.layoutparams) p
   Arams;
  Topdistance + = Param.topmargin; } if (params instanceof framelayout.layoutparams) {framelayout.layoutparams param = (FRAMELAYOUT.LAYOUTPARAMS) para
   Ms
  Topdistance + = Param.topmargin; } if (params instanceof tablelayout.layoutparams) {tablelayout.layoutparams param = (TABLELAYOUT.LAYOUTPARAMS) para
   Ms
  Topdistance + = Param.topmargin;
 return topdistance;

 }

3. When we get the height of the alignment view, we calculate the top line, the middle marker, and the rectangular area that the line below needs to draw, call invalidate () and then draw the three parts in the OnDraw method respectively;

 /** * Initialize draw able/private void initdrawable () {initmarkerbounds ();
  Initlinebounds ();
 Postinvalidate ();
  /** * Initialization when the light bounds/private void initlinebounds () {int height = getheight ();

  Rect bounds = Mmarker.getbounds ();

  int lineleft = Bounds.centerx ()-(mlinesize >> 1);

  if (mbeginline!= null) mbeginline.setbounds (lineleft, 0, Lineleft + mlinesize, bounds.top);
 if (mendline!= null) mendline.setbounds (Lineleft, Bounds.bottom, Lineleft + mlinesize, height);
  }/** * Initialize tag bounds/private void initmarkerbounds () {int pleft = Getpaddingleft ();
  int pright = Getpaddingright ();
  int pbottom = Getpaddingbottom ();

  int ptop = Getpaddingtop ();
  int width = getwidth ();

  int height = getheight ();
  int cwidth = Width-pleft-pright;

  int cheight = Height-ptop-pbottom;

  Mmarkersize = Math.min (Mmarkersize, Math.min (Cwidth, cheight));
  Mmarkertopdistance = MMARKERTOPDISTANCE-MMARKERSIZE/2; if (mmarkermargintOp < 0) {mmarkermargintop = 0; Mmarker.setbounds (Pleft, Mmarkertopdistance + mmarkermargintop, Pleft + mmarkersize, mmarkertopdistance + mMarker
 MarginTop + mmarkersize); @Override protected void OnDraw (Canvas Canvas) {if (Mmarker.getbounds (). Right <= 0) {//if bounds is lost ass
  Ignvalue ();
  } if (Mmarkerstyle!= markerstyle.start_style) {if (mbeginline!= null) mbeginline.draw (canvas);
  } mmarker.draw (canvas);
  if (Mmarkerstyle!= markerstyle.end_style) {if (mendline!= null) mendline.draw (canvas);
  }/** * New assignment/private void Assignvalue () {initalignviewheight ();
  Initmarkerbounds ();
 Initlinebounds ();

 }

4. Obviously we need to show the way is somewhat different, such as the first without the above line its center mark color is not the same, the last one does not have the following line, so we need to provide two methods: SetStyle () set the display style; Setmarker (int Resouceid) Sets the resource for the intermediate tag.

 /**
  * Settings display delimited
  /public
 void SetStyle (MarkerStyle markerstyle) {
  this.mmarkerstyle = MarkerStyle;
  Invalidate ();
 }

 /**
  * Set draw able/public
 void Setmarker (drawable marker) {
  this.mmarker = marker;
  Postinvalidate ();
 }

 /**
  * Set Tag resource
  * 
  * @param resouceid
  *   resource ID
  *
 /public void setmarker (int resouceid) {
  This.mmarker = Getresources (). getdrawable (Resouceid);
  Postinvalidate ();
 }

 /**
  * Time Axis display style */public
 enum MarkerStyle {
  //start First
  Start_style,
  //middle position
  center_ STYLE,
  //Last
  End_style
 }

I hope I'm a little empty, and I'll write down some things I do. On the one hand to exercise their ability to write documents, on the other hand sharing the code also hope to communicate with you about technology, common learning and common progress. Because there are some problems in the development process I will always first find some examples on the Internet for reference, similar code, may not reach the effect or use, no way to build their own wheels.

SOURCE Download Address: Http://xiazai.jb51.net/201611/yuanma/AndroidTimeLine (jb51.net). rar

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.