高仿手机QQ5.0界面框架

这次的手机QQ更新从客观的角度来说，还是很好的，更加简约，控件也自定义了，界面也有了大的改动，但是最主要的框架还是它的左右滑动机制。让我们先来看看它的效果。

可以看到它是从左到右的一个滑动方法菜单的方式，最主要的就是这个控件类的实现吧。其他的感觉都没什么太大的问题，下面我就来看看这种效果应该怎么来实现。

第一拿到东西先分析这个效果是怎么出来的。我仔细的看了一下主要应该注意这几点。

1：菜单的出现有个放大效果而且伴随着一个apha的效果

2：主要的内容面板上面就是一个缩放的动画

3：可以看到这个菜单的边界和主内容面板上面的边界距离。我取的是1/4这里应该没错。

4：还应该注意的就是listview这些控件的事件屏蔽。

主要的问题应该就是这几个吧。

下面我就以怎么实现这个可滑动的pager来给大家说说代码实现。

package com.edsheng.view;

import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.Toast;

/**
 * @version 1.0
 * @FielName : DragPager.java
 * @Date : 2014/8/5
 * @author edsheng
 */
public class DragPager extends RelativeLayout {

	private View mMenu; // 菜单
	private View mContent; // 内容视图

	private int mStartx = 0; // 点击开始
	private float mContentStartTransX = 0; // 内容视图开始点击滑动的距离
	private float mMenuStartTransX = 0;// 菜单开始点击滑动的距离
	private int DEFAULT_RIGHT_MARGIN = getResources().getDisplayMetrics().widthPixels / 4;// 菜单距离边界距离在取的1/4屏幕

	ObjectAnimator mContent_animator;// 内容视图动画
	ObjectAnimator mMenu_animator;// 菜单动画
	private boolean misDrag = false; // 当前是否拖动
	final int DEFALT_DRAG_DISTENCE = 40;// 认为滑动的缺省值

	public DragPager(Context context) {
		super(context);
	}

	public DragPager(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

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

	public void setMenu(View menu) {
		mMenu = menu;
		LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT,
				LayoutParams.MATCH_PARENT);
		layoutParams.rightMargin = DEFAULT_RIGHT_MARGIN;
		addView(menu, layoutParams);
		mMenu.setScaleY(0.75f);// 初始化Y到0.75这么高
		mMenu.setTranslationX(-DEFAULT_RIGHT_MARGIN * 3);// 初始化菜单到-Y距离
	}

	public void setContent(View content) {
		mContent = content;
		addView(content);
	}

	/**
	 * 计算当前MenuX可滑动的位置
	 *
	 * @param distence
	 * @return
	 */
	private float getMenuDragX(float distence) {
		float newX = distence + mMenuStartTransX;
		if (newX <= -DEFAULT_RIGHT_MARGIN * 3) {
			newX = -DEFAULT_RIGHT_MARGIN * 3;
		} else if (newX >= 0) {
			newX = 0;
		}
		return newX;
	}

	/**
	 * 计算内容视图X滑动的位置
	 *
	 * @param distence
	 * @return
	 */
	private float getContentDragX(float distence) {

		float newX = distence + mContentStartTransX;
		if (newX <= 0) {
			newX = 0;
		} else if (newX >= mContent.getWidth() - DEFAULT_RIGHT_MARGIN) {
			newX = mContent.getWidth() - DEFAULT_RIGHT_MARGIN;
		}
		return newX;
	}

	/**
	 * 停止动画
	 */
	private void stopAnimation() {
		if (mContent_animator != null && mMenu_animator != null) {
			mContent_animator.cancel();
			mMenu_animator.cancel();
		}
	}

	// 移动
	private void move(float distence) {
		float nowx = getContentDragX(distence);
		if (nowx != mContent.getTranslationX()) {
			mContent.setTranslationX(nowx);
			float scale = nowx / (mContent.getWidth() - DEFAULT_RIGHT_MARGIN); // 计算alph范围是0-1
			mContent.setScaleY(1 - scale * 0.25f); // 内容的Y缩放
			mMenu.setTranslationX(getMenuDragX(distence)); // 设置菜单的距离
			mMenu.setScaleY(0.75f + scale * 0.25f);// 设置菜单的Y缩放
			mMenu.setAlpha(scale);// 菜单的Alpha
		}
	}

	@Override
	public boolean dispatchTouchEvent(MotionEvent ev) {
		switch (ev.getAction()) {
		case MotionEvent.ACTION_DOWN:
			stopAnimation(); // 停止动画
			mStartx = (int) ev.getRawX(); // 获取点击初始化x
			if (mContent != null)
				mContentStartTransX = mContent.getTranslationX();// 获取初始化x
			if (mMenu != null)
				mMenuStartTransX = mMenu.getTranslationX();
			break;
		case MotionEvent.ACTION_MOVE:
			// 当左右滑动到阀值就认为是在拖动了
			if (Math.abs(ev.getRawX() - mStartx) > DEFALT_DRAG_DISTENCE) {
				misDrag = true;
			}
			break;
		case MotionEvent.ACTION_UP:
			misDrag = false;
			break;
		}
		return super.dispatchTouchEvent(ev);
	}

	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		if (misDrag) {
			return true;// 不进行向下分发了已经拦截
		} else {
			return false; // 把事件交给子view处理然后通过子view的dispatch分发
		}
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		if (event.getActionIndex() > 1)
			return true;
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			return true; // 消费掉这个事件让它不传递
		case MotionEvent.ACTION_MOVE:
			float distence = event.getRawX() - mStartx; // 在这里处理移动
			move(distence);
			break;
		case MotionEvent.ACTION_UP:
		case MotionEvent.ACTION_CANCEL:
			toggle(); // 窗口回弹
			break;
		}
		return super.onTouchEvent(event);
	}

	/**
	 * 回弹的动画
	 */
	private void toggle() {
		if (mContent.getTranslationX() > DEFAULT_RIGHT_MARGIN * 2) {
			// 向右动画
			// 先是content动画
			PropertyValuesHolder content_transani = PropertyValuesHolder
					.ofFloat("translationX", mContent.getTranslationX(),
							mContent.getWidth() - DEFAULT_RIGHT_MARGIN);
			PropertyValuesHolder content_ScaleY = PropertyValuesHolder.ofFloat(
					"scaleY", mContent.getScaleY(), 0.75f);
			mContent_animator = ObjectAnimator.ofPropertyValuesHolder(mContent,
					content_transani, content_ScaleY);
			mContent_animator.start();

			// 这里菜单动画

			PropertyValuesHolder menu_transani = PropertyValuesHolder.ofFloat(
					"translationX", mMenu.getTranslationX(), 0);
			PropertyValuesHolder menu_ScaleY = PropertyValuesHolder.ofFloat(
					"scaleY", mMenu.getScaleY(), 1f);
			PropertyValuesHolder menu_Alpha = PropertyValuesHolder.ofFloat(
					"Alpha", mMenu.getAlpha(), 1f);
			mMenu_animator = ObjectAnimator.ofPropertyValuesHolder(mMenu,
					menu_transani, menu_ScaleY, menu_Alpha);
			mMenu_animator.start();

		} else {
			// 向左动画
			PropertyValuesHolder content_transanx = PropertyValuesHolder
					.ofFloat("translationX", mContent.getTranslationX(), 0);
			PropertyValuesHolder content_ScaleY = PropertyValuesHolder.ofFloat(
					"scaleY", mContent.getScaleY(), 1.0f);
			mContent_animator = ObjectAnimator.ofPropertyValuesHolder(mContent,
					content_transanx, content_ScaleY);
			mContent_animator.start();

			PropertyValuesHolder menu_transani = PropertyValuesHolder.ofFloat(
					"translationX", mMenu.getTranslationX(),
					-DEFAULT_RIGHT_MARGIN * 3);
			PropertyValuesHolder menu_ScaleY = PropertyValuesHolder.ofFloat(
					"scaleY", mMenu.getScaleY(), 0.75f);
			PropertyValuesHolder menu_Alpha = PropertyValuesHolder.ofFloat(
					"Alpha", mMenu.getAlpha(), 0f);
			mMenu_animator = ObjectAnimator.ofPropertyValuesHolder(mMenu,
					menu_transani, menu_ScaleY, menu_Alpha);
			mMenu_animator.start();
		}

	}

}

其中需要注意的地方就是事件的屏蔽和拖动的处理，然后就是几个缩放的地方，然后我们来验证一下这个控件是可用，它的左边是一个menu右边是一个content当我们需要使用的时候应该这样来使用。

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		DragPager dragPager = new DragPager(this);
		View content = new View(this);
		content.setBackgroundColor(Color.BLUE);
		dragPager.setContent(content);
		View mentu = new View(this);
		mentu.setBackgroundColor(Color.RED);
		dragPager.setBackgroundColor(Color.argb(122, 122, 122, 122));
		dragPager.setMenu(mentu);
		setContentView(dragPager);
}

最后还是来看看它的效果怎么样吧。

这里卡的原因主要是因为我的GIF做的不好的原因，然后只要这个界面出来了，其他的东西都比较好搞了，本来想彻彻底底的把手机QQ5.0的界面搬过来的，但是无耐手Q的加密现在做的越来越好了，拿不到资源了，不过这个界面都出来，我相信其他界面还是很容易搞定的吧，这个是里面我感觉最主要的一个东西。有兴趣的童鞋可以继续往下写哦，也可以把这个当成一个控件来用哦。

高仿手机QQ5.0界面框架