WP8 development of Imitation win8 magnetic paste interface and functional source code examples

Recently saw someone put Win8 interface effect, search two, A is just imitation interface without special effects, the other is a custom component can achieve reverse effect, today, analyze these two types of interface.

Imitation Win8 interface

Win8 Magnetic paste similar to the nine Sudoku effect, to achieve this effect basically there are three ways to achieve: LinearLayout, the use of its attributes layout_weight to achieve equal; Tablelayout, the person who has done the calculator may have used this, or can achieve it, There is a GridView, the implementation of their own adapters, I found the Imitation Win8 interface using LinearLayout to achieve, linearlayout layer nesting, this way is not advocated, because the nesting too much, we look at the interface effect:


Let's look at the interface source:

<?xml version= "1.0" encoding= "Utf-8"?>
<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"
android:orientation= "Horizontal"
android:paddingtop= "30DP"
Android:paddingbottom= "30DP"
android:paddingleft= "20DP"
Android:baselinealigned= "false"
android:background= "@drawable/ROOTBLOCK_DEFAULT_BG"
>
<linearlayout
Android:layout_width= "Wrap_content"
android:layout_height= "Fill_parent"
android:orientation= "Vertical"
android:layout_weight= "1" >
<linearlayout
Android:layout_width= "Fill_parent"
android:layout_height= "Wrap_content"
android:orientation= "Horizontal" >
<linearlayout
Android:layout_width= "108DP"
android:layout_height= "108DP"
android:background= "#FF7F24" >
</LinearLayout>
<linearlayout
Android:layout_width= "108DP"
android:layout_height= "108DP"
android:layout_marginleft= "5DP"
android:background= "#FF7F24" >
</LinearLayout>
</LinearLayout>

<linearlayout
Android:layout_width= "Fill_parent"
android:layout_height= "Wrap_content"
android:layout_margintop= "5DP"
android:orientation= "Horizontal" >
<linearlayout
Android:layout_width= "108DP"
android:layout_height= "108DP"
android:background= "#3399ff" >
</LinearLayout>
<linearlayout
Android:layout_width= "108DP"
android:layout_height= "108DP"
android:layout_marginleft= "5DP"
android:background= "#3399ff" >
</LinearLayout>
</LinearLayout>

<linearlayout
Android:layout_width= "Fill_parent"
android:layout_height= "Wrap_content"
android:layout_margintop= "5DP"
android:orientation= "Horizontal" >
<linearlayout
Android:layout_width= "108DP"
android:layout_height= "108DP"
android:background= "#3399ff" >
</LinearLayout>
<linearlayout
Android:layout_width= "108DP"
android:layout_height= "108DP"
android:layout_marginleft= "5DP"
android:background= "#3399ff" >
</LinearLayout>
</LinearLayout>
<linearlayout
Android:layout_width= "Fill_parent"
android:layout_height= "Wrap_content"
android:layout_margintop= "5DP"
android:orientation= "Horizontal" >

<linearlayout
Android:layout_width= "108DP"
android:layout_height= "108DP"
android:background= "#953399ff" >
</LinearLayout>

<linearlayout
Android:layout_width= "108DP"
android:layout_height= "108DP"
android:layout_marginleft= "5DP"
android:background= "#953399ff" >
</LinearLayout>
</LinearLayout>

</LinearLayout>
<linearlayout
Android:layout_width= "Wrap_content"
android:layout_height= "Fill_parent"
android:orientation= "Vertical"
android:layout_weight= "1" >
<relativelayout
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"
>
<linearlayout
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
android:orientation= "Vertical"
Android:layout_alignparentbottom= "true" >
<imageview
Android:id= "@+id/download_btn"
Android:layout_width= "36DP"
android:layout_height= "36DP"
android:src= "@drawable/rootblock_icon_download_bg"/>
<imageview
Android:id= "@+id/download_btn"
Android:layout_width= "36DP"
android:layout_height= "36DP"
android:layout_margintop= "20DP"
android:src= "@drawable/rootblock_icon_clear_bg"/>
<imageview
Android:id= "@+id/download_btn"
Android:layout_width= "36DP"
android:layout_height= "36DP"
android:layout_margintop= "20DP"
android:src= "@drawable/rootblock_icon_set_bg"/>
<imageview
Android:id= "@+id/download_btn"
Android:layout_width= "36DP"
android:layout_height= "36DP"
android:layout_margintop= "20DP"
android:src= "@drawable/rootblock_icon_add_bg"/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

From the source view, divided the left and right two parts, the left side of the use of linearlayout for nesting, but its width and height are 108dp, fixed the bad, if it is in the pad above the interface is not very harmonious, it is necessary to write a few sets of layout to achieve.
I rewrote and changed the code as follows:

