1. 首页
  2. 文章中心
  3. Android

Android中ScrollView监听滑动距离案例讲解

189 阅读 0 评论
我是靠谱客的博主 眯眯眼夕阳，这篇文章主要介绍Android中ScrollView监听滑动距离案例讲解，现在分享给大家，希望可以做个参考。

需求：想实现像美团中列表下拉后出现悬浮窗的效果。

思路：首先对ScrollView进行滑动监听，然后在onScrollChanged()方法中获取到滑动的Y值，接着进行相关操作即可。

效果一如如下：

实现步骤：

1、自定义MyScrollView

（1）重写onScrollChanged()获取Y值。

（2）自定义滑动监听接口onScrollListener并公开此接口。

复制代码
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
public class MyScrollView extends ScrollView {
 
    private OnScrollListener onScrollListener;
 
    public MyScrollView(Context context) {
        super(context);
    }
 
    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
 
    public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
 
    @Override
    protected int computeVerticalScrollRange() {
        return super.computeVerticalScrollRange();
    }
 
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (onScrollListener != null) {
            onScrollListener.onScroll(t);
        }
    }
 
    /**
     * 接口对外公开
     * @param onScrollListener
     */
    public void setOnScrollListener(OnScrollListener onScrollListener) {
        this.onScrollListener = onScrollListener;
    }
 
    /**
     *
     * 滚动的回调接口
     *
     * @author xiaanming
     *
     */
    public interface OnScrollListener{
        /**
         * 回调方法， 返回MyScrollView滑动的Y方向距离
         * @param scrollY
         *              、
         */
        void onScroll(int scrollY);
    }
}

2、布局文件如下：

（主要是创建两个相同的布局，顶部一个，相应的位置一个，后面有用）

复制代码
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:id="@+id/Main_lLayoutParent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
 
    <com.deepreality.scrollviewscrollpositiondemo.MyScrollView
        android:id="@+id/Main_myScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
 
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
 
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="260dp"
                    android:src="@mipmap/icon_product"
                    android:scaleType="fitXY"/>
 
                <LinearLayout
                    android:id="@+id/Main_lLayoutViewTemp"
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:orientation="horizontal"
                    android:background="@color/colorRed"
                    android:gravity="center_vertical"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp">
 
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="￥139"
                        android:textSize="24dp"
                        android:textColor="@color/colorWhite"/>
 
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="match_parent"
                        android:orientation="vertical"
                        android:gravity="bottom"
                        android:paddingLeft="10dp"
                        android:paddingBottom="10dp">
 
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="已抢900件"
                            android:textSize="11dp"
                            android:textColor="@color/colorWhite"/>
 
                    </LinearLayout>
 
                    <Button
                        android:layout_width="100dp"
                        android:layout_height="35dp"
                        android:text="立即购买"
                        android:textColor="@color/colorWhite"
                        android:background="@drawable/btn_corner"/>
 
                </LinearLayout>
 
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="内容"/>
 
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="内容"/>
 
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="内容"/>
 
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="内容"/>
 
            </LinearLayout>
 
            <LinearLayout
                android:id="@+id/Main_lLayoutView"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:orientation="horizontal"
                android:background="@color/colorRed"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:paddingRight="10dp">
 
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="￥139"
                    android:textSize="24dp"
                    android:textColor="@color/colorWhite"/>
 
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:gravity="bottom"
                    android:paddingLeft="10dp"
                    android:paddingBottom="10dp">
 
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="已抢900件"
                        android:textSize="11dp"
                        android:textColor="@color/colorWhite"/>
 
                </LinearLayout>
 
                <Button
                    android:id="@+id/Main_btnBuy"
                    android:layout_width="100dp"
                    android:layout_height="35dp"
                    android:text="立即购买"
                    android:textColor="@color/colorWhite"
                    android:background="@drawable/btn_corner"/>
 
            </LinearLayout>
 
        </FrameLayout>
 
    </com.deepreality.scrollviewscrollpositiondemo.MyScrollView>
 
</LinearLayout>

3、MainActivity.java的代码如下：

复制代码
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
public class MainActivity extends AppCompatActivity implements MyScrollView.OnScrollListener, View.OnClickListener {
 
    private Context mContext;
 
