[ui+ animation] Beauty jigsaw puzzle game development

Refer to the Hon Yang article to achieve: Android Combat Beauty jigsaw puzzle game you can stick to the first part of the drawing section

To implement a custom view, there is a n*n image control. About customizing View,
--Custom View

Our view is not inherited from view, but relativelayout.

Before that, there are two classes to define. Imagepiece class:

Save pictures and picture numbers

public class Imagepiece {public
    int index = 0;
    Public Bitmap Bitmap = null;
}

Imagesplitter class:

Cut the picture into n*n and return to the picture list.

public class Imagesplitter {/** * cut the picture, piece *piece * * @param bitmap * @param piece * @r Eturn */public static list<imagepiece> split (Bitmap Bitmap, int piece) {list<imagepiece> p
        Ieces = new Arraylist<imagepiece> (piece * piece);
        Gets the original picture height width int width = bitmap.getwidth ();
        int height = bitmap.getheight ();

        The width takes the length and width in the short divide by the number of columns int piecewidth = math.min (width, height)/piece; for (int i = 0, i < piece; i++) {for (int j = 0; J < piece; J + +) {imagepiece Imagepiec
                E = new Imagepiece ();

                Imagepiece.index = j + i * piece;

                LOG.E ("TAG", "Imagepiece.index" + (j + i * piece));
                int xValue = J * Piecewidth;

                int yvalue = i * piecewidth;
                Imagepiece.bitmap = Bitmap.createbitmap (Bitmap, XValue, Yvalue, Piecewidth, piecewidth); Pieces.Add (imagepiece);
    }} return pieces; }
}

The key is

Bitmap.createbitmap (Bitmap, XValue, Yvalue,
                        piecewidth, piecewidth);

Import five parameters, from the picture of the first parameter, according to the following four parameters to intercept the picture. Custom View:

1. Inherit relativelayout, initialize variables
2. Three constructors for dip to PX (because the dip is set and the picture uses PX) and the border size.
3. Rewrite the onmeasure to plan the size of the control. First get the original size, load the picture, cut the layout child controls (reorder), return the new size.

public class Gamepintulayout extends Relativelayout {/** * Sets the number of item n*n; default is 2 */private int mcolumn = 3
    ;
    /** * Layout Width */private int mwidth;
    /** * Layout of padding */private int mpadding;
    /** * Store all item */private imageview[] mgamepintuitems;

    /** * Item Width */private int mitemwidth;

    /** * Item horizontal and vertical margins */private int mmargin = 3;
    /** * Picture of the jigsaw * */private Bitmap mbitmap;
    /** * Storage After cutting the picture bean */private list<imagepiece> mitembitmaps;


