1.简单说明
淘宝详情页就不用我一一介绍了，昨天逛淘宝看到这个效果时，让我想起了去年刚学习Android只会使用现成的时候，当时在网上找了一个这种效果的使用了，并不懂怎么实现的。现在就看到一种效果就想自己实现一下，我想这就是刚接触某个知识时的好奇心吧
说走咱就走啊，本文只是介绍一种实现思路，网上也已经有了很多种实现方式，有问题请指正
效果图（我有很用心的找美女图的）
2.实现思路
继承LinearLayout，设置方向为垂直
控件中有两个ScrollView,至于为什么要使用ScrollView，主要是因为内容超过一页时省去自己处理滑动
关键是事件分发处理。监听两个ScrollView的滑动事件，当第一页滑动到底部时，再向上拖动时，拦截事件，判断距离，超过设定值时，滑动到第二页，否则回弹；同理，当第二页滑动到顶部时，再向下拖动时，拦截事件，判断距离，超过设定值时，滑动到第一页，否则回弹（还有很多细节需要结合代码讲解）
关于回弹和滑动换页使用的是Scroller，对于Scroller的使用，本文不做过多解释
3.实现
3.1重写ScrollView
根据实现思路，我们需要监听ScrollView是否滑动到顶部和底部，但是ScrollView的setOnScrollChangeListener()方法在api23才添加。主要是重写ScrollViewonScrollChanged(int l, int t, int oldl, int oldt)方法。
l:当前水平方向滚动值,和getScrollX()相等
t:当前竖直方向滚动值,和getScrollY()相等
oldl:上一次水平滚动值
oldt：上一次竖直滚动值
监听接口：
|
1
2
3
4
5
|
public
interface
OnScrollEndListener {
void
scrollToBottom(View view);
void
scrollToTop(View view);
void
scrollToMiddle(View view);
}
|
onScrollChanged方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
protected
void
onScrollChanged(
int
l,
int
t,
int
oldl,
int
oldt) {
super
.onScrollChanged(l, t, oldl, oldt);
if
(t ==
0
){
if
(mOnScrollBottomListener !=
null
) {
mOnScrollBottomListener.scrollToTop(
this
);
}
}
else
if
(t + getMeasuredHeight() >= getChildAt(
0
).getMeasuredHeight()){
if
(mOnScrollBottomListener !=
null
) {
mOnScrollBottomListener.scrollToBottom(
this
);
}
}
else
{
if
(mOnScrollBottomListener !=
null
) {
mOnScrollBottomListener.scrollToMiddle(
this
);
}
}
}
|
3.2重写onMeasure方法、page的获取与设置
显示调用第二个自孩子的测量方法，不然尺寸有可能为0
|
1
2
3
4
5
6
7
8
9
10
11
|
protected
void
onMeasure(
int
widthMeasureSpec,
int
heightMeasureSpec) {
super
.onMeasure(widthMeasureSpec, heightMeasureSpec);
/**
* 显示调用第二个自孩子的测量方法，不然尺寸有可能为0
*/
View child2 = getChildAt(
1
);
if
(child2 !=
null
) {
child2.measure(widthMeasureSpec, heightMeasureSpec);
}
}
|
在onFinishInflate中初始化两个页面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
protected
void
onFinishInflate() {
super
.onFinishInflate();
if
(getChildCount() ==
2
){
View child1 = getChildAt(
0
);
if
(child1
instanceof
ScrollEndScrollView){
scrollView1 = (ScrollEndScrollView) child1;
}
View child2 = getChildAt(
1
);
if
(child2
instanceof
ScrollEndScrollView){
scrollView2 = (ScrollEndScrollView) child2;
}
}
initEvent();
}
|
为两个页面设置滑动监听
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
private
ScrollEndScrollView.OnScrollEndListener scrollEndListener =
new
ScrollEndScrollView.OnScrollEndListener() {
public
void
scrollToBottom(View view) {
if
(view == scrollView1){
isToBotttom =
true
;
}
}
public
void
scrollToTop(View view) {
if
(view == scrollView2){
isToTop =
true
;
}
}
@Override
public
void
scrollToMiddle(View view) {
if
(view == scrollView1){
isToBotttom =
false
;
}
if
(view == scrollView2){
isToTop =
false
;
}
}
};
|
3.3Scroller使用的几步
Scroller的英文解释是：
This class encapsulates scrolling. You can use scrollers (Scroller or OverScroller) to collect the data you need to produce a scrolling animation—for example, in response to a fling gesture. Scrollers track scroll offsets for you over time, but they don't automatically apply those positions to your view. It's your responsibility to get and apply new coordinates at a rate that will make the scrolling animation look smooth.
此类封装滚动。您可以使用滚动条（滚轮或OverScroller）收集你需要制作一个滚动的动画，例如，响应一扔手势的数据。滚动条为您跟踪滚动偏移量随着时间的推移，但他们不会自动将新的位置设置到View中。你的任务是获取并使用一个合适的速度，使滚动动画看起来更平滑。
简而言之，有关滑动的你都可以使用这个实现。
需要重写的方法
|
1
2
3
4
5
6
7
8
9
10
11
|
@Override
public
void
computeScroll() {
super
.computeScroll();
//先判断mScroller滚动是否完成
if
(mScroller.computeScrollOffset()) {
//这里调用View的scrollTo()完成实际的滚动
scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
//必须调用该方法，否则不一定能看到滚动效果
postInvalidate();
}
}
|
辅助方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//调用此方法设置滚动的相对偏移
public
void
smoothScrollBy(
int
dx,
int
dy) {
//设置mScroller的滚动偏移量
mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), dx, dy, Math.max(
300
, Math.abs(dy)));
invalidate();
//这里必须调用invalidate()才能保证computeScroll()会被调用，否则不一定会刷新界面，看不到滚动效果
}
//调用此方法滚动到目标位置
public
void
smoothScrollTo(
int
fx,
int
fy) {
int
dx = fx - mScroller.getFinalX();
int
dy = fy - mScroller.getFinalY();
smoothScrollBy(dx, dy);
}
|
3.4事件分发
最关键的部分，逻辑稍复杂，细节处理较多。这里重写dispatchTouchEvent。
显示第一页时
未滑动到底部，事件由scrollView1自己处理
滑动到底部时，如果继续向上拖动，拦截事件，父控件处理滑动；继续向下拖动时，如果父控件（即该控件）当前滚动最后位置(mScroller.getFinalY())不为0， 如果父控件继续滚动不会出现负值时（出现负值时会导致头部空白，因为这时是父控件控制，scrollView1不可滑动），不拦截事件，父控件处理滑动，否则，强制滑动到0位置，并把事件下发给子控件
显示第二页时
未滑动到最顶部时，事件由scrollView2自己处理
滑动到顶部时，如果继续向下拖动，拦截事件，父控件处理滑动;继续向上拖动时，如果父控件当前滚动位置小于第一页高度，拦截事件，父控件处理滑动，否则，滑动到第二页起始位置，并把事件下发给子控件
ACTION_MOVE中进行事件分发，ACTION_UP中进行切换页面、回弹
关于使用scroller滑动，实现弹性效果，简单实现请看这里简单的弹性实现代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
@Override
public
boolean
dispatchTouchEvent(MotionEvent ev) {
int
action = ev.getAction();
int
yPosition = (
int
) ev.getY();
switch
(action) {
case
MotionEvent.ACTION_DOWN:
mScroller.abortAnimation();
mLastY = yPosition;
mMoveY =
0
;
break
;
case
MotionEvent.ACTION_MOVE:
mMoveY = (mLastY - yPosition);
mLastY = yPosition;
if
(isToBotttom){
if
(mMoveY >
0
){
//向上
smoothScrollBy(
0
, mMoveY);
return
true
;
}
else
{
//向下
if
(mScroller.getFinalY() !=
0
){
//这是出于第一页和第二页显示连接处
if
(getScrollY() + mMoveY >
0
){
smoothScrollBy(
0
, mMoveY);
return
true
;
}
else
{
smoothScrollTo(
0
,
0
);
return
super
.dispatchTouchEvent(ev);
}
}
}
}
else
if
(isToTop){
if
(mMoveY <
0
){
//向下
smoothScrollBy(
0
, mMoveY);
return
true
;
}
else
{
//向上
if
(mScroller.getFinalY() < scrollView1.getHeight()){
//这是出于第一页和第二页显示连接处
smoothScrollBy(
0
, mMoveY);
return
true
;
}
else
{
smoothScrollTo(
0
, scrollView1.getHeight());
return
super
.dispatchTouchEvent(ev);
}
}
}
//处理快速滑动时两页覆盖问题
if
(pageIndex ==
0
){
smoothScrollTo(
0
,
0
);
}
else
if
(pageIndex ==
1
){
smoothScrollTo(
0
, scrollView1.getHeight());
}
break
;
case
MotionEvent.ACTION_UP:
case
MotionEvent.ACTION_CANCEL:
if
(isToBotttom){
if
(Math.abs(getScrollY()) > TO_NEXT_PAGE_HEIGHT){
//移动到第二页
pageIndex =
1
;
smoothScrollTo(
0
, scrollView1.getHeight());
isToBotttom =
false
;
isToTop =
true
;
}
else
{
//回弹
smoothScrollBy(
0
, -mScroller.getFinalY());
}
}
else
if
(isToTop){
if
(scrollView1.getHeight() - getScrollY() > TO_NEXT_PAGE_HEIGHT){
//移动到第一页
pageIndex =
0
;
smoothScrollTo(
0
,
0
);
isToBotttom =
true
;
isToTop =
false
;
}
else
{
//回弹
smoothScrollTo(
0
, scrollView1.getHeight());
}
}
break
;
default
:
break
;
}
return
super
.dispatchTouchEvent(ev);
}
|
4.总结
实现该控件，需要掌握的知识点主要是自定义控件的基本步骤、Scroller的基本使用和事件分发，当然这里最关键的处理还是事件分发。开头也说了，虽然这个有很多人实现过了，但还是想用自己的方式实现一遍。大笑三声，哈哈哈，又实现一个自定义控件…博主还在自定义控件学习阶段，请谨慎使用该控件到项目中。
5.下载
https://github.com/LineChen/TwoPageLayout
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。