Android custom view to achieve left and right sliding selection of birth year _android

The third part of the custom view, modeled on the personal birth date of the microblogging movement screen, looks at my chart first:

Support to set the initial year, left and right to choose the year of birth, the corresponding TextView value will also change. This animation effect for a long time, the feeling is still relatively blunt, and micro Bo that still a little different. Everybody has the improvement plan, welcome to exchange together.

Custom View four, this is still the routine, see how to achieve.

1. Customize View Properties:
Create a attrs.xml under res/values/, define our attributes inside, and declare our entire style.

<?xml version= "1.0" encoding= "Utf-8"?>
<resources>
 //custom property name, defining public properties
 <attr name= " Titlesize "format=" Dimension ></attr>
 <attr name= "TitleText" format= "string" ></attr>
 <attr name= "titlecolor" format= "color" ></attr> <attr "name=" Outcirclecolor "
 Color" ></attr>
 <attr name= "incirclecolor" format= "color" ></attr>
 <attr name= "LineColor" format= "Color" ></attr>

 <declare-styleable name= "Myscrollview" >
  <attr name= "Titlesize" ></attr>
  <attr name= "Titlecolor" ></attr>
  <attr name= "LineColor" ></attr >
 </declare-styleable>

</resources>

The font size, font color, line color 3 properties, format is the value type of the property that is defined in turn.
Then we'll declare our custom view in the layout file:

 <textview
  android:id= "@+id/year_txt"
  android:layout_width= "wrap_content"
  android:layout_height= "Wrap_content"
  android:layout_margin= "30DP"
  android:text= "Year of Birth (year)"
  android:textsize= "20DP"/>

 <com.example.tangyangkai.myview.myscrollview
  android:id= "@+id/scroll_view"
  android:layout_ Width= "Match_parent"
  android:layout_height= "70DP"
  myscroll:linecolor= "@color/font_text"
  Myscroll:titlecolor= "@color/strong"
  myscroll:titlesize= "30DP" >
 </ Com.example.tangyangkai.myview.myscrollview>

Custom View Properties We can set it ourselves, remember to finally introduce our namespaces,
xmlns:app= "Http://schemas.Android.com/apk/res-auto"

