第三章 View
1.View的基础知识
1.1 什么是View
View是Android所有控件的基类,比如button,listView等的基类都是View。除了View以外,还有一个ViewGroup。ViewGroup代表一组View的集合,ViewGroup也是一种View
1.2 View的参数
view的位置由四个顶点确定,分别对应四个属性top、left、right、bottom,其中top是左上角纵坐标,left是左上角的横坐标,right是右下角的横坐标,bottom是右下角的纵坐标。这些坐标是针对父容器来说的,是相对坐标。横坐标的正方向是向右,纵坐标的正方向是向下。
很容易得到如下的关系式
w
i
d
t
h
=
r
i
g
h
t
−
l
e
f
t
h
e
i
g
h
t
=
b
o
t
t
o
m
−
t
o
p
width = right - left \\ height = bottom - top
width=right−leftheight=bottom−top
这些参数的获取,可以通过get方法
例如
int left=view.getLeft();
从3.0开始,新增了几个属性,分别是x、y、translationX和translationY。其中xy是左上角的坐标,translationX、translationY是view左上角与父布局的偏移量,translationX和translationY默认是0。他们的换算公式如下
x
=
l
e
f
t
+
t
r
a
n
s
l
a
t
i
o
n
X
y
=
t
o
p
+
t
r
a
n
s
l
a
t
i
o
n
Y
x = left + translationX\\ y = top + translationY
x=left+translationXy=top+translationY
注意如果发生平移的话,此时变化的是x和y 以及translation,left和top代表原始的view的左上角坐标,不会发生变化。
1.3 MotionEvent和TouchSlop
1.3.1 MotionEvent
代表从手指接触屏幕后的几个事件,有以下几个事件。
ACTION_DOWN——手指接触界面
ACTION_MOVE——手指在界面上移动
ACTION_UP——手指离开界面
点击—>滑动—>松开 会依次调用 ACTION_DOWN—> ACTION_MOVE—> …… ACTION_MOVE—>ACTION_UP
通过MotionEvent对象可以获取点击事件的x,y坐标;getX与getRawX两组,区别在于前者返回的是当前view左上角x、y,后者返回相对于屏幕左上角的坐标
1.3.2 TouchSlop
TouchSlop是能被系统识别的最小移动距离,这是一个常量,与设备有关,可以通过以下代码获得。
ViewConfiguration.get(getContext()).getScaledTouchSlop();
可以在frameworks/base/core/res/res/values/config.xml中找到config_viewConfigurationTouchSlop的定义,更改对应的值就可以增加识别的最小距离,防止过于灵敏。
<dimen name="config_viewConfigurationTouchSlop">8dp</dimen>
1.4 VelocityTracker、GestureDetector和Scroller
1.4.1 VelocityTracker
速度追踪,用于追踪手指滑动的速度,包括了水平和数值的速度。
使用方式:
(1)首先在view的onTouchEvent中追踪事件
@Override
public boolean onTouchEvent(MotionEvent event) {
VelocityTracker velocityTracker=VelocityTracker.obtain();
velocityTracker.addMovement(event);
……
}
(2)获取速度。
velocityTracker.computeCurrentVelocity(1000);
int x= (int) velocityTracker.getXVelocity();
int y= (int) velocityTracker.getYVelocity();
这里的速度指的是一段时间内,手指所划过的像素数,computeCurrentVelocity的参数单位是ms,比如将时间设置1000代表的是1秒内划过的像素数。
(3)不使用时,调用clear清空
velocityTracker.clear();
velocityTracker.recycle();
1.4.2 GestureDetector
GestureDetector手势检测,用于辅助检测用户的单击、滑动、长按、双击等行为。
使用方式
(1)实现OnGestureListener接口,如果有需要还可以实现OnDoubleTapListener接口
GestureDetector gestureDetector = new GestureDetector(getContext(),
new GestureDetector.OnGestureListener() {
@Override public boolean onDown(MotionEvent e) {
return false;
}
@Override public void onShowPress(MotionEvent e) {
}
@Override public boolean onSingleTapUp(MotionEvent e) {
return false;
}
@Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
return false;
}
@Override public void onLongPress(MotionEvent e) {
}
@Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
return false;
}
});
gestureDetector.setIsLongpressEnabled(false);
(2)接着接管目标view的onTouchEvent
@Override public boolean onTouchEvent(MotionEvent event) {
boolean flag=gestureDetector.onTouchEvent(event);
return flag;
}
(3)
方法名 | 描述 | 所属接口 |
---|---|---|
onDown | 手指轻轻触摸屏幕的一瞬间,由一个ACTION_DOWN触发 | OnGestureListener |
onShowPress | 手指轻轻触摸屏幕,尚未松开或拖动,由一个ACTION_DOWN触发 *注意和onDown()的区别,它强调的是没有松开或者拖动的状态 | OnGestureListener |
onSingleTabUp | 手指(轻轻触摸屏幕后)松开,伴随着一个MotionEvent.ACTION_UP而触发,这是单击行为 | OnGestureListener |
onScroll | 手指按下屏幕并拖动,由1个ACTION_DOWN,多个ACTION_MOVE触发,这是拖动行为 | OnGestureListener |
onLongPress | 用户长久地按屏幕不放,即长按 | OnGestureListener |
onFling | 当用户按下触摸屏、快速滑动后松开,由一个ACTION,多个ACTION_MOVE和1个ACTION_UP触发,这是快速滑动行为 | OnGestureListener |
onDoubleTap | 双击,由2次连续的单击组成,它不可能和onSingleTapConfirmed共存 | OnDoubleTapListener |
onSingleTapConfirmed | 严格的单击行为 *注意它和onSingleTapUp地区别,如果触发了onSingleTapConfirmed,那么后面不可能再紧跟着另一个单击行为,即这只可能是单击,而不可能使双击中的一次单击 | OnDoubleTapListener |
onDoubleTabEvent | 表示发送了双击行为,再双击期间,ACTION_DOWN、ACTION_MOVE和ACTION_UP都会触发此回调 | OnDoubleTapListener |
1.4.3 Scroller
弹性滑动对象,用于实现view的弹性滑动。区别于scrollTo和scrollBy方法进行滑动时是瞬时实现的,用户体验感较差,而Scroller可以配合View的computeScroll方法用来实现有过渡效果的滑动。
使用方式
Scroller scroller = new Scroller(mContext);private void smoothScrollTo(int destX,int destY) { int scrollX = getScrollX(); int delta = destX - scrollX; //1000ms内滑向dest,效果就是慢慢滑动 scroller.startScroll(scrollX,0,delta,0,1000); invalidate();} @Overridepublic void computeScroll() { if (scroller.computeScrollOffset()){ scrollTo(scroller.getCurrX(), scroller.getCurrY()); postInvalidate(); }}
具体的代码在下一节进行讲解。
2. View滑动
view的滑动有三种实现方式
2.1 使用scrollTo/scrollBy
看一下源码
可以看到scrollTo首先判断一下,首先判断判断mScrollX/Y是否等于 外部设置的x/y,不相等时,进行重新赋值,然后调用invalidateParentCaches()清空父View的缓存,用于强制父View进行视图的重建。然后调用onScrollChanged ()这个方法是scrollBy/scrollTo滚动时而产生的回调。awakenScrollBars()会启动平滑滚动的动画,动画开始时返回true。postInvalidateOnAnimation()用来在下一个动画帧上发生失效。
public void scrollTo(int x, int y) { if (mScrollX != x || mScrollY != y) { int oldX = mScrollX; int oldY = mScrollY; mScrollX = x; mScrollY = y; invalidateParentCaches(); onScrollChanged(mScrollX, mScrollY, oldX, oldY); if (!awakenScrollBars()) { postInvalidateOnAnimation(); } }}
可以看到scrollBy实际上就是调用了scrollTo,scrollTo使用的是绝对坐标,scrollBy是相对之前的坐标。
public void scrollBy(int x, int y) { scrollTo(mScrollX + x, mScrollY + y);}
看代码可以发现有两个比较重要的参数mScrollX和mScrollY。
首先在说这个直接要理解一个概念就是,scrollTo和scrollBy只能改变view内容的显示位置,而不能改变view实际在布局中的位置。好比海市蜃楼能显示在很多不同的地方,但是正常这个幻想实体的地方确实固定的。mScrollX和mScrollY代表的是内容边缘到view边缘的距离。他们的关系如下所示。
mScrollX = View的左边缘 - View内容的左边缘mScrollY = View的上边缘 - View内容的上边缘
2.2 通过动画
通过动画可以让一个view进行,使用动画进行平移则是改变translation。而动画有包括了两种,分别是传统的View动画和属性动画。如果使用属性动画,为了兼容3.0以下版本,需要使用开源的动画库nineoldandroid。
(1)view动画
先创建anim的xml文件
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" android:zAdjustment="normal"> <translate android:duration="1000" android:fromXDelta="0" android:fromYDelta="0" android:toXDelta="100" android:toYDelta="100" android:interpolator="@android:anim/linear_interpolator" /></set>
(2)属性动画
ObjectAnimator.ofFloat(view, "translationX", 0, 100).setDuration(100).start();
view动画是对动画的影象做操作,不能真正改变位置参数,如果想在动画后保存,需要加上 android:fillAfter=“true”。view动画带来了一个问题,比如一个button被移动了100的距离,然而用户点击button却没有点击事件,而点平移之前button所在位置却能触发点击事件,因为不管怎么移动,button在系统看来它的位置参数没有变动,仍然在原地,因此点击事件自然也在原地触发。而使用属性动画则不会导致这个问题。
2.3改变布局参数
ViewGroup.MarginLayoutParams layoutParams= (ViewGroup.MarginLayoutParams) view.getLayoutParams(); layoutParams.leftMargin+=100; view.requestLayout(); //或者 //view.setLayoutParams(layoutParams);
2.4三种方式的区别
scrollTo/scrollTo 使用简单,不影响点击事件。缺点是只能滑动view的内容而不能移动view。
动画 如果使用属性动画,则没有明显的缺点。如果使用view动画,则会无法和用户交互。比较复杂的动画效果需要动画才能实现。
布局参数 适合交互的view
3.弹性滑动
3.1scroller
Scroller scroller = new Scroller(mContext); private void smoothScrollTo(int destX,int destY) { int scrollX = getScrollX(); int delta = destX - scrollX; //1000ms内滑向dest,效果就是慢慢滑动 scroller.startScroll(scrollX,0,delta,0,1000); invalidate(); } @Override public void computeScroll() { if (scroller.computeScrollOffset()){ scrollTo(scroller.getCurrX(), scroller.getCurrY()); postInvalidate(); } }
使用时首先创建一个Scroller对象,然后将原坐标和目标坐标传给startScroll(),查看源码可以发现startScroll()什么都没做,只是存储了几个传递的参数。mStartX mFinalX是滑动的起点和终点 mDeltaX 是滑动的距离 mDuration是持续时间。因此可以知道startScroll其实并没有进行滑动,真正的滑动时在下面的invalidate()进行。invalidate方法会导致view的重绘,在draw过程中会调用computeScroll;然后继续这样循环,将一个大的滑动拆分成很多个小的滑动,从而实现弹性过渡的效果。
public void startScroll(int startX, int startY, int dx, int dy, int duration) { mMode = SCROLL_MODE; mFinished = false; mDuration = duration; mStartTime = AnimationUtils.currentAnimationTimeMillis(); mStartX = startX; mStartY = startY; mFinalX = startX + dx; mFinalY = startY + dy; mDeltaX = dx; mDeltaY = dy; mDurationReciprocal = 1.0f / (float) mDuration;}
computeScroll在view中是一个空实现,需要自己进行重写。
computeScrollOffset中的代码,很容易理解 首先获取了目前已经过去的时间,在判断滑动的模式。通过Interpolator这个差值器获取动画的完成度,然后随着时间的流逝,不断地增加x、y的坐标,从而达到弹性滑动的效果。返回值为true时代表动画完成,false时代表进行中。
public boolean computeScrollOffset() { …… int timePassed = (int)(AnimationUtils.currentAnimationTimeMillis() - mStartTime); if (timePassed < mDuration) { switch (mMode) { case SCROLL_MODE: final float x = mInterpolator.getInterpolation(timePassed * mDurationReciprocal); mCurrX = mStartX + Math.round(x * mDeltaX); mCurrY = mStartY + Math.round(x * mDeltaY); break; …… return true;}
这样可以知道,就是每次隔一段时间进行位置的计算重绘,循环进行,将一次次小的scrollTo 瞬时滑动在整个时间段上呈现出弹性滑动的效果。
3.2 通过动画
由于动画天生就是带有弹性滑动的效果,比如之前所说的下列代码可以实现100px的弹性滑动。
ObjectAnimator.ofFloat(view, "translationX", 0, 100).setDuration(100).start();
除了这个方式以外,还可以通过下面的方式进行移动。
final int startX=0;final int deltaX=100;ValueAnimator animator=ValueAnimator.ofInt(0,1).setDuration(1000);animator.addUpdateListener(new AnimatorUpdateListener(){ @override public void onAnimationUpdate(ValueAnimator animator){ //获取当前动画执行时间的百分比 float fraction=animator.getAnimatedFraction(); mButton1.scrollTo(startX+(int)(deltaX*fraction),0) }});animator.start();
3.3通过延时策略
通过一个循环,不断的发送延时scrollTo达到弹性滑动的功能。