<?xml version= "1.0" encoding= "Utf-8"?>
<relativelayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:background= "@drawable/ROOTBLOCK_DEFAULT_BG"
Android:paddingbottom= "30DP"
android:paddingleft= "20DP"
android:paddingtop= "30DP" >

<linearlayout
Android:id= "@+id/right"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
Android:layout_alignparentbottom= "true"
Android:layout_alignparentright= "true"
android:orientation= "Vertical"
android:paddingleft= "20dip"
android:paddingright= "20dip" >

<imageview
Android:layout_width= "36DP"
android:layout_height= "36DP"
android:contentdescription= "@string/app_name"
android:src= "@drawable/rootblock_icon_download_bg"/>

<imageview
Android:layout_width= "36DP"
android:layout_height= "36DP"
android:layout_margintop= "20DP"
android:contentdescription= "@string/app_name"
android:src= "@drawable/rootblock_icon_clear_bg"/>

<imageview
Android:layout_width= "36DP"
android:layout_height= "36DP"
android:layout_margintop= "20DP"
android:contentdescription= "@string/app_name"
android:src= "@drawable/rootblock_icon_set_bg"/>

<imageview
Android:layout_width= "36DP"
android:layout_height= "36DP"
android:layout_margintop= "20DP"
android:contentdescription= "@string/app_name"
android:src= "@drawable/rootblock_icon_add_bg"/>
</LinearLayout>

<linearlayout
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:layout_toleftof= "@id/right"
android:orientation= "Vertical" >

<linearlayout
Android:layout_width= "Match_parent"
android:layout_height= "0dip"
android:layout_weight= "1"
Android:baselinealigned= "false"
android:orientation= "Horizontal" >

<linearlayout
Android:layout_width= "0dip"
android:layout_height= "Match_parent"
android:layout_weight= "1"
android:background= "#FF7F24" >
</LinearLayout>

<linearlayout
Android:layout_width= "0dip"
android:layout_height= "Match_parent"
android:layout_marginleft= "5DP"
android:layout_weight= "1"
android:background= "#FF7F24" >
</LinearLayout>
</LinearLayout>

<linearlayout
Android:layout_width= "Match_parent"
android:layout_height= "0dip"
android:layout_margintop= "5DP"
android:layout_weight= "1"
android:orientation= "Horizontal" >

<linearlayout
Android:layout_width= "0dip"
android:layout_height= "Match_parent"
android:layout_weight= "1"
android:background= "#3399ff" >
</LinearLayout>

<linearlayout
Android:layout_width= "0dip"
android:layout_height= "Match_parent"
android:layout_marginleft= "5DP"
android:layout_weight= "1"
android:background= "#3399ff" >
</LinearLayout>
</LinearLayout>

<linearlayout
Android:layout_width= "Match_parent"
android:layout_height= "0dip"
android:layout_margintop= "5DP"
android:layout_weight= "1"
Android:baselinealigned= "false"
android:orientation= "Horizontal" >

<linearlayout
Android:layout_width= "0dip"
android:layout_height= "Match_parent"
android:layout_weight= "1"
android:background= "#3399ff" >
</LinearLayout>

<linearlayout
Android:layout_width= "0dip"
android:layout_height= "Match_parent"
android:layout_marginleft= "5DP"
android:layout_weight= "1"
android:background= "#3399ff" >
</LinearLayout>
</LinearLayout>

<linearlayout
Android:layout_width= "Match_parent"
android:layout_height= "0dip"
android:layout_margintop= "5DP"
android:layout_weight= "1"
Android:baselinealigned= "false"
android:orientation= "Horizontal" >

<linearlayout
Android:layout_width= "0dip"
android:layout_height= "Match_parent"
android:layout_weight= "1"
android:background= "#953399ff" >
</LinearLayout>

<linearlayout
Android:layout_width= "0dip"
android:layout_height= "Match_parent"
android:layout_marginleft= "5DP"
android:layout_weight= "1"
android:background= "#953399ff" >
</LinearLayout>
</LinearLayout>

<linearlayout
Android:layout_width= "Match_parent"
android:layout_height= "0dip"
android:layout_margintop= "5DP"
android:layout_weight= "1"
Android:baselinealigned= "false"
android:orientation= "Horizontal" >
</LinearLayout>
</LinearLayout>

</RelativeLayout>

The way to do this is to layout_weight nesting, although this approach is not officially advocated, but it can be very good adaptability.

