概述

上一篇博客中,我们讲了View移动动画各个方法的不同原理。那么这一篇具体讲下移动和滑动效果的具体实现。

这篇中主要简介五中主要的实现移动和滑动效果的方法。1、通过LayoutParams方法2、通过scrollTo和scrollBy方法3、通过Scroller方法4、通过属性动画

LayoutParams

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

布局,只是一个简单的RelativeLayout中有一个View:

android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary_1">
android:id="@+id/view_layoutparams"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@color/colorAccent_1" />

代码,在代码中动态设置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实现过程。