模仿去哪儿的磁贴效果

转载。 https://blog.csdn.net/u011310942/article/details/40591329

感觉去哪儿的页面做的非常不错，非常好看，于是想模仿一下，其实实现还是很简单的，就是按下去的执行缩小动画，抬起的恢复正常状态，这种效果叫磁贴效果，顾名思义感觉就磁贴一样。下面我们来看看效果图：

下面我们来看看最重要的自定义代码：

[java]  view plain  copy

1. package com.zqy.qunertext;  
2.   
3.   
4. import android.content.Context;  
5. import android.graphics.Canvas;  
6. import android.util.AttributeSet;  
7. import android.util.TypedValue;  
8. import android.view.MotionEvent;  
9. import android.view.animation.Animation;  
10. import android.view.animation.ScaleAnimation;  
11. import android.widget.FrameLayout;  
12.   
13.   
14. /** 
15.  *  
16.  *  
17.  * @author zqy 
18.  *  
19.  */  
20. public class HomeMenuButton extends FrameLayout {  
21.     private boolean isPressed;  
22.     private ScaleAnimation zoomInAnimation;  
23.     private ScaleAnimation zoomOutAnimation;  
24.   
25.     public HomeMenuButton(Context context) {  
26.         this(context,null);  
27.     }  
28.   
29.     public HomeMenuButton(Context context, AttributeSet attrs) {  
30.         super(context, attrs);  
31.         init();  
32.     }  
33.   
34.     @Override  
35.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
36.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
37.     }  
38.   
39.     private void init() {  
40.         /** 
41.          * 初始化动画 
42.          */  
43.         zoomInAnimation = new ScaleAnimation(1f, 0.95f, 1f, 0.95f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);  
44.         zoomInAnimation.setFillAfter(true);  
45.         zoomInAnimation.setDuration(200);  
46.         zoomOutAnimation = new ScaleAnimation(0.95f, 1f, 0.95f, 1f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);  
47.         zoomOutAnimation.setFillAfter(true);  
48.         zoomOutAnimation.setDuration(200);  
49.   
50.     }  
51.   
52.     @Override  
53.     protected void onDraw(Canvas canvas) {  
54.         super.onDraw(canvas);  
55.     }  
56.   
57.     private void toNormalState() {  
58.         isPressed = false;  
59.         invalidate();  
60.         startAnimation(zoomOutAnimation);  
61.     }  
62.   
63.     private boolean pointInView(float localX, float localY, float slop) {  
64.         return localX >= -slop && localY >= -slop && localX < getWidth() + slop  
65.                 && localY < getHeight() + slop;  
66.     }  
67.       
68.     @Override  
69.     public boolean onTouchEvent(MotionEvent event) {  
70.         switch (event.getAction()) {  
71.         case MotionEvent.ACTION_DOWN:  
72.             isPressed = true;//设置true  
73.             invalidate();//重绘  
74.             this.startAnimation(zoomInAnimation);//执行动画  
75.             break;  
76.         case MotionEvent.ACTION_UP:  
77.             boolean needPerformClick = isPressed;  
78.             toNormalState();//正常  
79.             if (needPerformClick) {  
80.                 performClick();  
81.             }  
82.             break;  
83.               
84.         case MotionEvent.ACTION_MOVE:  
85.             final int x = (int) event.getX();  
86.             final int y = (int) event.getY();  
87.             if (!pointInView(x, y, 20)) {  
88.                 toNormalState();  
89.             }  
90.             break;  
91.               
92.         case MotionEvent.ACTION_CANCEL:  
93.         case MotionEvent.ACTION_OUTSIDE:  
94.             toNormalState();  
95.             break;  
96.         }  
97.           
98.         return true;  
99.           
100.     }  
101. }  