Custom, the implementation of the Imitation Win8 magnetic paste function I found the source code effect is very beautiful, custom components through the inheritance of ImageView to achieve, because ImageView itself is to use the Matix zoom and rotation function, the disadvantage is only to put pictures, So if you use this source code you have to the main interface of the module layout in the form of pictures to show, below to see the implementation of its effect:

The realization principle is very simple, the function divides into the scale and the rotation, when clicks the middle area realizes the scale, clicks the two sides realizes the rotation, this can according to the component width and the height as well as clicks the position to judge, the source code is as follows:

Package Com.ljp.ani;

Import Android.annotation.SuppressLint;
Import Android.content.Context;
Import Android.graphics.Camera;
Import Android.graphics.Canvas;
Import Android.graphics.Matrix;
Import Android.graphics.Paint;
Import Android.graphics.PaintFlagsDrawFilter;
Import android.graphics.drawable.BitmapDrawable;
Import android.graphics.drawable.Drawable;
Import Android.os.Handler;
Import Android.os.Message;
Import Android.util.AttributeSet;
Import android.view.MotionEvent;
Import Android.widget.ImageView;

@SuppressLint ("Handlerleak")
public class Magnetview extends ImageView {

Private Boolean onanimation = true;
private int rotatedegree = 10;
private Paintflagsdrawfilter filter;

Private Boolean Isfirst = true;
private float Minscale = 0.95f;
private int vwidth;
private int vheight;
Private Boolean Isfinish = True, Isactionmove = False, Isscale = false;
Private Camera Camera;

Boolean xbigy = false;
float Rolatex = 0;
float Rolatey = 0;

Onviewclick onclick = null;

Public Magnetview {
Super (context);
Camera = new camera ();
Filter = new Paintflagsdrawfilter (0, Paint.anti_alias_flag
| Paint.filter_bitmap_flag);
}

Public Magnetview (context context, AttributeSet Attrs) {
Super (context, attrs);
Camera = new camera ();
Filter = new Paintflagsdrawfilter (0, Paint.anti_alias_flag
| Paint.filter_bitmap_flag);
}

public void Setanimationonoff (Boolean oo) {
Onanimation = oo;
}

public void Setonclickintent (Onviewclick onclick) {
This.onclick = onclick;
}

@Override
protected void OnDraw (Canvas Canvas) {
Super.ondraw (canvas);
if (Isfirst) {
Isfirst = false;
Init ();
}
Canvas.setdrawfilter (filter);
}

public void init () {
Vwidth = GetWidth ()-Getpaddingleft ()-getpaddingright ();
Vheight = GetHeight ()-Getpaddingtop ()-Getpaddingbottom ();
drawable drawable = getdrawable ();
bitmapdrawable BD = (bitmapdrawable) drawable;
Bd.setantialias (TRUE);
}

@Override
public boolean ontouchevent (Motionevent event) {
Super.ontouchevent (event);
if (!onanimation)
return true;

Switch (event.getaction () & Motionevent.action_mask) {
Case Motionevent.action_down:
float X = Event.getx ();
float Y = event.gety ();
Rolatex = VWIDTH/2-X;
Rolatey = VHEIGHT/2-Y;
Xbigy = Math.Abs (Rolatex) > Math.Abs (rolatey)? True:false;

Isscale = X > Vwidth/3 && X < Vwidth * 2/3 && Y > VHEIGHT/3
&& Y < Vheight * 2/3;
Isactionmove = false;

if (Isscale) {
Handler.sendemptymessage (1);
} else {
Rolatehandler.sendemptymessage (1);
}
Break
Case Motionevent.action_move:
float x = Event.getx ();
Float y = event.gety ();
if (x > Vwidth | | | y > Vheight | | x < 0 | | Y < 0) {
Isactionmove = true;
} else {
Isactionmove = false;
}

Break
Case MOTIONEVENT.ACTION_UP:
if (Isscale) {
Handler.sendemptymessage (6);
} else {
Rolatehandler.sendemptymessage (6);
}
Break
}
return true;
}

Public interface Onviewclick {
public void OnClick ();
}

Private Handler Rolatehandler = new Handler () {
Private Matrix matrix = new Matrix ();
Private float count = 0;

@Override
public void Handlemessage (msg) {
Super.handlemessage (msg);
Matrix.set (Getimagematrix ());
Switch (msg.what) {
Case 1:
Count = 0;
Beginrolate (Matrix, (Xbigy count:0), (Xbigy. 0:count));
Rolatehandler.sendemptymessage (2);
Break
Case 2:
Beginrolate (Matrix, (Xbigy count:0), (Xbigy. 0:count));
if (Count < Getdegree ()) {
Rolatehandler.sendemptymessage (2);
} else {
Isfinish = true;
}
count++;
count++;
Break
Case 3:
Beginrolate (Matrix, (Xbigy count:0), (Xbigy. 0:count));
if (Count > 0) {
Rolatehandler.sendemptymessage (3);
} else {
Isfinish = true;
if (!isactionmove && onclick!= null) {
Onclick.onclick ();
}
}
count--;
count--;
Break
Case 6:
Count = Getdegree ();
Beginrolate (Matrix, (Xbigy count:0), (Xbigy. 0:count));
Rolatehandler.sendemptymessage (3);
Break
}
}
};

Private synchronized void beginrolate (Matrix matrix, float Rolatex,
Float Rolatey) {
int scaleX = (int) (vwidth * 0.5f);
int scaleY = (int) (vheight * 0.5f);
Camera.save ();
Camera.rotatex (Rolatey > 0 Rolatey:-rolatey);
Camera.rotatey (Rolatex < 0 Rolatex:-rolatex);
Camera.getmatrix (matrix);
Camera.restore ();
Control center Point
if (Rolatex > 0 && rolatex!= 0) {
Matrix.pretranslate (-vwidth,-scaley);
Matrix.posttranslate (Vwidth, ScaleY);
else if (Rolatey > 0 && rolatey!= 0) {
Matrix.pretranslate (-scalex,-vheight);
Matrix.posttranslate (ScaleX, vheight);
else if (Rolatex < 0 && Rolatex!= 0) {
Matrix.pretranslate ( -0,-scaley);
Matrix.posttranslate (0, ScaleY);
else if (Rolatey < 0 && rolatey!= 0) {
Matrix.pretranslate (-scalex,-0);
Matrix.posttranslate (ScaleX, 0);
}
Setimagematrix (matrix);
}

Private Handler Handler = new Handler () {
Private Matrix matrix = new Matrix ();
private float S;
int count = 0;

@Override
public void Handlemessage (msg) {
Super.handlemessage (msg);
Matrix.set (Getimagematrix ());
Switch (msg.what) {
Case 1:
if (!isfinish) {
Return
} else {
Isfinish = false;
Count = 0;
s = (float) math.sqrt (math.sqrt (Minscale));
Beginscale (Matrix, s);
Handler.sendemptymessage (2);
}
Break
Case 2:
Beginscale (Matrix, s);
if (Count < 4) {
Handler.sendemptymessage (2);
} else {
Isfinish = true;
if (!isactionmove && onclick!= null) {
Onclick.onclick ();
}
}
count++;
Break
Case 6:
if (!isfinish) {
Handler.sendemptymessage (6);
} else {
Isfinish = false;
Count = 0;
s = (float) math.sqrt (math.sqrt (1.0f/minscale));
Beginscale (Matrix, s);
Handler.sendemptymessage (2);
}
Break
}
}
};

Private synchronized void Beginscale (matrix matrix, float scale) {
int scaleX = (int) (vwidth * 0.5f);
int scaleY = (int) (vheight * 0.5f);
Matrix.postscale (scale, scale, ScaleX, ScaleY);
Setimagematrix (matrix);
}

public int Getdegree () {
return rotatedegree;
}

public void Setdegree (int degree) {
Rotatedegree = degree;
}

public float Getscale () {
return minscale;
}

public void Setscale (float scale) {
Minscale = scale;
}
}


Layout code:

<?xml version= "1.0" encoding= "Utf-8"?>
<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"
android:background= "@drawable/bkg_img_default"
android:gravity= "Center"
android:orientation= "Vertical" >

<linearlayout
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
android:orientation= "Vertical" >

<linearlayout
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
android:orientation= "Horizontal" >

<linearlayout
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
android:orientation= "Vertical" >

<com.ljp.ani.magnetview
Android:id= "@+id/c_joke"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
Android:layout_margin= "2DP"
Android:scaletype= "Matrix"
android:src= "@drawable/left_top"/>

<com.ljp.ani.magnetview
Android:id= "@+id/c_idea"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
Android:layout_margin= "2DP"
Android:scaletype= "Matrix"
android:src= "@drawable/left_bottom"/>
</LinearLayout>

<com.ljp.ani.magnetview
Android:id= "@+id/c_constellation"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
Android:layout_margin= "2DP"
Android:scaletype= "Matrix"
android:src= "@drawable/right"/>
</LinearLayout>

<com.ljp.ani.magnetview
Android:id= "@+id/c_recommend"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
Android:layout_margin= "2DP"
Android:scaletype= "Matrix"
android:src= "@drawable/bottom"/>
</LinearLayout>

</LinearLayout>

In fact, the layout is the same as the first case, but the component changed to its own definition of components, more than just the custom component of the Click Effect.