魅族/锤子/苹果 悬停效果的实现

魅族/锤子/苹果 悬停效果的实现

一、背景：近日研究当前主流手机的单手操作效果。

一类是小米的单手小屏模式：将原本5寸以上的屏幕缩小到3.5/4寸的大小，以方便单手操作

另外一类是魅族/锤子/苹果的 悬停效果：屏幕可以下拉到下半部分，这样单手可以方便的操作到屏幕上方区域

 

二、关于DecorView的基本概念

一、DecorView为整个Window界面的最顶层View。

二、DecorView只有一个子元素为LinearLayout。代表整个Window界面，包含通知栏，标题栏，内容显示栏三块区域。

三、LinearLayout里有两个FrameLayout子元素。

  (20)为标题栏显示界面。只有一个TextView显示应用的名称。也可以自定义标题栏，载入后的自定义标题栏View将加入FrameLayout中。

  (21)为内容栏显示界面。就是setContentView()方法载入的布局界面，加入其中。

 

DecorView的创建一般是在setContentView时完成的，具体源码在PhoneWindow的setContentView()中

installDecor();

　　

三、悬停体验的基本设计思路：

1.获取当前Window的DecorView，并将DecorView中的所有View保存下来（其实是保存了一个LinearLayout）

2.设计一个有滚动效果的Layout——HoverLayout，支持整体Move

3.将之前从DecorView中保存下来的View，addView到第二步中有滚动效果的HoverLayout中去。

4.DecorView.removeAllViews()

5.DecorView.addView(HoverLayout)

 

四、具体的代码：

1.HoverLayout的实现：

HoverLayout继承于FrameLayout，最主要的区别于FrameLayout的地方在于

a.对FrameLayout的x,y坐标做属性动画

b.onLayout中，根据FrameLayout的x,y坐标的变化，通过child.layout更新子View的坐标

package com.xerrard.hoverdemo;

import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Point;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewConfiguration;
import android.widget.FrameLayout;

/**
 * Created by xerrard on 2015/11/3.
 */
public class HoverLayout extends FrameLayout {
    private int mDefaultTouchSlop;
    private static int DEFAULT_CHILD_GRAVITY = Gravity.TOP | Gravity.START;
    private static final float DEFAULT_SPEED = 1.0f;
    private int mOffsetX = 0;
    private int mOffsetY = 0;
    private Rect mChildRect;

