码迷,mamicode.com
首页 > 其他好文 > 详细

模仿去哪儿的磁贴效果

时间:2016-01-07 16:20:25      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

感觉去哪儿的页面做的很不错,很好看,于是想模仿一下。事实上实现还是很easy的。就是按下去的运行缩小动画,抬起的恢复正常状态,这样的效果叫磁贴效果。顾名思义感觉就磁贴一样。

以下我们来看看效果图:

技术分享

以下我们来看看最重要的自己定义代码:

package com.zqy.qunertext;


import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;
import android.widget.FrameLayout;


/**
 * 
 * 
 * @author zqy
 * 
 */
public class HomeMenuButton extends FrameLayout {
	private boolean isPressed;
	private ScaleAnimation zoomInAnimation;
	private ScaleAnimation zoomOutAnimation;

	public HomeMenuButton(Context context) {
		this(context,null);
	}

	public HomeMenuButton(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

	private void init() {
		/**
		 * 初始化动画
		 */
		zoomInAnimation = new ScaleAnimation(1f, 0.95f, 1f, 0.95f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
		zoomInAnimation.setFillAfter(true);
		zoomInAnimation.setDuration(200);
		zoomOutAnimation = new ScaleAnimation(0.95f, 1f, 0.95f, 1f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
		zoomOutAnimation.setFillAfter(true);
		zoomOutAnimation.setDuration(200);

	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
	}

	private void toNormalState() {
		isPressed = false;
		invalidate();
		startAnimation(zoomOutAnimation);
	}

	private boolean pointInView(float localX, float localY, float slop) {
		return localX >= -slop && localY >= -slop && localX < getWidth() + slop
				&& localY < getHeight() + slop;
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			isPressed = true;//设置true
			invalidate();//重绘
			this.startAnimation(zoomInAnimation);//运行动画
			break;
		case MotionEvent.ACTION_UP:
			boolean needPerformClick = isPressed;
			toNormalState();//正常
			if (needPerformClick) {
				performClick();
			}
			break;
			
		case MotionEvent.ACTION_MOVE:
			final int x = (int) event.getX();
			final int y = (int) event.getY();
			if (!pointInView(x, y, 20)) {
				toNormalState();
			}
			break;
			
		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_OUTSIDE:
			toNormalState();
			break;
		}
		
		return true;
		
	}
}
上面代码晚上差点儿就已经完毕了:仅仅有把自己定义的代码写在XML里面就能够了:

<?xml version="1.0" encoding="utf-8"?

> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:baselineAligned="false" android:orientation="horizontal" > <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginBottom="8dp" android:layout_marginLeft="8dp" android:layout_marginTop="8dp" android:layout_weight="1" android:orientation="vertical" > <com.zqy.qunertext.HomeMenuButton android:id="@+id/hb_ad" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" android:background="@drawable/icon_favoable" > </com.zqy.qunertext.HomeMenuButton> <com.zqy.qunertext.HomeMenuButton android:id="@+id/hb_order" android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginTop="8dp" android:layout_weight="2" android:background="@drawable/icon_order" > </com.zqy.qunertext.HomeMenuButton> <com.zqy.qunertext.HomeMenuButton android:id="@+id/hb_cloud_manger" android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginTop="8dp" android:layout_weight="1" android:background="@drawable/icon_favorable_manger" > </com.zqy.qunertext.HomeMenuButton> <com.zqy.qunertext.HomeMenuButton android:id="@+id/hb_setting" android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginTop="8dp" android:layout_weight="1" android:background="@drawable/icon_setting" > </com.zqy.qunertext.HomeMenuButton> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginBottom="8dp" android:layout_marginLeft="8dp" android:layout_marginRight="8dp" android:layout_marginTop="8dp" android:layout_weight="1" android:orientation="vertical" > <com.zqy.qunertext.HomeMenuButton android:id="@+id/hb_goods_manager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@drawable/icon_goods" > </com.zqy.qunertext.HomeMenuButton> <com.zqy.qunertext.HomeMenuButton android:id="@+id/hb_store_net" android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginTop="8dp" android:layout_weight="2" android:background="@drawable/icon_store" > </com.zqy.qunertext.HomeMenuButton> <com.zqy.qunertext.HomeMenuButton android:id="@+id/hb_incoming" android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginTop="8dp" android:layout_weight="2" android:background="@drawable/icon_money" > </com.zqy.qunertext.HomeMenuButton> <com.zqy.qunertext.HomeMenuButton android:id="@+id/hb_employee_manager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginTop="8dp" android:layout_weight="1" android:background="@drawable/icon_manage" > </com.zqy.qunertext.HomeMenuButton> </LinearLayout> </LinearLayout> </LinearLayout>

OK.大功告成。

效果还能够:呵呵



下载地址:






模仿去哪儿的磁贴效果

标签:

原文地址:http://www.cnblogs.com/mengfanrong/p/5109882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!