这就是一个没啥用的ViewGroup，纯粹是用来学习实践的例子demo
效果图：
towpager.gif
步骤一：布局
1、创建类名为TowPagerView的类，使它继承ViewPager
2、重写onLayout函数，使它的子view横向排列，铺满
class TowPagerView(context: Context, attrs: AttributeSet?) : ViewPager(context, attrs) {
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
var childLeft = 0
var childTop = 0
var childRight = width
var childBottom = height
for (child in children) {
child.layout(childLeft, childTop, childRight, childBottom)
childLeft += width
childRight += width
}
}
}
步骤二：滑动
1、重写onInterceptTouchEvent返回true.拦截事件
2、重写onTouchEvent在MotionEvent.ACTION_DOWNl里保存开始位置的x,y和scrollX
3、在MotionEvent.ACTION_MOVE里根据手指的位置计算出滑动的位置
class TowPagerView(context: Context, attrs: AttributeSet?) : ViewPager(context, attrs) {
private var downX = 0f
private var downY = 0f
private var downScrollX = 0f
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
var childLeft = 0
var childTop = 0
var childRight = width
var childBottom = height
for (child in children) {
child.layout(childLeft, childTop, childRight, childBottom)
childLeft += width
childRight += width
}
}
override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
return true
}
override fun onTouchEvent(ev: MotionEvent): Boolean {
when (ev.action) {
MotionEvent.ACTION_DOWN -> {
downX = ev.x
downY = ev.y
downScrollX = scrollX.toFloat()
}
MotionEvent.ACTION_MOVE -> {
val dx = (downX - ev.x+downScrollX).toInt()
.coerceAtLeast(0)
.coerceAtMost(width)
scrollTo(dx, 0)
}
}
return true
}
}
步骤三、事件拦截判断
当出现左右滑动时，拦截子view的事件，并且阻止父view拦截事件
private var scrolling = false //是否是开始滑动了
private val viewConfiguration: ViewConfiguration = ViewConfiguration.get(context)
private var pagingSlop = viewConfiguration.scaledPagingTouchSlop//最小的滑动距离
...
override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
var result = false
when (ev.action) {
MotionEvent.ACTION_DOWN -> {
scrolling = false
downX = ev.x
downY = ev.y
downScrollX = scrollX.toFloat()
}
MotionEvent.ACTION_MOVE -> {
if (!scrolling) {
val dx = downX - ev.x
if (abs(dx) > pagingSlop) {
scrolling = true
parent.requestDisallowInterceptTouchEvent(true)//父控件不拦截
result = true//自己拦截了
}
}
}
}
return result
}
步骤四、吸附
在松开手指之后根据停留位置判断最终的位置
在MotionEvent.ACTION_UP里判断当前的滑动距离是否超过了屏幕的一半
val targetPage = if (scrollX > width / 2) 1 else 0
val scrollDistance = if (targetPage == 1) width - scrollX else -scrollX
在最终的移动中使用OverScroller来实现弹性滑动
private val overScroller: OverScroller = OverScroller(context)
...
override fun onTouchEvent(ev: MotionEvent): Boolean {
when (ev.action) {
...
MotionEvent.ACTION_UP -> {
val targetPage = if (scrollX > width / 2) 1 else 0
val scrollDistance = if (targetPage == 1) width - scrollX else -scrollX
overScroller.startScroll(scrollX, 0, scrollDistance, 0)
postInvalidateOnAnimation()
}
}
return true
}
override fun computeScroll() {
if (overScroller.computeScrollOffset()) {
scrollTo(overScroller.currX, overScroller.currY)
postInvalidateOnAnimation()
}
}
步骤五、惯性滑动
当手指滑动速度大于阀值是，直接判定用户意图
使用VelocityTracker.obtain()获取VelocityTracker对象来获得滑动速度的相关数据
注意：需要在onInterceptTouchEvent和onTouchEvent的MotionEvent.ACTION_DOWN事件中清空数据。还有添加所有事件的数据
override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
if (ev.actionMasked == MotionEvent.ACTION_DOWN) {
velocityTracker.clear()
}
velocityTracker.addMovement(ev)
...
}
override fun onTouchEvent(ev: MotionEvent): Boolean {
if (ev.actionMasked == MotionEvent.ACTION_DOWN) {
velocityTracker.clear()
}
velocityTracker.addMovement(ev)
...
}
就是一摸一样的代码
接着在onTouchEvent的MotionEvent.ACTION_UP事件中获取速度信息并逻辑计算
MotionEvent.ACTION_UP -> {
velocityTracker.computeCurrentVelocity(1000, maxVelocity.toFloat())
val vx = velocityTracker.xVelocity
val targetPage = if (abs(vx) < minVelocity) {
if (scrollX > width / 2) 1 else 0
} else {
if (vx < 0) 1 else 0
}
...
}
基本的都介绍完了，上完整代码
class TowPagerView(context: Context, attrs: AttributeSet?) : ViewPager(context, attrs) {
private var downX = 0f
private var downY = 0f
private var downScrollX = 0f
private var scrolling = false //是否是开始滑动了
private val overScroller: OverScroller = OverScroller(context)
private val viewConfiguration: ViewConfiguration = ViewConfiguration.get(context)
private var pagingSlop = viewConfiguration.scaledPagingTouchSlop//最小的滑动距离
private val velocityTracker = VelocityTracker.obtain()
private var minVelocity = viewConfiguration.scaledMinimumFlingVelocity
private var maxVelocity = viewConfiguration.scaledMaximumFlingVelocity
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
var childLeft = 0
var childTop = 0
var childRight = width
var childBottom = height
for (child in children) {
child.layout(childLeft, childTop, childRight, childBottom)
childLeft += width
childRight += width
}
}
override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
if (ev.actionMasked == MotionEvent.ACTION_DOWN) {
velocityTracker.clear()
}
velocityTracker.addMovement(ev)
var result = false
when (ev.action) {
MotionEvent.ACTION_DOWN -> {
scrolling = false
downX = ev.x
downY = ev.y
downScrollX = scrollX.toFloat()
}
MotionEvent.ACTION_MOVE -> {
if (!scrolling) {
val dx = downX - ev.x
if (abs(dx) > pagingSlop) {
scrolling = true
parent.requestDisallowInterceptTouchEvent(true)//父控件不拦截
result = true//自己拦截了
}
}
}
}
return result
}
override fun onTouchEvent(ev: MotionEvent): Boolean {
if (ev.actionMasked == MotionEvent.ACTION_DOWN) {
velocityTracker.clear()
}
velocityTracker.addMovement(ev)
when (ev.action) {
MotionEvent.ACTION_DOWN -> {
downX = ev.x
downY = ev.y
downScrollX = scrollX.toFloat()
}
MotionEvent.ACTION_MOVE -> {
val dx = (downX - ev.x + downScrollX).toInt()
.coerceAtLeast(0)
.coerceAtMost(width)
scrollTo(dx, 0)
}
MotionEvent.ACTION_UP -> {
velocityTracker.computeCurrentVelocity(1000, maxVelocity.toFloat())
val vx = velocityTracker.xVelocity
val targetPage = if (abs(vx) < minVelocity) {
if (scrollX > width / 2) 1 else 0
} else {
if (vx < 0) 1 else 0
}
val scrollDistance = if (targetPage == 1) width - scrollX else -scrollX
overScroller.startScroll(scrollX, 0, scrollDistance, 0)
postInvalidateOnAnimation()
}
}
return true
}
override fun computeScroll() {
if (overScroller.computeScrollOffset()) {
scrollTo(overScroller.currX, overScroller.currY)
postInvalidateOnAnimation()
}
}
}
网友评论