Android Review Picture removable order selector (recommended) _android

Long time no write, now in Guangzhou, a company internship, one months, interns nothing to do, see the Company a project. Android and iOS do not do the same thing (iOS has more people to do this project, not the amount of explanation.) The original to do this thing also job-hopping), both iOS to do the control more cool, I have nothing to do, one of the controls and iOS do almost, to see the effect of it

The truncated GIF looks a bit fast, because the CSDN upload image can not exceed two m so the frame is a bit large, the actual effect is normal. Well, let's see how it's done before we can move the exchange order.

Package Com.test.jiupin.view;
Import Android.content.Context;
Import Android.util.AttributeSet;
Import Android.view.View;
Import Android.widget.FrameLayout;
 /** * Created by Liaoyalong on 2016/12/8.   * * public class Addimagegridview extends framelayout{private int width = 0;    Picture wide private int height = 0; Picture high private int space = DP2PX (10);  gap between pictures private int childcount = 0;
  Number of children public addimagegridview (context context) {this (context,null);
  Public Addimagegridview (context, AttributeSet attrs) {This (context, attrs,0); Addimagegridview (context, AttributeSet attrs, int defstyleattr) {Super (context, Attrs, Defstyleatt
    R);
  Init ();
  private void Init () {//amount is not used on} public int getmspace () {return space;
  public int getmwidth () {return width;
  public int getmheight () {//Here I set the width high, so there is no use on return height;
  public void addcammary (view view) {//Add camera, is the first child AddView (view,0); } PublIC void AddView (view view) {//Add sub-Vie controls automatically measure layout ChildCount = Getchildcount ();
    AddView (view,4);
    } else{AddView (View,childcount); }} @Override//most critical protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {childcount = Getch
    Ildcount ();
    int wdwidth = measurespec.getsize (Widthmeasurespec);           width = (wdWidth-3 * space)/4;               The screen is divided into three gaps and four pictures of the width of space + + wdwidth% 4/3;                    Recalculate gap height = width;    The height and width are the same as int childwidthspec = Measurespec.makemeasurespec (width,measurespec.exactly);
    accurate measurement of int childheightspec = Measurespec.makemeasurespec (height,measurespec.exactly);
      for (int i = 0; i < ChildCount i++) {View view = Getchildat (i);
    View.measure (CHILDWIDTHSPEC,CHILDHEIGHTSPEC);
    int wdheight = height; if (ChildCount > 4) {wdheight + = height + SpaCe             
  Up to five are more than four, and the height becomes two-layer} setmeasureddimension (wdwidth,wdheight);  @Override protected void OnLayout (Boolean changed, int left, int. top, int right, int bottom) {for (int i = 0; i < ChildCount;
      i++) {//above we measured ourselves, here we put the position of the control, do not need to tube the value of the original left,top such as View view = Getchildat (i);
      left = 0;
      top = 0;     if (i > 0) {left = i * width + i * spaces;
        Each child corresponds to the location of their own drawing analysis} if (i = = 4) {//second layer left = 0;
      top = height + space;
      right = left + width;
      Bottom = top + height;
    View.layout (Left,top,right,bottom);
  } public int dp2px (int dp) {return (int) (Getresources (). Getdisplaymetrics (). Density * DP +.5); }
}

The

is only 100 line not to, it is easy to understand, if the measurement does not understand, you can see my previous written custom control, inside the. This makes it possible to add a control that can't move a picture. Now it's time to move on, that's what I do. When the picture is more than a second, let the picture hidden, and then add a windowmanager can be customized moveview to display the image of the bitmap, and the image of the touch event also to the added Moveview to deal with, The Moveview is then used to determine if there is a need to swap positions with other pictures. Moveview like I used to put Tencent dragged to the ball, to see the specific bar.

Package Com.test.jiupin.view;
Import Android.content.Context;
Import Android.graphics.Bitmap;
Import Android.graphics.Canvas;
Import Android.graphics.Rect;
Import android.view.MotionEvent;
Import Android.view.View;
 /** * Created by Liaoyalong on 2016/12/12. * * public class Moveview extends view{private Bitmap mbitmap;//Press the 1-second picture of the Bitmap both of the original display is ImageView I have shown them Bitmap with Iv.set (bi    TMAP) private int left;    Relative to the position of the screen, when drawing to use the private int top;   Ditto private int width;   
  Click on the width of the picture of the private int height; private int mstatusbarheight;      Mobile screen status bar height private int wdwidth;     Screen width private int wdheight;      Screen height private int orgtop;
    Click on the picture relative to the screen of the height of the public moveview (context Context,view v,motionevent Event,boolean Is4,int spac) {super (context);    Mbitmap = (Bitmap) v.gettag ();   From the clicked picture that gets bitmap left = (int) (EVENT.GETRAWX ()-event.getx ());
    Relative screen pixel-relative control pixel top = (int) (Event.getrawy ()-event.gety ());
    Orgtop = top;
width = V.getwidth ();    Height = v.getheight ();
    if (IS4) {//second layer orgtop = Orgtop-height-spac;      } mstatusbarheight = Getstatusbarheight ();     Status bar Height wdwidth = getresources (). Getdisplaymetrics (). Widthpixels;
  Wdheight = Getresources (). Getdisplaymetrics (). Heightpixels;
    } @Override protected void OnDraw (Canvas Canvas) {canvas.save ();
    Canvas.translate (0,-mstatusbarheight),/move the status bar height, here do not know how to see my front QQ move ball article if (left < 0) {left = 0;
    }else if (left + width > wdwidth) {//cannot move out of screen left = Wdwidth-width;
    } if (Top < mstatusbarheight) {top = Mstatusbarheight;
    }else if (top + height > wdheight) {top = Wdheight-height;
    } canvas.drawbitmap (Mbitmap,null,new Rect (left,top,left+width,top+height), null);
  Canvas.restore (); @Override public boolean ontouchevent (Motionevent event) {switch (event.getaction ()) {case Motionevent.ac
      Tion_down:break; Case MOTIONEVENT.ACtion_move:left = (int) (EVENT.GETRAWX ()-WIDTH/2);
        The point of the finger is the center point top = (int) (Event.getrawy ()-HEIGHT/2); if (Mondraglistener!= null) {//callback method, returns the center point compared to other pictures mondraglistener.onmove ((int) event.getrawx (), (int) event
        . Getrawy () +MSTATUSBARHEIGHT-ORGTOP-HEIGHT/2);
        } postinvalidate ();
      Break
        Case MotionEvent.ACTION_UP:if (Mondraglistener!= null) {//Trigger vanishing Callback Mondraglistener.ondisappear () when hand is raised;
    } break;
  return true;
    public int getstatusbarheight () {//Get status bar height int result = 0;
    int ResourceID = Getresources (). Getidentifier ("Status_bar_height", "Dimen", "Android");
    if (ResourceID > 0) {result = Getresources (). Getdimensionpixelsize (ResourceID);
  return result;
    public interface ondraglistener{void Ondisappear ();
  void OnMove (int centerx,int centery);
  Private Ondraglistener Mondraglistener; public void Setondraglistener (ondraglisteNER listener) {Mondraglistener = listener; }
}

Well, the note is written very well, here the control is done, to the activity to see the specific control issues, first look at the comparison function

/**
   * should not exchange pictures
   * *
   @param wx  movement back to the center point
   * @param WY *
   @param x   compared to the point
   * @param y
   * @ Param range Comparison Range
   * @return
  /Private Boolean shouldreplace (int wx, int wy, int x, int y, int range) {
   
    boolean flag = false;
    if (wx > X-range && WX < x + range && WY > Y-range && WY < y + range) {
      flag = true;
    }
    return flag;
  }
   

To determine the comparison function is, we also want to change how to compare, my idea is that the previous add view of the Addimagegridview this control, it adds a non-camera view, I put it into a list, Then set the touch event to all the view stored in the list, with an int currentspace record currently being longer than 1 seconds in view in the list position, and the bitmap type Firselect record is long pressed according to the picture bitmap, And then let it hide, when it's time to swap, suppose the swap is J I set the currentspace corresponding view setting bitmap to J's bitmap and let J put the currently displayed bitmap Settag (). And let J-corresponding view hide, and set the Currentspace to J. Amount of ... It is difficult to understand what I am saying is, I also feel good hard to say, look at the code, I try to annotate the details, and so I will also put the complete code download link in the comments area.

private void Initmovelistener () {for (int i = 0; i < mviews.size (); i++) {//mviews Those comments picture final int Fina
      LI = i; Mviews.get (i). Setontouchlistener (New View.ontouchlistener () {@Override public boolean Ontouch (final View V, final motionevent event) {if (Motionevent.action_down = = Event.getaction ()) {downtime = System.       Currenttimemillis (); Time V.getparent (). Requestdisallowintercepttouchevent (true) when pressed;     Request parent control do not intercept touch events} else {spactime = System.currenttimemillis ()-downtime;
          How long to press}//LOG.E ("Test", spactime+ "");   if (!first && spactime > 1000) {//pressed for one second to move curentspace = Finali;
            The current position is at the top = true;  V.setvisibility (view.invisible); Hide the pressed picture if (Mviews.size () < 5) {//Create mobile Picture if (Finali!= 3) {Mmoveview = new Moveview (mainactivity.this, V, event, false,0);
                    else {Mmoveview = new Moveview (mainactivity.this, V, event, true, Maddimagegridview
              . Getmspace ()); } else {if (Finali!= 4) {Mmoveview = new Moveview (mainactivity.this, V, Eve
              NT, FALSE, 0);
                    else {Mmoveview = new Moveview (mainactivity.this, V, event, true, Maddimagegridview
              . Getmspace ()); } mwindowmanager.addview (Mmoveview, mparams);//Add move picture, note Mparams.format = pixelformat.translucent
            ; Fisselect = (Bitmap) v.gettag ();
              Just start by clicking on the selected picture, used for letting go when displayed, Mmoveview.setondraglistener (new Moveview.ondraglistener () {//moveview sliding monitor @Override public void Ondisappear () {//Hand lift if (Mmoveview!= null && Mwindowman Ager!= null) {Mwindowmanager.removeview (Mmoveview);//removing V.setontouchlisteneR (New View.ontouchlistener () {//When it disappears, overwrite the touch event, otherwise you don't need to press a second for the second time @Override public Boolea
                    N Ontouch (View V, motionevent event) {return false;
                  }
                  });
                Mmoveview = null;
                }//LOG.E ("Test", "Curentspace:" +curentspace);
                ImageView IV = (ImageView) mviews.get (curentspace);     Iv.setimagebitmap (Fisselect);
                The first time selected pictures iv.setvisibility (view.visible);        
                Iv.settag (Fisselect);
                i = false;
                Spactime = 0L;
              Initmovelistener (); int width = maddimagegridview.getmwidth ();  Picture width int spc = Maddimagegridview.getmspace (); Gap between pictures @Override public void onmove (int centerx, int centery) {//Back to center point callback F or (int j = 0; J < Mviews.size (); j + +) {//Count the center points of each picture, sequentiallyCompare if (J!= curentspace) {int x = 0;
                    int y = 0; if (Mviews.size () < 5) {if (J < 3) {//center point of the first row x = (j + 2) * width +
                        (j + 1) * SPC-WIDTH/2;
                      y = WIDTH/2; else if (J!= Curentspace && J >= 3) {//second row center point.
                        Picture width High equal x = (j-3) * (width + spc) + WIDTH/2;
                      y = width + spc + width/2;  } else {if (J < 4) {//center point of the first row x = (j + 1) * Width
                        + J * SPC-WIDTH/2;
                      y = WIDTH/2; else if (J!= Curentspace && J >= 4) {//second row center point.
                        Picture width High equal x = (j-4) * (width + spc) + WIDTH/2;
                      y = width + spc + width/2;
              }
                    }      if (Shouldreplace (CenterX, CenterY, X, Y, 70)) {//If you want to swap with view of J position//LOG.E ("Test", "Curre
                      Nspac: "+curentspace +" J: "+j);   Bitmap Bitmap = (Bitmap) mviews.get (j). Gettag ();     Obtain the J-position of bitmap Mviews.get (j). Setvisibility (view.invisible);  View hidden ImageView IV = (ImageView) mviews.get (curentspace) corresponding to the J position;              The original hidden bitmap iv.setimagebitmap (bitmap);           The original hidden View is replaced by J's bitmap iv.setvisibility (view.visible);     Display the original hidden View Iv.settag (bitmap);      If the exchange, the exchange of that hidden, the original hidden display, and the picture set to exchange, but also to keep the tag curentspace = j; The current vacancy is swapped for the location that is hidden, and when you let go, the original bitmap has been saved//LOG.E ("Test", "Currenspac:" +curentspace + "J:" +j
                      ); Break
          Swap stop This Loop}}}); } if (MMOveview!= null) {mmoveview.ontouchevent (event);//Pass the touch event to the move control} return false;
    Also handle the Click event}}); }
  }

The above is a small set to introduce the Android review pictures can move order selector, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!