    Private Boolean once;
    Public Gamepintulayout (Context context) {This (context, NULL);
    } public Gamepintulayout (context context, AttributeSet Attrs) {This (context, attrs, 0); } public Gamepintulayout (context context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle)
       ; Dip turn px mmargin = (int) typedvalue.applydimension (typedvalue.compleX_unit_dip, Mmargin, Getresources (). Getdisplaymetrics ());
                Set the inner margin of the layout, with four sides consistent, set to the minimum value in the Quad padding mpadding = min (Getpaddingleft (), Getpaddingtop (), Getpaddingright (),
    Getpaddingbottom ());
    } public void SetBitmap (Bitmap mbitmap) {this.mbitmap = Mbitmap; } @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {super.onmeasure (width

        Measurespec, Heightmeasurespec);

        Get the game layout side length Mwidth = Math.min (Getmeasuredheight (), Getmeasuredwidth ());
            if (!once) {initbitmap ();
        Inititem ();
        } once = true;
    Setmeasureddimension (Mwidth, mwidth); }/** * Initialize picture */private void Initbitmap () {if (Mbitmap = = null) Mbitmap = Bitmap

        Factory.decoderesource (Getresources (), R.DRAWABLE.AA); /** * Cut the picture into mcolumn*mcolumn parts */mitembitmaps = ImagespLitter.split (Mbitmap, Mcolumn); Collections.sort (Mitembitmaps, New comparator<imagepiece> () {@Override public int compare (I
            Magepiece LHS, imagepiece RHS) {return math.random () > 0.5? 1:-1;
    }
        }); }/** * Initialize item */private void Inititem () {//Get the item width int childwidth = (mwidth-mp
        adding * 2-mmargin * (mColumn-1))/mcolumn;
        Mitemwidth = Childwidth;
        Mgamepintuitems = new Imageview[mcolumn * Mcolumn]; Place item for (int i = 0; i < mgamepintuitems.length; i++) {ImageView item = new ImageView (getcont

            EXT ());

            Item.setonclicklistener (this);
            Item.setimagebitmap (Mitembitmaps.get (i). Bitmap);

            Mgamepintuitems[i] = Item;
            Item.setid (i + 1);

            Item.settag (i + "_" + mitembitmaps.get (i). index); Relativelayout.layoutparams LP = new LayoutparamS (mitemwidth, mitemwidth);
            Set the horizontal margin, not the last column if ((i + 1)% Mcolumn! = 0) {lp.rightmargin = Mmargin;
                        }//If it is not the first column if (i% mcolumn! = 0) {lp.addrule (relativelayout.right_of,//
            Mgamepintuitems[i-1].getid ());
                }//If it is not the first line,//Set the longitudinal margin, not the last line if ((i + 1) > Mcolumn) {lp.topmargin = Mmargin;
            Lp.addrule (relativelayout.below,//Mgamepintuitems[i-mcolumn].getid ());
        } AddView (item, LP); 
        }}/** * Get the minimum value in multivalued * * @param params * @return */private int min (int ... params) {
        int min = params[0];
            for (int param:params) {if (min > param) {min = param;
    }} return min; }
}

Layout reference:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"
    xmlns:tools= "http// Schemas.android.com/tools "
    android:layout_width=" match_parent "
    android:layout_height=" Match_parent "
    android:paddingbottom= "@dimen/activity_vertical_margin"
    android:paddingleft= "@dimen/activity_ Horizontal_margin "
    android:paddingright=" @dimen/activity_horizontal_margin "
    android:paddingtop=" @dimen /activity_vertical_margin "
    tools:context=" com.example.administrator.meinvpinftu.MainActivity ">

    < Com.example.administrator.meinvpinftu.GamePintuLayout
        android:id= "@+id/id_gameview"
        android:layout_ Width= "Fill_parent"
        android:layout_height= "fill_parent"
        android:layout_centerinparent= "true"
        android:padding= "5DP" ></com.example.administrator.meinvpinftu.GamePintuLayout>
</ Relativelayout>

public class Mainactivity extends Appcompatactivity {
    private gamepintulayout mgameview;

    @Override
    protected void onCreate (Bundle savedinstancestate) {
        super.oncreate (savedinstancestate);
        Setcontentview (r.layout.activity_main);
        Mgameview = (gamepintulayout) Findviewbyid (R.id.id_gameview);
    }
}

Effect:
Add Item Click event:

Interface Inheritance:

Implements View.onclicklistener

Interface implementation:

