Android Custom View Implementation Drag selection button _android

This article for you to share the Android implementation drag selection button specific code, for your reference, the specific content as follows

Effect chart

View Code

First step: Custom Properties

 <declare-styleable name= "Dragview" >
  <attr name= "Icon_drag" format= "reference"/>
  <attr "Color_circle" format= "color"/>
  <attr name= "dot_num" format= "integer"/>
 >

Step Two: Customize the Circle

public class Circleview extends View {/** * default color * * Private final int default_color = Color.ltgray;
 /** * Default RADIUS DP */private final float Default_radius = 32;
 private int mcolor;
 Private Paint Mcirclepaint;
 private float Mradius;
 private float Mcenterx;

 private float mcentery;
 Public Circleview {This (context, NULL);
 Public Circleview (context, AttributeSet attrs) {This (context, attrs, 0);
  Public Circleview (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);
  TypedArray array = context.obtainstyledattributes (Attrs, R.styleable.dragview);
  Mcolor = Array.getcolor (R.styleable.dragview_color_circle,default_color);
  Mcirclepaint = new Paint ();

  Mcirclepaint.setcolor (Mcolor); Mcentery = Mcenterx = Mradius = getmeasuredwidth () = = 0?
  Default_radius:getmeasuredwidth ()/2;
 Array.recycle ();
 public float Getradius () {return mradius;
public int GetColor () {return mcolor; } @Override protected void OnDraw (Canvas Canvas) {canvas.drawcircle (mcenterx,mcentery,mradius,mcirclepaint);
 }
}

Step three: custom Drag button

public class Dragview extends Relativelayout implements View.ontouchlistener {private drawable drag icon mdragicon;// Te imageview mdragview;//drag icon imageview private int mcirclecolor;//round color Private context mcontext;//contextual private int Mdotn um;//node number private int mwidth;//component width private int mhight;//component height private int mcircleradius;//garden radius private int Mdragwid th;//Drag the width of the icon private int mlinewidth,mlineheight;//Middle line long width private float mstartx;//start dragging screen coordinates private float mcurx;//start dragging Contact coordinates private float mminx;//Drag range minimum value private float mmaxx;//Drag range maximum private Onnodeselect monnodeselect;//callback interface public
 Dragview {This (context,null);
 Public Dragview (context, AttributeSet attrs) {This (context, attrs,0);
  Public Dragview (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);
  TypedArray array=context.obtainstyledattributes (Attrs, R.styleable.dragview); Mdragicon=array.getdrawable (R.styleable.dragview_icon_dRAG);
  Mcirclecolor=array.getcolor (R.styleable.dragview_color_circle,color.white);
  Mdotnum=array.getint (r.styleable.dragview_dot_num,2);
  Array.recycle ();
  Mcontext=context;
 Initview ();
  /** * View initialization, the purpose of this method is to add all the views, and do some initialization configuration * In fact, you can use the Layoutinflater to load the XML layout file, which is relatively simple * * * public void Initview () {
   for (int i=0;i<mdotnum;i++) {Circleview circleview=new circleview (mcontext);
   Circleview.setontouchlistener (this);
  AddView (Circleview);
  View View=new view (Mcontext);
  View.setbackgroundcolor (Mcirclecolor);

  AddView (view);
  TODO:2016/4/21 top isn't right mdragview=new ImageView (Mcontext);
  Mdragview.setimagedrawable (Mdragicon);
  Mdragview.setontouchlistener (this);
 AddView (Mdragview); /** * This step is mainly to measure, configure the size of each view to facilitate the processing of the following touch events/@Override protected void onmeasure (int widthmeasurespec, int heightm

  Easurespec) {super.onmeasure (Widthmeasurespec, Heightmeasurespec);
  Mwidth=getmeasuredwidth ();

  Mhight=getmeasuredheight (); McircleradiUS=DP2PX (mcontext,32);
  MDRAGWIDTH=DP2PX (mcontext,50);
  Mlinewidth=mwidth-mdragwidth;

  MLINEHEIGHT=MCIRCLERADIUS/2;
  int Count=getchildcount ();
   for (int i=0;i<count;i++) {View view=getchildat (i);
   Linearlayout.layoutparams params;
    if (view instanceof Circleview) {params=new linearlayout.layoutparams (Mcircleradius,mcircleradius);
   View.setlayoutparams (params);
    }else if (view instanceof ImageView) {params=new linearlayout.layoutparams (mdragwidth,mdragwidth);
   View.setlayoutparams (params);
    }else {params=new linearlayout.layoutparams (mlinewidth,mlineheight);
   View.setlayoutparams (params); /** * This step is mainly to place the location of each view, if the layout file is loaded with Layoutinflater, then this step can omit the/@Override protected void OnLayout (Boolea
  n changed, int l, int t, int r, int b) {//Super.onlayout (changed, L, T, R, b);

   if (changed) {int count =getchildcount ();
   int dleft=0;

   int DTOP=MHIGHT/2-MDRAGWIDTH/2;
   int CLEFT=MDRAGWIDTH/2-MCIRCLERADIUS/2; int ctop=DTOP+MDRAGWIDTH/2-MCIRCLERADIUS/2;
   int LLEFT=MDRAGWIDTH/2;


   int LTOP=DTOP+MDRAGWIDTH/2-MLINEHEIGHT/2;
   Mminx=dleft;

   Mmaxx=dleft+mlinewidth;
   int cindex=0;

   int cspace=0;
    for (int i=0;i<count;i++) {View view=getchildat (i);
     if (view instanceof Circleview) {cleft=cleft+cspace;
     View.layout (Cleft,ctop,cleft+mcircleradius,ctop+mcircleradius);
     cindex++;
    Cspace=cindex*mlinewidth;
    }else if (view instanceof ImageView) {view.layout (dleft,dtop,dleft+mdragwidth,dtop+mdragwidth);
    }else {view.layout (lleft,ltop,lleft+mlinewidth,ltop+mlineheight);  /** * Handling of touch events, this is the most important place to customize View * * @Override public boolean Ontouch (View V, motionevent event) {if (v instanceof ImageView)
     {switch (event.getaction ()) {Case MotionEvent.ACTION_DOWN:mStartX = (int) event.getrawx ();
     Mcurx = V.gettranslationx ();//Get the offset of the view v.setpressed (true);

    Break Case MotionEvent.ACTION_MOVE:float x =Mcurx + event.getrawx ()-mstartx;
     if (x >= 0 && x <= mmaxx-mminx) {V.settranslationx (Mcurx + event.getrawx ()-MSTARTX);

    } break;
     Case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:int distance= (int) (EVENT.GETRAWX ()-mstartx); if (distance>0) {if (Math.Abs (distance) >mlinewidth/2) {V.settranslationx (Mcurx + event.getrawx ()-Msta
       RtX);
      Setanim (mlinewidth,1);
       }else {V.settranslationx (Mcurx + event.getrawx ()-MSTARTX);
      Setanim (0,0); }}else if (distance<0) {if (Math.Abs (distance) >mlinewidth/2) {V.settranslationx (Mcurx + event.get
       RAWX ()-MSTARTX);
      Setanim (0,0);
       }else {V.settranslationx (Mcurx + event.getrawx ()-MSTARTX);
      Setanim (mlinewidth,1);
   }} break; }}else if (v instanceof circleview) {switch (event.getaction ()) {Case MotionEvent.ACTION_UP:if (event.get RAWX () >getdisplaywidtH ()/2) {Setanim (mlinewidth,1);
     }else {Setanim (0,0);
   } break;
 } return true; //Set translation animation private void Setanim (float moveX, final int scrollposition) {Objectanimator animator = Objectanimator.off
  Loat (Mdragview, "Translationx", Mdragview.gettranslationx (), MoveX);
  Animator.setduration (300);
  Animator.start ();
  if (monnodeselect!= null) {monnodeselect.onnodeselect (scrollposition);
 } public void Setnodeselectlistener (Onnodeselect onnodeselect) {monnodeselect = Onnodeselect;
 }//Event callback Interface public interface Onnodeselect {void onnodeselect (int position); //DP to px public int dp2px (context context, float Dpvalue) {final float scale = context.getresources (). Getdisplayme
  Trics (). density;
 return (int) (Dpvalue * scale + 0.5f);
  //Get screen width public int getdisplaywidth () {displaymetrics metrics=new displaymetrics ();
  (activity) mcontext). Getwindowmanager (). Getdefaultdisplay (). Getmetrics (metrics); Return Metrics.widthpixels
 }
}

How to use

Layout file:

 <com.pengkv.apple.weight.dragview
  android:id= "@+id/view_drag"
  android:layout_width= "200DP"
  app: icon_drag= "@drawable/ic_drag"
  app:color_circle= "#CCCCCC"
  app:dot_num= "2"
  android:layout_height= " 60DP "/>

Page code:

 dragview= (Dragview) View.findviewbyid (R.id.view_drag);
 Dragview.setnodeselectlistener (New Dragview.onnodeselect () {
  @Override public
  void Onnodeselect (int Position) {
   Toast.maketext (getactivity (), "I chose" +position,toast.length_short). Show ();
 

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.