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.