Private ImageView Mfirst;
Private ImageView Msecond;
@Override public
    void OnClick (View v) {
        //If the animation is being performed, the If
        (isaniming) return is masked
            ;
        /**
         * If two clicks is the same
         *
        /if (Mfirst = = v) {
            mfirst.setcolorfilter (null);
            Mfirst = null;
            return;
        }
        Click the first item
        if (Mfirst = = null) {
            Mfirst = (ImageView) v;
            Mfirst.setcolorfilter (Color.parsecolor ("#55FF0000"));
        } else
        //Click on the second item
        {
            Msecond = (ImageView) v;
            Exchangeview ();
        }
    }

Click on two imageview to make a judgment. The Exchange function here sets the animation of the exchange time:

/** * Animation run flag bit */private Boolean isaniming;

    /** * Animation Layer */private relativelayout manimlayout;
        /** * Swap pictures of two item */private void Exchangeview () {mfirst.setcolorfilter (null);
        Setupanimlayout ();
        Add Firstview ImageView first = new ImageView (GetContext ());
        First.setimagebitmap (mitembitmaps. Get (Getimageindexbytag (String) Mfirst.gettag ()). Bitmap);
        Layoutparams LP = new Layoutparams (mitemwidth, mitemwidth);
        Lp.leftmargin = Mfirst.getleft ()-mpadding;
        Lp.topmargin = Mfirst.gettop ()-mpadding;
        FIRST.SETLAYOUTPARAMS (LP);
        Manimlayout.addview (first);
        Add Secondview ImageView second = new ImageView (GetContext ());
        Second.setimagebitmap (mitembitmaps. Get (Getimageindexbytag (String) Msecond.gettag ()). Bitmap);
        Layoutparams LP2 = new Layoutparams (mitemwidth, mitemwidth); Lp2.leftmargin = Msecond. GetLeft ()-mpadding;
        Lp2.topmargin = Msecond.gettop ()-mpadding;
        Second.setlayoutparams (LP2);

        Manimlayout.addview (second); Set animation translateanimation anim = new Translateanimation (0, Msecond.getleft ()-Mfirst.getleft (),
        0, Msecond.gettop ()-mfirst.gettop ());
        Anim.setduration (300);
        Anim.setfillafter (TRUE);

        First.startanimation (ANIM); Translateanimation Animsecond = new Translateanimation (0, Mfirst.getleft ()-Msecond.getleft (), 0, MFirst.
        GetTop ()-msecond.gettop ());
        Animsecond.setduration (300);
        Animsecond.setfillafter (TRUE);
        Second.startanimation (Animsecond); Add Animation listener Anim.setanimationlistener (new Animation.animationlistener () {@Override public
                void Onanimationstart (Animation Animation) {isaniming = true;
                Mfirst.setvisibility (INVISIBLE); Msecond.sEtvisibility (INVISIBLE); } @Override public void Onanimationrepeat (Animation Animation) {} @Ove Rride public void Onanimationend (Animation Animation) {String firsttag = (string) Mfirst.gett
                AG ();

                String Secondtag = (string) msecond.gettag ();
                string[] Firstparams = Firsttag.split ("_");

                string[] Secondparams = Secondtag.split ("_");
                Mfirst.setimagebitmap (Mitembitmaps.get (Integer. parseint (Secondparams[0)). Bitmap);

                Msecond.setimagebitmap (Mitembitmaps.get (Integer. parseint (Firstparams[0)). Bitmap);
                Mfirst.settag (Secondtag);

                Msecond.settag (Firsttag);
                Mfirst.setvisibility (VISIBLE);
                Msecond.setvisibility (VISIBLE);
                Mfirst = Msecond = null;
           Manimlayout.removeallviews ();     Checksuccess ();
            Isaniming = false;

    }
        });
 }

The game is judged successfully. And go to the next level:

Determine if the ID in all Imageviewtag is from 0 to 9 in turn:

/** * Determine if the game is successful */private void Checksuccess () {Boolean issuccess = true;
            for (int i = 0; i < mgamepintuitems.length; i++) {ImageView first = mgamepintuitems[i];
            LOG.E ("TAG", Getindexbytag (String) First.gettag ()) + "");
            if (Getindexbytag (String) First.gettag ())! = i) {issuccess = false;
                    }} if (issuccess) {Toast.maketext (GetContext (), "Success, Level Up!",
            Toast.length_long). Show ();
        Nextlevel ();
        }} public void Nextlevel () {this.removeallviews ();
        Manimlayout = null;
        mcolumn++;
        Initbitmap ();
    Inititem ();
        /** * Get the real index of the picture *f * @param tag * @return */private int getindexbytag (String tag) {
        string[] split = Tag.split ("_");
    Return Integer.parseint (split[1]);
    } private int Getimageindexbytag (String tag) {    string[] split = Tag.split ("_");

    Return Integer.parseint (split[0]); }/** * Create animation layer */private void Setupanimlayout () {if (manimlayout = = null) {MANIML
            Ayout = new Relativelayout (GetContext ());
        AddView (manimlayout); }
    }

The

Above is all the logic of the original author and works perfectly.
Add Pedometer: