首页 > 代码库 > 高仿手机QQ5.0界面框架
高仿手机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的加密现在做的越来越好了,拿不到资源了,不过这个界面都出来,我相信其他界面还是很容易搞定的吧,这个是里面我感觉最主要的一个东西。有兴趣的童鞋可以继续往下写哦,也可以把这个当成一个控件来用哦。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。