前言
Android中经常看到一些炫酷的效果,这些效果很多伴随着View的滑动。我们想要做出这样的效果,掌握View的滑动方式必不可少,本篇总结了View的滑动的7中方式并对其进行分析。
- 使用scrollTo/scrollBy
- 使用scroller
- 使用动画,其中包括View动画和属性动画
- 改变布局参数
- 使用layout
- 使用offsetTopAndBottom/offsetLeftAndRight
- 使用ViewDragHelper
假如我们要把一个ImageView从向右移动300px
布局文件内容:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/contain"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.linda.test.MainActivity">
<ImageView
android:id="@+id/image"
android:src="@mipmap/ic_launcher_round"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Activity内容:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView imageView = (ImageView) findViewById(R.id.image);
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.contain);
image.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//这里用不同的方式去实现。
}
});
}
}
以上代码很简单,下面我们用上面提到的七种方式去实现。
1. 使用scrollTo/scrollBy
linearLayout.scrollTo(-300,0);
linearLayout.scrollBy(-150,0);
linearLayout.scrollBy(-150,0);
如上,很简单有么有,
2.使用Scroller
关于Scroller的使用会单独写一篇去分析。
3.使用动画,其中包括View动画和属性动画
- View动画:
//这里用不同的方式去实现。
TranslateAnimation animation = new TranslateAnimation(0, 300, 0, 0);
animation.setDuration(1500);//设置动画时长
animation.setFillAfter(true);//让ImageView停留在动画结束的位置
imageView.startAnimation(animation);
注意:View动画是对View的影像进行操作,并不能改变View真实的位置。
- 属性动画:
ObjectAnimator.ofFloat(imageView,"translationX",0,300).setDuration(1500).start();
3.0之前实现需要借助开源动画库nineoldandroids,现在基本上兼容到3.0以后了吧~~,因此3.0之前的情况就不说了。
属性动画是直接对View的属性进行操作,其改变了View的真实位置。
第一个参数代表我们要操作的目标View。
第二个参数代表我们要操作的属性名称,这里的translationX
是指View左上角相对于父View水平方向的偏移量。
第三个参数代表属性起始值。
第四个参数代表属性的结束值。
4.改变布局参数
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) imageView.getLayoutParams();
params.leftMargin += 300;
imageView.setLayoutParams(params);//也可以用imageView.requestLayout();
上述代码的作用是让ImageView的marginLeft增加了300px。此种方式会改变View的位置参数left、right、top、bottom的值,因为imageView.setLayoutParams(params);
内部会调用requestLayout
方法进行重新测量、布局、绘制。在布局的过程会对mLeft、mTop、mRight、mBottom这四个变量重新赋值,即left、right、top、bottom的值。
使用layout方法
int mLeft = imageView.getLeft();//获取ImageView左上角初始横坐标
int mTop = imageView.getTop();//获取ImageView左上角初始纵坐标
int mRight = imageView.getRight();//获取ImageView右下角初始横坐标
int mBottom = imageView.getBottom();//获取ImageView右下角初始纵坐标
image.layout(mLeft + 300,mTop,mRight + 300,mBottom);//重新布局
使用layout方法会直接改变View的位置,其内部会把四个参数分别赋值给mLeft、mTop、mRight、mBottom四个变量,四个顶点的位置也就相应改变。我们可以概括成如下伪代码:
targetView.layout(targetView.getLeft()+offsetX,targetView.getTop()+offsetY,targetView.getRight()+offsetX,targetView.getBottom()+offsetY);
使用offsetTopAndBottom/offsetLeftAndRight
imageView.offsetLeftAndRight(300); //将imageView沿水平正方向偏移300px
imageView.offsetTopAndBottom(300); //将iamgeView沿竖直正方向偏移300px
此种方式也会改变View的位置参数。
使用ViewDragHelper
本篇暂不做介绍了,以后可能会专门写一篇关于ViewDragHelper的博客。
总结
以上方式均能实现View的滑动,具体使用哪种方式,我们需要视情况而定。
- scrollTo/scrollBy: 操作简单,适合对View内容的滑动。
- View动画: 适合没有交互的View,方便实现复杂的动画效果。
- 属性动画:操作简单,适用于有交互的情况,方便实现复杂的动画效果。
- 布局参数、layout、offsetTopAndBottom/offsetLeftAndRight: 真实改变了View的位置,适合有交互的情况。
网友评论