微信朋友圈上面的图片封面，qq空间说说上面的图片封面都有下拉反弹的效果，这些都是使用滚动条实现的。下拉，当松开时候，反弹至原来的位置。下拉时候能看到背景图片。那么这里简单介绍一下这种效果的实现。
1、效果图
这部手机显示的分辨率有限，很老的手机调试。
2、具有反弹效果bouncescrollview
|
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
144
145
|
package com.org.scroll; import android.content.context; import android.graphics.rect; import android.util.attributeset; import android.view.motionevent; import android.view.view; import android.view.animation.translateanimation; import android.widget.scrollview; /** * scrollview反弹效果的实现 */public class bouncescrollview extends scrollview { private view inner;// 孩子view private float y;// 点击时y坐标 // 矩形(这里只是个形式，只是用于判断是否需要动画.) private rect normal = new rect(); private boolean iscount = false;// 是否开始计算 public bouncescrollview(context context, attributeset attrs) { super(context, attrs); } /*** * 根据 xml 生成视图工作完成.该函数在生成视图的最后调用，在所有子视图添加完之后. 即使子类覆盖了 onfinishinflate * 方法，也应该调用父类的方法，使该方法得以执行. */ @override protected void onfinishinflate() { if (getchildcount() > 0) { inner = getchildat(0); } } /*** * 监听touch */ @override public boolean ontouchevent(motionevent ev) { if (inner != null) { commontouchevent(ev); } return super.ontouchevent(ev); } /*** * 触摸事件 * * @param ev */ public void commontouchevent(motionevent ev) { int action = ev.getaction(); switch (action) { case motionevent.action_down: break; case motionevent.action_up: // 手指松开. if (isneedanimation()) { animation(); iscount = false; } break; /*** * 排除出第一次移动计算，因为第一次无法得知y坐标， 在motionevent.action_down中获取不到， * 因为此时是myscrollview的touch事件传递到到了listview的孩子item上面.所以从第二次计算开始. * 然而我们也要进行初始化，就是第一次移动的时候让滑动距离归0. 之后记录准确了就正常执行. */ case motionevent.action_move: final float prey = y;// 按下时的y坐标 float nowy = ev.gety();// 时时y坐标 int deltay = (int) (prey - nowy);// 滑动距离 if (!iscount) { deltay = 0; // 在这里要归0. } y = nowy; // 当滚动到最上或者最下时就不会再滚动，这时移动布局 if (isneedmove()) { // 初始化头部矩形 if (normal.isempty()) { // 保存正常的布局位置 normal.set(inner.getleft(), inner.gettop(), inner.getright(), inner.getbottom()); } // log.e("jj", "矩形：" + inner.getleft() + "," + inner.gettop() // + "," + inner.getright() + "," + inner.getbottom()); // 移动布局 inner.layout(inner.getleft(), inner.gettop() - deltay / 2, inner.getright(), inner.getbottom() - deltay / 2); } iscount = true; break; default: break; } } /*** * 回缩动画 */ public void animation() { // 开启移动动画 translateanimation ta = new translateanimation(0, 0, inner.gettop(), normal.top); ta.setduration(200); inner.startanimation(ta); // 设置回到正常的布局位置 inner.layout(normal.left, normal.top, normal.right, normal.bottom); // log.e("jj", "回归：" + normal.left + "," + normal.top + "," + normal.right // + "," + normal.bottom); normal.setempty(); } // 是否需要开启动画 public boolean isneedanimation() { return !normal.isempty(); } /*** * 是否需要移动布局 inner.getmeasuredheight():获取的是控件的总高度 * * getheight()：获取的是屏幕的高度 * * @return */ public boolean isneedmove() { int offset = inner.getmeasuredheight() - getheight(); int scrolly = getscrolly(); // log.e("jj", "scrolly=" + scrolly); // 0是顶部，后面那个是底部 if (scrolly == 0 || scrolly == offset) { return true; } return false; } } |
3、mainactivity
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
package com.org.activity; import android.os.bundle; import android.app.activity; import android.view.menu; import android.view.window; public class mainactivity extends activity { @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); requestwindowfeature(window.feature_no_title); setcontentview(r.layout.activity_main); } @override public boolean oncreateoptionsmenu(menu menu) { // inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.activity_main, menu); return true; } } |
这个没做什么，主要看布局，以及bouncescrollview类。
4、activity_main布局
|
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
|
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <include layout="@layout/common_title_bg" /> <com.org.scroll.bouncescrollview android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/coversation_bg" android:focusable="true" android:focusableintouchmode="true" > <linearlayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingtop="10.0dip" > <relativelayout android:id="@+id/accountsetting" android:layout_width="fill_parent" android:layout_height="63.0dip" android:background="#80ffffff" android:focusable="true" > <framelayout android:id="@+id/framelayout1" android:layout_width="54.0dip" android:layout_height="54.0dip" android:layout_centervertical="true" android:layout_marginleft="10.0dip" > <imageview android:id="@+id/face" android:layout_width="50.0dip" android:layout_height="50.0dip" android:layout_gravity="center" android:contentdescription="@null" android:src="@drawable/h0" /> <imageview android:id="@+id/statusicon" android:layout_width="18.0dip" android:layout_height="18.0dip" android:layout_gravity="bottom|right|center" android:contentdescription="@null" /> </framelayout> <imageview android:id="@+id/imageview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentright="true" android:layout_centervertical="true" android:layout_marginright="10.0dip" android:contentdescription="@null" android:duplicateparentstate="true" /> <textview android:id="@+id/status" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignbottom="@+id/nick" android:layout_marginright="10.0dip" android:layout_toleftof="@id/imageview1" android:duplicateparentstate="true" android:text="在线" /> <textview android:id="@+id/nick" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centervertical="true" android:layout_marginleft="10.0dip" android:layout_marginright="69.0dip" android:layout_torightof="@id/framelayout1" android:duplicateparentstate="true" android:ellipsize="end" android:singleline="true" /> </relativelayout> <linearlayout android:layout_width="match_parent" android:layout_height="600dp" android:layout_margintop="16.0dip" android:layout_weight="2.13" android:background="#ffffffff" android:orientation="vertical" > <textview android:id="@+id/my_profile" android:layout_width="fill_parent" android:layout_height="44.0dip" android:background="#800000ff" android:clickable="true" android:gravity="center_vertical" android:paddingleft="10.0dip" android:paddingright="10.0dip" android:text="标题一" /> <linearlayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margintop="16.0dip" android:orientation="vertical" > <relativelayout android:id="@+id/set_feedback" android:layout_width="fill_parent" android:layout_height="44.0dip" android:background="#8000ffff" android:clickable="true" android:focusable="true" > <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centervertical="true" android:layout_marginleft="12.0dip" android:duplicateparentstate="true" android:gravity="center_vertical" android:text="反馈" /> </relativelayout> </linearlayout> </linearlayout> </linearlayout> </com.org.scroll.bouncescrollview> </linearlayout> |
源码下载：android实现滚动条下拉反弹效果
希望本文对大家学习android软件编程有所帮助。