上面代码晚上几乎就已经完成了：只有把自定义的代码写在XML里面就可以了：

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <LinearLayout  
8.         android:layout_width="match_parent"  
9.         android:layout_height="match_parent"  
10.         android:baselineAligned="false"  
11.         android:orientation="horizontal" >  
12.   
13.         <LinearLayout  
14.             android:layout_width="0dp"  
15.             android:layout_height="match_parent"  
16.             android:layout_marginBottom="8dp"  
17.             android:layout_marginLeft="8dp"  
18.             android:layout_marginTop="8dp"  
19.             android:layout_weight="1"  
20.             android:orientation="vertical" >  
21.   
22.             <com.zqy.qunertext.HomeMenuButton  
23.                 android:id="@+id/hb_ad"  
24.                 android:layout_width="match_parent"  
25.                 android:layout_height="0dp"  
26.                 android:layout_weight="2"  
27.                 android:background="@drawable/icon_favoable" >  
28.             </com.zqy.qunertext.HomeMenuButton>  
29.   
30.             <com.zqy.qunertext.HomeMenuButton  
31.                 android:id="@+id/hb_order"  
32.                 android:layout_width="match_parent"  
33.                 android:layout_height="0dp"  
34.                 android:layout_marginTop="8dp"  
35.                 android:layout_weight="2"  
36.                 android:background="@drawable/icon_order" >  
37.             </com.zqy.qunertext.HomeMenuButton>  
38.   
39.             <com.zqy.qunertext.HomeMenuButton  
40.                 android:id="@+id/hb_cloud_manger"  
41.                 android:layout_width="match_parent"  
42.                 android:layout_height="0dp"  
43.                 android:layout_marginTop="8dp"  
44.                 android:layout_weight="1"  
45.                 android:background="@drawable/icon_favorable_manger" >  
46.             </com.zqy.qunertext.HomeMenuButton>  
47.   
48.             <com.zqy.qunertext.HomeMenuButton  
49.                 android:id="@+id/hb_setting"  
50.                 android:layout_width="match_parent"  
51.                 android:layout_height="0dp"  
52.                 android:layout_marginTop="8dp"  
53.                 android:layout_weight="1"  
54.                 android:background="@drawable/icon_setting" >  
55.             </com.zqy.qunertext.HomeMenuButton>  
56.         </LinearLayout>  
57.   
58.         <LinearLayout  
59.             android:layout_width="0dp"  
60.             android:layout_height="match_parent"  
61.             android:layout_marginBottom="8dp"  
62.             android:layout_marginLeft="8dp"  
63.             android:layout_marginRight="8dp"  
64.             android:layout_marginTop="8dp"  
65.             android:layout_weight="1"  
66.             android:orientation="vertical" >  
67.   
68.             <com.zqy.qunertext.HomeMenuButton  
69.                 android:id="@+id/hb_goods_manager"  
70.                 android:layout_width="match_parent"  
71.                 android:layout_height="0dp"  
72.                 android:layout_weight="1"  
73.                 android:background="@drawable/icon_goods" >  
74.             </com.zqy.qunertext.HomeMenuButton>  
75.   
76.             <com.zqy.qunertext.HomeMenuButton  
77.                 android:id="@+id/hb_store_net"  
78.                 android:layout_width="match_parent"  
79.                 android:layout_height="0dp"  
80.                 android:layout_marginTop="8dp"  
81.                 android:layout_weight="2"  
82.                 android:background="@drawable/icon_store" >  
83.             </com.zqy.qunertext.HomeMenuButton>  
84.   
85.             <com.zqy.qunertext.HomeMenuButton  
86.                 android:id="@+id/hb_incoming"  
87.                 android:layout_width="match_parent"  
88.                 android:layout_height="0dp"  
89.                 android:layout_marginTop="8dp"  
90.                 android:layout_weight="2"  
91.                 android:background="@drawable/icon_money" >  
92.             </com.zqy.qunertext.HomeMenuButton>  
93.   
94.             <com.zqy.qunertext.HomeMenuButton  
95.                 android:id="@+id/hb_employee_manager"  
96.                 android:layout_width="match_parent"  
97.                 android:layout_height="0dp"  
98.                 android:layout_marginTop="8dp"  
99.                 android:layout_weight="1"  
100.                 android:background="@drawable/icon_manage" >  
101.             </com.zqy.qunertext.HomeMenuButton>  
102.         </LinearLayout>  
103.     </LinearLayout>  
104.   
105. </LinearLayout>  

OK.大功告成。效果还可以：呵呵

下载地址：