2. Get the properties of the custom view:

 Public Myscrollview {This (context, NULL);
 Public Myscrollview (context, AttributeSet attrs) {This (context, attrs, 0); Public Myscrollview (final context, AttributeSet attrs, int defstyleattr) {Super (context, Attrs, Defstyleatt
  R); Get our Custom style properties TypedArray array = Context.gettheme (). Obtainstyledattributes (Attrs, R.styleable.myscrollview,
  defstyleattr, 0);
  int n = array.getindexcount ();
   for (int i = 0; i < n; i++) {int attr = Array.getindex (i); Switch (attr) {case R.styleable.myscrollview_linecolor://Default color set to Black LineColor = Array.getcolor (attr, color .
     Black);
    Break
     Case R.styleable.myscrollview_titlecolor:textcolor = Array.getcolor (attr, Color.Black);
    Break Case R.styleable.myscrollview_titlesize://The default setting is 16sp,typevalue can also convert sp to px textsize = Array.getdimensionpixelsiz E (attr, (int) typedvalue.applydimension (typedvalue.complex_unit_sp, Getresources (). GetdisplaYmetrics ()));

   Break
  } array.recycle ();
 Init ();
  private void Init () {//Initialize Mpaint = new Paint ();
  Mpaint.setantialias (TRUE);
  Mbound = new Rect ();
  Mtxtbound = new Rect ();
  Bigtxtsize = Textsize;
  Onesize = textSize-15;
 Thirdsize = textSize-15;

 }

Custom view generally requires the implementation of three construction methods, the three constructs are one layer of the call layer, is a progressive relationship. Therefore, we only need to get the view property in the last constructor and do some necessary initialization. Try not to instantiate objects in the process of OnDraw, because this is a process of frequent repetition, new is the need to allocate memory space, if in a frequent repetition of the process of a large number of new objects will cause memory waste.

3. Rewrite the Onmesure method to determine the view size:

The previous custom view article introduced in detail, here is not repeated, focusing on the OnDraw method:
Android Custom view imitation Micro Bo motion integral animation effect

4. Rewrite the OnDraw method for painting:

Previously said for more complex custom view, before rewriting the OnDraw method, first in the draft text will be roughly the appearance of the picture, coordinates, starting point can be simply labeled. This method is very practical, the idea is very clear.

The position of point A is the initial position where the number is drawn, and the position of Point B is the starting position of the vertical line. Ok these two initial positions, we just write a loop, find the law, in turn, draw the following lines and words can be. Because of the event handling involving left and right sliding, the knowledge of the Android event distribution is required to be processed.

 @Override Public
 Boolean dispatchtouchevent (motionevent ev) {

  int action = Ev.getaction ();
  int x = (int) ev.getx ();
  int y = (int) ev.gety ();
  Switch (action) {case
   motionevent.action_down:
    xdown = x;
    Ydown = y;
    break;
   Case Motionevent.action_move:
    xmove = x;
    Ymove = y;
    DX = Xmove-xdown;
    int dy = Ymove-ydown;
    If sliding from left to right if
    (Xmove > Xdown && math.abs (dx) > Mtouchslop * 2 && math.abs (dy) < Mtouchslop) {state
     = 1;
    }
    If you are sliding from right to left if
    (Xmove < Xdown && math.abs (dx) > Mtouchslop * 2 && math.abs (dy) < Mtouchslop) {state
     = 2;

    }
    break;
   Case MOTIONEVENT.ACTION_UP: Break
    ;
  }
  return super.dispatchtouchevent (EV);
 }

Rewrite view's Dispatchtouchevent method to differentiate between left and right slides, Mtouchslop is the Android default sliding minimum distance, and if the horizontal slide is greater than the distance in the vertical direction, the horizontal slide is judged. In order not to let the slide so obvious, I let the horizontal sliding distance is greater than the default distance of twice times to determine the left and right sliding. State is the status of the record slide.

 

 @Override public boolean ontouchevent (motionevent ev) {int action = Ev.getaction ()
  ;
   Switch (action) {case MotionEvent.ACTION_DOWN:break; Case MotionEvent.ACTION_MOVE:if (state = = 1 && bigtxtsize-onesize > -15) {bigtxtsize = Bigtxtsize
     -1;
     Onesize = onesize + 1;
    Postinvalidate ();
     } if (state = = 2 && bigtxtsize-thirdsize > -15) {bigtxtsize = bigTxtSize-1;
     Thirdsize = thirdsize + 1;
    Postinvalidate ();
   } break;
     Case MotionEvent.ACTION_UP:if (state = = 1) {size = size-1;
     Bigtxtsize = Textsize;
     Onesize = textSize-15;
     Postinvalidate (); Listener.
     Onscroll (size);
    state = 0;
     } if (state = = 2) {size = size + 1;
     Bigtxtsize = Textsize;
     Thirdsize = textSize-15;
     Postinvalidate (); Listener.
     Onscroll (size);
    state = 0;
  } break;
 return true; }

Rewrite the view's Ontouchevent method to handle the view's click event.
(1) in the demo dynamic diagram, in the process of sliding left and right, the middle number will change from big to small, the number of the left and right will be large, bigtxtsize represents the middle number size, onesize represents the size of the second number from the left to the next, and the thirdsize represents the size of the fourth number from the left. In the sliding process, the postinvalidate () method is used to invoke the OnDraw method to redraw the image to achieve the change of the digital size.
(2) After the sliding end of the judge, if it is sliding from left to right, the number will be reduced by one, if it is to slide from right to left, the number will be added one. Finally, the number size and sliding state are restored to the default values.
(3) Finally, be sure to return true to indicate consumption of the current sliding event, or slide no response

The slide operation has been fully processed and the next step is to draw:

 @Override protected void OnDraw (Canvas Canvas) {txtsize = size-2;
  BigText = string.valueof (size);
  Smalltext = string.valueof (txtsize);
  Mpaint.setcolor (LineColor);
  Canvas.drawline (0, 0, getwidth (), 0, Mpaint);
  Canvas.drawline (0, GetHeight (), getwidth (), GetHeight (), mpaint);
  LineX = GetWidth ()/10;
    for (int i = 0; i < 5; i++) {if (i = = 2) {mpaint.settextsize (bigtxtsize);
     if (bigtxtsize = = textSize-15) {mpaint.setcolor (LineColor);
    Canvas.drawline (LineX, 0, LineX, getheight ()/5, mpaint);
     else {mpaint.setcolor (textcolor);
    Canvas.drawline (LineX, 0, LineX, getheight ()/3, mpaint);
    } mpaint.gettextbounds (BigText, 0, Bigtext.length (), mbound);
   Canvas.drawtext (BigText, Linex-mbound.width ()/2, GetHeight ()/2 + mbound.height () * 3/4, Mpaint);
    else if (i = = 0 | | i = = 4) {mpaint.setcolor (LineColor);
    Mpaint.settextsize (textSize-15); Mpaint.gettextbounds (smalltext, 0, Smalltext.length (), mTxTbound);
    Canvas.drawline (LineX, 0, LineX, getheight ()/5, mpaint); Canvas.drawtext (String.valueof (txtsize), Linex-mtxtbound.width ()/2, GetHeight ()/2 + mtxtbound.height () * 3/4, MPai
   NT);
    else if (i = = 1) {mpaint.settextsize (onesize);
     if (onesize = = textsize) {mpaint.setcolor (textcolor);
    Canvas.drawline (LineX, 0, LineX, getheight ()/3, mpaint);
     else {mpaint.setcolor (linecolor);
    Canvas.drawline (LineX, 0, LineX, getheight ()/5, mpaint);
    } mpaint.gettextbounds (Smalltext, 0, Smalltext.length (), mtxtbound); Canvas.drawtext (String.valueof (txtsize), Linex-mtxtbound.width ()/2, GetHeight ()/2 + mtxtbound.height () * 3/4, MPai
   NT);
    else {mpaint.settextsize (thirdsize);
     if (thirdsize = = textsize) {mpaint.setcolor (textcolor);

    Canvas.drawline (LineX, 0, LineX, getheight ()/3, mpaint);
     else {mpaint.setcolor (linecolor);
    Canvas.drawline (LineX, 0, LineX, getheight ()/5, mpaint);
}    Mpaint.gettextbounds (smalltext, 0, Smalltext.length (), mtxtbound); Canvas.drawtext (String.valueof (txtsize), Linex-mtxtbound.width ()/2, GetHeight ()/2 + mtxtbound.height () * 3/4, MPai
   NT);
   } txtsize++;
  LineX + + getwidth ()/5;

 }

 }

Here is actually to get the number of sliding operation size, and then to draw, and finally the number of each one, Linex is the initial position of point B, plus one-fifth of the width each time.

5. Get the current set value
You can see that the TextView on view will also change with the values set below, so here we need to deal with it separately. Interface callback, simple and violent way.

In ontouchevent case motionevent.action_up, you get the last set of values

Listener. Onscroll (size);

Then there is the corresponding activity:

public class Secondactivity extends Appcompatactivity implements Myscrollview.onscrolllistener {

 private Myscrollview ScrollView;
 Private TextView txt;

 @Override
 protected void onCreate (Bundle savedinstancestate) {
  super.oncreate (savedinstancestate);
  Setcontentview (R.layout.activity_second);
  Initview ();
 }

 private void Initview () {
  ScrollView = (myscrollview) Findviewbyid (R.id.scroll_view);
  Scrollview.setsize (1992);
  Scrollview.setlistener (this);
  txt = (TextView) Findviewbyid (r.id.year_txt);
  Txt.settext ("Year of Birth" + scrollview.getsize () + "(year)");
 }

 @Override public
 void onscroll (int size) {
  Txt.settext ("Year of birth" + Size + (year));
 }

The method that implements the interface, initializes, sets the initial value, and then updates the data in the method of the interface.

Custom View First: Android Custom view implementation BMI refers to several

Custom View Second: Android Custom view imitation micro-blog motion Integral animation effect

OK, Next Custom View goodbye.

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.