    public HoverLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initialize();
        fetchAttribute(context, attrs, defStyle);
    }

    public HoverLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public HoverLayout(Context context) {
        super(context);
        initialize();
    }

    private void fetchAttribute(Context context, AttributeSet attrs, int defStyle) {
    }

    private void initialize() {
        mDefaultTouchSlop = ViewConfiguration.get(getContext())
                .getScaledTouchSlop(); //获取滑动的最小距离
        mChildRect = new Rect();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        layoutChildren(left, top, right, bottom, false /* no force left gravity */);
    }

    void layoutChildren(int left, int top, int right, int bottom,
                        boolean forceLeftGravity) {
        final int count = getChildCount();

        final int parentLeft = getPaddingLeft();
        final int parentRight = right - left - getPaddingRight();

        final int parentTop = getPaddingTop();
        final int parentBottom = bottom - top - getPaddingBottom();

        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() != GONE) {
                final LayoutParams lp = (LayoutParams) child.getLayoutParams();

                final int width = child.getMeasuredWidth();
                final int height = child.getMeasuredHeight();

                int childLeft;
                int childTop;

                int gravity = lp.gravity;
                if (gravity == -1) {
                    gravity = DEFAULT_CHILD_GRAVITY;
                }

                final int layoutDirection = getLayoutDirection();
                final int absoluteGravity = Gravity.getAbsoluteGravity(gravity, layoutDirection);
                final int verticalGravity = gravity & Gravity.VERTICAL_GRAVITY_MASK;

                switch (absoluteGravity & Gravity.HORIZONTAL_GRAVITY_MASK) {
                    case Gravity.CENTER_HORIZONTAL:
                        childLeft = parentLeft + (parentRight - parentLeft - width) / 2 +
                                lp.leftMargin - lp.rightMargin;
                        break;
                    case Gravity.RIGHT:
                        if (!forceLeftGravity) {
                            childLeft = parentRight - width - lp.rightMargin;
                            break;
                        }
                    case Gravity.LEFT:
                    default:
                        childLeft = parentLeft + lp.leftMargin;
                }

                switch (verticalGravity) {
                    case Gravity.TOP:
                        childTop = parentTop + lp.topMargin;
                        break;
                    case Gravity.CENTER_VERTICAL:
                        childTop = parentTop + (parentBottom - parentTop - height) / 2 +
                                lp.topMargin - lp.bottomMargin;
                        break;
                    case Gravity.BOTTOM:
                        childTop = parentBottom - height - lp.bottomMargin;
                        break;
                    default:
                        childTop = parentTop + lp.topMargin;
                }

                //child.layout(childLeft, childTop, childLeft + width, childTop + height);
                mChildRect.set(childLeft, childTop, childLeft + width, childTop
                        + height);
                mChildRect.offset(mOffsetX, mOffsetY);
                child.layout(mChildRect.left, mChildRect.top, mChildRect.right,
                        mChildRect.bottom);
            }
        }
    }

    protected int clamp(int src, int limit) {
        if (src > limit) {
            return limit;
        } else if (src < -limit) {
            return -limit;
        }
        return src;
    }

    public void moveToHalf() {
        move(0, getHeight() / 2, true);
    }

    public void move(int deltaX, int deltaY, boolean animation) {
        deltaX = (int) Math.round(deltaX * DEFAULT_SPEED);
        deltaY = (int) Math.round(deltaY * DEFAULT_SPEED);
        moveWithoutSpeed(deltaX, deltaY, animation);
    }

    public void moveWithoutSpeed(int deltaX, int deltaY, boolean animation) {
        int hLimit = getWidth();
        int vLimit = getHeight();
        int newX = clamp(mOffsetX + deltaX, hLimit);
        int newY = clamp(mOffsetY + deltaY, vLimit);
        if (!animation) {
            setOffset(newX, newY);
        } else {
            Point start = new Point(mOffsetX, mOffsetY);
            Point end = new Point(newX, newY);
            /*带有线性插值器（针对x/y坐标）的属性(Point)动画*/
            ValueAnimator anim = ValueAnimator.ofObject(
                    new TypeEvaluator<Point>() {
                        @Override
                        public Point evaluate(float fraction, Point startValue,
                                              Point endValue) {
                            return new Point(Math.round(startValue.x
                                    + (endValue.x - startValue.x) * fraction),
                                    Math.round(startValue.y
                                            + (endValue.y - startValue.y)
                                            * fraction));
                        }
                    }, start, end);
            anim.setDuration(250);
            /*监听整个动画过程，每播放一帧动画，onAnimationUpdate就会调用一次*/
            anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    /*获得动画播放过程中的Point当前值*/
                    Point offset = (Point) animation.getAnimatedValue();
                    setOffset(offset.x, offset.y);//根据当前Point值去requestLayout
                }
            });
            anim.start();
        }
    }

    public void setOffsetX(int offset) {
        mOffsetX = offset;
        requestLayout();
    }

    public int getOffsetX() {
        return mOffsetX;
    }

    public void setOffsetY(int offset) {
        mOffsetY = offset;
        requestLayout();
    }

    public int getOffsetY() {
        return mOffsetY;
    }

    public void setOffset(int x, int y) {
        mOffsetX = x;
        mOffsetY = y;
        requestLayout();
    }

    public void goHome(boolean animation) {
        moveWithoutSpeed(-mOffsetX, -mOffsetY, animation);
    }

}

 

2.DecorView中的View放到HoverLayout中，然后将HoverLayout更新到DecorView的代码

    private void initHoverLayout() {
        // setup ContainerView
        mContainerView = new FrameLayout(this);
        mContainerView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams
                .MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

        // setup HoverLayout
        mHoverLayout = new HoverLayout(this);
        mHoverLayout.addView(mContainerView);
        mHoverLayout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams
                .MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));


    }

    private void attachDecorToHoverLayout() {
        ViewGroup decor = (ViewGroup) getWindow().peekDecorView();
        Drawable bg= decor.getBackground();
        List<View> contents = new ArrayList<View>();
        for (int i = 0; i < decor.getChildCount(); ++i) {
            contents.add(decor.getChildAt(i));
        }
        decor.removeAllViews();

        FrameLayout backgroud = new FrameLayout(this);
        backgroud.setBackground(bg);
        mContainerView.addView(backgroud);
        for (View v : contents) {
            mContainerView.addView(v, v.getLayoutParams());
        }
        mHoverLayout.setBackground(WallpaperManager.getInstance(this).getDrawable());
        decor.addView(mHoverLayout);
    }

3.悬停效果

执行：

mHoverLayout.move(0,mHoverLayout.getHeight()/3,true);

恢复：

mHoverLayout.goHome(true);

可以根据软件的设计采用按键/悬浮球/下滑等方式来触发悬停执行的代码

 

五、悬停效果的导入

1、单个Activity中导入

只需要在Activity的setContentView后执行下面方法，就可以实现悬停的效果。

        initHoverLayout();
        attachDecorToFlyingLayout();

 

2.系统导入

系统导入需要修改Android的源码。导入方法和单个Activity的导入类似。由于所有Window（Activity/Toast/Dialog）的setContentView，最终调用的都是Window类的setContentView。而Window类的实现类PhoneWindow类。因此我们在PhoneWindow类中的setContentView方法后执行下面方法即可。

        initHoverLayout();
        attachDecorToFlyingLayout();

　　

 

参考资料：http://blog.csdn.net/sunny2come/article/details/8899138 Android DecorView浅析

              《Android开发艺术探索》

              https://github.com/tkgktyk/FlyingLayout