Android UI-移动和滑动效果(二)

概述

上一篇博客中，我们讲了View移动动画各个方法的不同原理。那么这一篇具体讲下移动和滑动效果的具体实现。
这篇中主要简介五中主要的实现移动和滑动效果的方法。1、通过LayoutParams方法2、通过scrollTo和scrollBy方法3、通过Scroller方法4、通过属性动画

LayoutParams

LayoutParams中保存了View的布局参数，所以可以直接通过修改LayoutParams来修改位置参数，从而达到改变View位置的效果。在这里要注意的是，一般我们会拿到View的父控件类型相对应的LayoutParams来进行设置（如RelativeLayout.LayoutParams），不然运行时会产生异常。只要谁知Margin的话，也可以拿MarginLayoutParams，而不用去管父控件的类型。下面就用代码来尝试一下。
布局,只是一个简单的RelativeLayout中有一个View:

代码，在代码中动态设置View的margin值:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_layout_params);
        View view_layoutparams =  findViewById(R.id.view_layoutparams);
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) view_layoutparams.getLayoutParams();
        params.leftMargin= view_layoutparams.getLeft()+100;
        view_layoutparams.setLayoutParams(params);
        view_layoutparams.requestLayout();
    }

效果如下：

image.png

可以看到，我们设置了marginLeft，然后界面就向右移动了100px的距离。同样我们可以通过MarginLayoutParams；来完成这件事情：

ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view_layoutparams.getLayoutParams();
        params.leftMargin= view_layoutparams.getLeft()+100;
        view_layoutparams.setLayoutParams(params);
        view_layoutparams.requestLayout();

到这里大家应该可以发现，其实MarginLayoutParams应该是RelativeLayout.LayoutParams等具体控件所对应的LayoutParams的父类。

ScrollTo和ScrollBy

scrollTo和scrollBy的原理前面一篇博客已经讲到过了。这里我们直接用代码来做演示。
布局和LayoutParams的代码没有区别。看下Activity中的代码，非常简单，只有一行：

((View)view_layoutparams.getParent()).scrollBy(-100,-100);

上篇讲到，scrollTo和scrollBy方法只能改变View中的内容的位置。所以我们先拿到了父控件，然后对父控件进行scroll操作。
讲到这里，我们发现我们讲的都是静态设置控件的位置，然而我们需要的是能够动态滑动的效果。街小区的Scroller这个类，能够很好地帮忙解决这个问题。

Scroller

使用Scroller能够实现平滑的滑动效果，而不会像直接使用LayoutParams和ScrollTo那么突兀。其实Scroller和ScrollTo有着非常大的联系。那么我们就看下代码上怎么实现。由于Scroller需要结合computeScroll使用，所以我们先自定义一个View：

public class ScrollerView extends View {

    public ScrollerView(Context context) {
        super(context);
        init(context);
    }

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

    public ScrollerView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    Context mContext;
    //定义一个Scroller
    private Scroller mScroller;

    private void init(Context context) {
        mContext = context;
        mScroller = new Scroller(mContext);
    }
    //写一个public的调用方法
    public void startScroll(int startX,int startY,int dx,int dy,int duaration){
        mScroller.startScroll(startX,startY,dx,dy,duaration);
    }

    // 继承computeScroll方法，实现滑动的功能
    @Override
    public void computeScroll() {
        //这个方法计算当前的位置，并判断是否已经执行完毕，如果完毕则返回false
        if(mScroller.computeScrollOffset()){
            // 具体做动画的地方
            ((View)getParent()).scrollTo(mScroller.getCurrX(),mScroller.getCurrY());
            //这句代码一定要加，不然无法实现滑动的效果
            postInvalidate();;
        }
    }
}

在Activity中执行

ScrollerView view_scroller = (ScrollerView) findViewById(R.id.view_scroller);
        view_scroller.startScroll(0, 0, -1000, 0, 6000);

来看下具体的效果

1.gif

具体的Scoller的执行原理网上已经有很多的博客解释过，这里不再详细讲解，只是简单介绍下原理。我们只看下computeScrollOffset中的一句代码：

int timePassed = (int)(AnimationUtils.currentAnimationTimeMillis() - mStartTime);

看到这句代码，相信大家已经猜到了计算当前位置的方式，就是通过当前的时间减去开始的时间，再除以我们设置的duration时间。这样就可以计算出当前的位置所在，那么还有一个问题，如何定时或者不定时更新界面呢，这就是postInvalidate这个方法的威力了。在调用postInvalidate方法的过程中，会导致View的重回，重绘时会调用comoputeScroll方法，这样我们就又回到方法中，根据当前的时间重新计算位置，然后执行滑动操作。非常巧妙的一个方法。
既然ScrollTo可以，那么我们也来试一下LayoutParams来执行滑动。
修改一下代码：

        if (mScroller.computeScrollOffset()) {
            //((View)getParent()).scrollTo(mScroller.getCurrX(),mScroller.getCurrY());
            ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) getLayoutParams();
            params.leftMargin = mScroller.getCurrX();
            setLayoutParams(params);
            postInvalidate();
        }

也可以实现同样的效果，但是两种实现方式的原理稍微有点不一样，ScrollTo是改变了mScrollX和mScrollY的值，而LayoutParams是改变了整体的布局参数。

属性动画

属性动画的原理和简单的实现上篇博客已经讲过，这里来具体看下代码：

View view_animation = findViewById(R.id.view_animation);
ObjectAnimator.ofFloat(view_animation, "translationX", 0, 1000).setDuration(6000).start();

效果如下：

GIF.gif

这种方式非常简单，只要一行代码就可以实现。也可以使用ValueAnimation来做动画，下面是一个具体的例子,这里ValueAnimator只是计算了fraction，没有执行具体的动画。查看源码可以知道，这个过程是用handler来执行的。

ValueAnimator animator = ValueAnimator.ofInt(0, 1).setDuration(6000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
            float f = animation.getAnimatedFraction();
        ((View) view_animation.getParent()).scrollTo(-(int) (f * 1000), 0);
    }
});
animator.start();

总结

这篇是对上篇原理篇的补充，两篇合起来讲了Android的位置属性，并介绍了简单的滑动效果的处理。后续会减少更加 深入的动画和UI实现过程。