    private LinearLayout lLayoutParent, lLayoutTemp, lLayoutView;
    private Button btnBuy;
    private MyScrollView myScrollView;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        baseDataInit();
        bindViews();
        viewsAddListener();
        viewsDataInit();
    }
 
    private void baseDataInit() {
        mContext = this;
    }
 
    private void bindViews() {
        lLayoutParent = findViewById(R.id.Main_lLayoutParent);
        lLayoutTemp = findViewById(R.id.Main_lLayoutViewTemp);
        lLayoutView = findViewById(R.id.Main_lLayoutView);
        btnBuy = findViewById(R.id.Main_btnBuy);
        myScrollView = findViewById(R.id.Main_myScrollView);
    }
 
    private void viewsAddListener() {
        //当布局的状态或者控件的可见性发生改变回调的接口
        lLayoutParent.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                //这一步很重要，使得上面的购买布局和下面的购买布局重合
                onScroll(myScrollView.getScrollY());
            }
        });
        myScrollView.setOnScrollListener(this);
        btnBuy.setOnClickListener(this);
    }
 
    private void viewsDataInit() {
 
    }
 
    @Override
    public void onScroll(int scrollY) {
        int mBuyLayout2ParentTop = Math.max(scrollY, lLayoutTemp.getTop());
        lLayoutView.layout(0, mBuyLayout2ParentTop, lLayoutView.getWidth(), mBuyLayout2ParentTop + lLayoutView.getHeight());
    }
 
    @Override
    public void onClick(View v) {
        Toast.makeText(mContext, "您点击了购买按钮", Toast.LENGTH_SHORT).show();
    }
}

其中，onScroll()接口方法中监听到的是垂直方向滑动的距离Y，可以根据自己的需要进行布局的其他操作。

附加：

效果二如下图所示：

（根据ScrollView下滑距离设置布局的透明度）

布局文件如下：

复制代码
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:id="@+id/Main_lLayoutParent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.deepreality.scrollviewscrollpositiondemo.MyScrollView
            android:id="@+id/Main_myScrollView"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="260dp"
                            android:src="@mipmap/icon_product"
                            android:scaleType="fitXY"/>

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="200dp"
                            android:text="内容"/>

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="200dp"
                            android:text="内容"/>

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="200dp"
                            android:text="内容"/>

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="200dp"
                            android:text="内容"/>

                    </LinearLayout>

                </LinearLayout>

            </FrameLayout>

        </com.deepreality.scrollviewscrollpositiondemo.MyScrollView>

        <LinearLayout
            android:id="@+id/Main_lLayoutViewTemp1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:orientation="horizontal"
            android:background="@color/colorRed"
            android:gravity="center_vertical"
            android:paddingLeft="10dp"
            android:layout_alignParentTop="true"
            android:paddingRight="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="￥139"
                android:textSize="24dp"
                android:textColor="@color/colorWhite"/>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="bottom"
                android:paddingLeft="10dp"
                android:paddingBottom="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="已抢900件"
                    android:textSize="11dp"
                    android:textColor="@color/colorWhite"/>

            </LinearLayout>

            <Button
                android:id="@+id/Second_btnBuy"
                android:layout_width="100dp"
                android:layout_height="35dp"
                android:text="立即购买"
                android:textColor="@color/colorWhite"
                android:background="@drawable/btn_corner"/>

        </LinearLayout>

    </RelativeLayout>

</LinearLayout>

相应的代码和上一个样式的代码基本一致，只是改了接口中的实现方法。

复制代码
1
2
3
4
5
6
7
@Override
public void onScroll(int scrollY) {
    if (scrollY >= 225) {
        scrollY = 225;
    }
    lLayoutViewTemp1.getBackground().setAlpha(scrollY);
}

到此这篇关于Android中ScrollView监听滑动距离案例讲解的文章就介绍到这了,更多相关Android中ScrollView监听滑动距离内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客！

最后

以上就是眯眯眼夕阳最近收集整理的关于Android中ScrollView监听滑动距离案例讲解的全部内容，更多相关Android中ScrollView监听滑动距离案例讲解内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(125)

相关文章

Android实现控件拖动效果
Android实现控件拖动效果
Flutter listview如何实现下拉刷新上拉加载更多功能
Flutter listview如何实现下拉刷新上拉加载更多功能
Android View实现圆形进度条
Android View实现圆形进度条
Android实现微信登录的示例代码
Android实现微信登录的示例代码
Android中ScrollView监听滑动距离案例讲解
Android中ScrollView监听滑动距离案例讲解
Android仿字节颜色自定义进度条
Android仿字节颜色自定义进度条
Android实现旋转动画的两种方式案例详解
Android实现旋转动画的两种方式案例详解
Android实现雅虎新闻摘要加载视差动画效果
Android实现雅虎新闻摘要加载视差动画效果

评论列表共有 0 条评论

立即
投稿
返回
顶部