1、通过手势和相对坐标来完成可随手指滑动的自定义View
了解了Android 中的坐标系，我们通过获取View的相对坐标来完成一个可随手指进行滑动的自定义View的创建。
先创建一个自定义DrawCanvasView继承View，实现构造方法
class DrawCanvasView : View {
constructor(context: Context?) :super(context) {
}
constructor(context: Context?, attrs: AttributeSet?) :super(context, attrs) {
}
}
声明两个变量，lastX，lastY
var lastX =0F//记录上次的X坐标
var lastY =0F//记录上一次的Y坐标
重写onTouchEvent方法，定义x，y参数
override fun onTouchEvent(event: MotionEvent?): Boolean {
var x = event!!.x
var y = event!!.y
return true
}
监听MotionEvent手势动作，当触发MotionEvent.ACTION_DOWN时，记录上次的相对坐标的位置，当触发MotionEvent.ACTION_MOVE时，计算出x，y轴的偏移量，重新设置View的显示位置。代码如下
when (event!!.action) {
MotionEvent.ACTION_DOWN -> {
lastX = x//每次更新上次的x坐标
lastY = y//每次更新上次的y坐标
}
MotionEvent.ACTION_MOVE -> {
var offsetX = (x -lastX).toInt()//计算x轴偏移量
var offsetY = (y -lastY).toInt()//计算y轴偏移量
layout(left + offsetX, top + offsetY, right + offsetX, bottom + offsetY)//通过layout方法重新设置View的位置
}
}
整个DrawCanvasView的代码如下
class DrawCanvasView : View {
var lastX =0F//记录上次的X坐标
var lastY =0F//记录上一次的Y坐标
constructor(context: Context?) :super(context) {
}
constructor(context: Context?, attrs: AttributeSet?) :super(context, attrs) {
}
override fun onTouchEvent(event: MotionEvent?): Boolean {
var x = event!!.x
var y = event!!.y
when (event!!.action) {
MotionEvent.ACTION_DOWN -> {
lastX = x
lastY = y
}
MotionEvent.ACTION_MOVE -> {
var offsetX = (x -lastX).toInt()
var offsetY = (y -lastY).toInt()
layout(left + offsetX, top + offsetY, right + offsetX, bottom + offsetY)
}
}
return true
}
}
在布局文件中引用该DrawCanvasView
运行程序后，可以对View进行拖拽滑动的效果。
也可以把MotionEvent.ACTION_MOVE代码中的layout(left + offsetX, top + offsetY, right + offsetX, bottom + offsetY)换成以下代码
offsetLeftAndRight(offsetX)
offsetTopAndBottom(offsetY)
也可以达到手指滑动View的效果。
2、通过动画来实现View的平移、缩放、旋转或动作组合
一、anim xml文件实现动画：
平移：在res/anim文件夹下创建一个命名为translate的xml文件，代码如下
给在上面引用的DrawCanvasView设置一个id为custom_view
在activity中设置view.setAnimation为AnimationUtils.loadAnimation(this, R.anim.translate)
mDataBinding.customView.animation = AnimationUtils.loadAnimation(this, R.anim.translate)
效果如下
以同样的步骤可以实现View的缩放和旋转等，这里就不多做赘述和效果图展示，只把设置的xml文件截图一下
旋转：
缩放：
再做一次动画组合：
二：属性动画
ObjectAnimator、使用属性动画一样可以实现View的平移、旋转和缩放，平移的代码
var animator= ObjectAnimator.ofFloat(mDataBinding.customView,"translationX",300f)
animator.duration=1000
animator.start()
实现旋转和缩放，把ObjectAnimator.ofFloat方法中的propertyName参数分别替换为rotation、rotationX、rotationY或者scaleX、scaleY等相对应的方法。
ValueAnimator、使用ValueAnimator如下
var valueAnimator=ValueAnimator.ofFloat(0f,100f)
valueAnimator.setTarget(mDataBinding.customView)
valueAnimator.setDuration(2000).start()
valueAnimator.addUpdateListener{
mDataBinding.customView.scaleX=it.animatedValue as Float
}
ValueAnimator并不支持实现动图，只能通过监听来获取到设置的取值变化，通过获取到的这个取值变化来更新View的状态，从而实现动画的效果。
刚才在上面的步骤中，通过anim.xml来实现了一次view的多种动画的组合效果，那么通过这个Java代码的Animator怎么来实现呢，用到了这么一个类AnimatorSet，以下为代码：
var animator= ObjectAnimator.ofFloat(mDataBinding.customView,"translationX",1.5f)
var animator2= ObjectAnimator.ofFloat(mDataBinding.customView,"scaleX",1.5f)
var animator3= ObjectAnimator.ofFloat(mDataBinding.customView,"rotation",1.5f)
var set=AnimatorSet()
set.duration=3000
set.play(animator).with(animator2).after(animator3)
set.start()
其中，play()这个方法很好理解，就是启动动画，with则是指的同时执行的动画，after则是在这个动画之后执行，相反before则是在这个动画之前执行。
还有一个类PropertyValuesHolder可以实现组合动画，代码：
var valuesHolder = PropertyValuesHolder.ofFloat("translationX", 1.0f, 1.5f, 1.0f)
var valuesHolder1 = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 1.5f, 1.0f)
var valuesHolder2 = PropertyValuesHolder.ofFloat("rotationX", 0f, 90f, 0f)
var objectAnimator = ObjectAnimator.ofPropertyValuesHolder(
mDataBinding.customView,
valuesHolder,
valuesHolder1,
valuesHolder2
)
objectAnimator.duration =3000
objectAnimator.start()
来看一下效果图
至此，这篇文章就结束了。主要讲了一下比较简单、容易理解的View的一些简单动作或者说是简单动画实现。有说的不对或者说的有歧义的地方，还望看到文章的大神们可以指导、指正，谢谢。
网友评论