Android Imitation Win8 's UI interface (top) _android

Source: Internet
Author: User
Tags message queue

Mobile phone Download Some app, found that now the main interface of imitation win8 more and more, in everyone accustomed to the class GridView or Class tab, give a refreshing feeling. Today on the EoE accidentally found that someone has achieved the function of the source code (address: http://www.eoeandroid.com/forum.php?mod=viewthread&tid=327557), immediately download ran a bit, the effect is very cool, But some bugs, such as the image being magnified when the click is very fast, and the click will trigger two click events.

This example is based on the realization of the great God in EoE, making some simplification and bug fixes.

Effect:

First, popularize a small knowledge point :

We sometimes need a slow gradient in the project, for example: the width of the control increases in a certain proportion and then reverts to the original length in the same proportion.

Package com.zhy._01;

public class Test2
{public
 static void Main (string[] args)
 {
 float val = 1; 
 float s = 0.85f;
 int i = 0;
 s = (float) math.sqrt (1/s);    System.out.println (val);
 while (I < 5)
 {
 val = val *s;
 System.out.println (val);
 i++;
 }
 s = 0.85f;
 i = 0;
 s = (float) math.sqrt (s);
 while (I < 5)
 {
 val = val *s;
 System.out.println (val);
 i++
 }}

 }


Output results:

1.0
1.0846523
1.1764706
1.2760615
1.384083
1.5012488
1.384083
1.2760615
1.1764706
1.0846523
1.0

It is perfect, basically is a symmetrical gradient data, the amplitude of the gradient by the code in the S feel, the closer 1 amplitude is smaller, vice versa.

Okay, here's the start code:

1. layout file

<?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=" w Rap_content "android:layout_height=" wrap_content "android:orientation=" vertical "> <linearlayout android:l Ayout_width= "Wrap_content" android:layout_height= "wrap_content" android:orientation= "Horizontal" > <Linear  Layout android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:orientation= "vertical" > <com.ljp.ani01.myimageview android:id= "@+id/c_joke" android:layout_width= "Wrap_content" Andro id:layout_height= "Wrap_content" android:layout_margin= "2DP" android:scaletype= "Matrix" android:src= "@drawab Le/left_top "/> <com.ljp.ani01.MyImageView android:id= "@+id/c_idea" android:layout_width= "wrap_content" android:layout_height= "Wrap_cont" Ent "android:layout_margin=" 2DP "android:scaletype=" Matrix "android:src=" @drawable/left_bottom "/> &L t;/linearlayout> <com.ljp.ani01.myimageview android:id= "@+id/c_constellation" android:layout_width= "wrap" _content "android:layout_height=" wrap_content "android:layout_margin=" 2DP "android:scaletype=" Matrix "Andr
   oid:src= "@drawable/right"/> </LinearLayout> <com.ljp.ani01.myimageview android:id= "@+id/c_recommend" Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_margin= "2DP" android:s

 Caletype= "Matrix" android:src= "@drawable/bottom"/> </LinearLayout> </LinearLayout>

Layout file, completed the above effect chart static effect, if you do not need to add a click Animation, or only need a very simple click effect, then you have finished writing the menu, and then add a Backgroud custom click Effect on the good. Of course, we have a softer click animation here, with a custom ImageView finish.

2, Myimageview.java

Package com.ljp.ani01;
Import Android.content.Context;
Import Android.graphics.Matrix;
Import android.graphics.drawable.BitmapDrawable;
Import android.graphics.drawable.Drawable;
Import Android.os.Handler;
Import Android.util.AttributeSet;
Import Android.util.Log;
Import android.view.MotionEvent;

Import Android.widget.ImageView;

 public class Myimageview extends ImageView {private static final String TAG = "Myimageview";
 private static final int scale_reduce_init = 0;
 private static final int scaling = 1;

 private static final int scale_add_init = 6;
 /** * Control of the wide * * private int mwidth;
 /** * Control of the high * * private int mheight;
 /** * Control of the wide 1/2 * * private int mcenterwidth;
 /** * Control of the high 1/2 * * private int mcenterheight;
 /** * Set a Zoom constant * * Private float Mminscale = 0.85f;

 /** * Zoom is closed/private Boolean isfinish = true;
 Public Myimageview {This (context, NULL); Public Myimageview (context, AttributeSet attrs) {This (context, attrs, 0);
 Public Myimageview (context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle); /** * Necessary initialization/@Override protected void OnLayout (Boolean changed, int left, int top, int right, int bottom) {s
 Uper.onlayout (changed, left, top, right, bottom);
 if (changed) {mwidth = GetWidth ()-Getpaddingleft ()-getpaddingright ();

 Mheight = GetHeight ()-Getpaddingtop ()-Getpaddingbottom ();
 Mcenterwidth = MWIDTH/2;

 Mcenterheight = MHEIGHT/2;
 drawable drawable = getdrawable ();
 bitmapdrawable BD = (bitmapdrawable) drawable;
 Bd.setantialias (TRUE); @Override public boolean ontouchevent (Motionevent event) {switch (event.getaction ()) {case Motionevent.actio
 N_down:float X = Event.getx ();
 float Y = event.gety ();
 Mscalehandler.sendemptymessage (Scale_reduce_init);
 Break
 Case MotionEvent.ACTION_UP:mScaleHandler.sendEmptyMessage (Scale_add_init);
 Break
 return true; /** * Control Scaling Handler * * Private Handler Mscalehandler = New Handler () {private Matrix Matrix = new Matrix ();
 private int count = 0;
 private float S;

 /** * Whether the click event has been invoked/private Boolean isclicked;
 public void Handlemessage (Android.os.Message msg) {Matrix.set (Getimagematrix ());
 Switch (msg.what) {case Scale_reduce_init:if (!isfinish) {mscalehandler.sendemptymessage (scale_reduce_init);
  else {isfinish = false;
  Count = 0;
  s = (float) math.sqrt (math.sqrt (Mminscale));
  Beginscale (Matrix, s);
 Mscalehandler.sendemptymessage (scaling);
 } break;
 Case Scaling:beginscale (Matrix, s);
 if (Count < 4) {mscalehandler.sendemptymessage (scaling);
  else {isfinish = true;
  if (MyImageView.this.mOnViewClickListener!= null &&!isclicked) {isclicked = true;
  MyImageView.this.mOnViewClickListener.onViewClick (Myimageview.this);
  else {isclicked = false;

 }} count++;
 Break
 Case 6:if (!isfinish) {mscalehandler.sendemptymessage (scale_add_init);
 else {isfinish = false; Count = 0;
  s = (float) math.sqrt (math.sqrt (1.0f/mminscale));
  Beginscale (Matrix, s);
 Mscalehandler.sendemptymessage (scaling);
 } break;

 }
 }
 };
 protected void sleep (int i) {try {thread.sleep (i);
 catch (Interruptedexception e) {e.printstacktrace (); }/** * Scaling * @param matrix * @param scale/private synchronized void Beginscale (matrix matrix, float scale
 ) {Matrix.postscale (scale, scale, mcenterwidth, mcenterheight);
 Setimagematrix (matrix);

 /** * Callback Interface * * Private Onviewclicklistener Monviewclicklistener; public void Setonclickintent (Onviewclicklistener onviewclicklistener) {This.monviewclicklistener =
 Onviewclicklistener;
 public interface Onviewclicklistener {void Onviewclick (Myimageview view);
 }

}

The code is not complex, the main is to Ontouchevent Action_down and action_up listening, and then through the handler combined with the matrix to achieve the scaling effect. Here a simple mscalehandler inside the logic of the Code, when the detection of the Action_down event, will determine whether the current zoom is complete, if completed then add a narrowing effect, if not, then always detect. ACTION_UP is the same process. The scaled gradient is used to the small knowledge point that the article starts to introduce.

Some people will feel the use of handler more trouble, here has been using handler.sendmsg reason is that the use of this message queue, the queue advanced first out, to ensure the smooth effect of animation. Because Action_down_ and action_up in a moment of completion, in fact, the animation is still in progress. If you complete the animation with the while set sleep in the ontouchevent, there will be problems such as card death and no monitoring of up events.

3. Main activity

Package com.ljp.ani01;

Import android.app.Activity;
Import Android.os.Bundle;
Import Android.view.View;
Import Android.view.View.OnClickListener;
Import Android.widget.Toast;

public class Testrolateanimactivity extends activity
{
 myimageview joke;

 @Override public
 void OnCreate (Bundle savedinstancestate)
 {
 super.oncreate (savedinstancestate);
 Setcontentview (r.layout.main);

 Joke = (Myimageview) Findviewbyid (r.id.c_joke);
 Joke.setonclickintent (New Myimageview.onviewclicklistener ()
 {

 @Override public
 void Onviewclick ( Myimageview view)
 {
 toast.maketext (testrolateanimactivity.this, "joke", 1000). Show ();
 }
 }
 
 
}

The Click event is registered with the provided callback interface. It is explained here that it is not useful to set the Onclicklistener for ImageView now, because the ontouchevent of the custom ImageView returns true directly, and the Click event is not carried down. If you want to register through Onclicklistener, you can change the return value in Ontouchevent to Super.ontouchevent (event), and you need to set the ImageView clickable to true. These are the Ontouch events of the dissemination mechanism, do not understand Google, or very necessary.

SOURCE Download: Http://xiazai.jb51.net/201608/yuanma/AndroidRolateAnim (jb51.net). rar

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.