【Android】无限滚动的HorizontalScrollView
这是一个很简单的功能,作为新手,做一下笔记。也给其它有需要的人提供一个参考。
首先HorizontalScrollView都知道用途了。它可以实现类似“桌面程序”左右切换页的效果。一般情况下里面的页数都是固定的,但是也有可能遇到不固定页数的,比如动态加载照片,或者像我这次需要实现的情况。
实现功能:实现日历的“日视图”。一页表示某一天的情况,向右翻页可翻到下一天,向左翻到上一天。而且可以随意翻到任意一天。每一页记录有当天的待办事项(这个就另外写了,这里只实现无限左右翻页)。
由于每天作为一页,把所有天数都加载到ScrollView中是不现实的。考虑到内存占用问题,ScrollView中肯定不要放太多东西的好。所以只放3页。如下图所示:
HorizontalScrollView中仅有3页。在第0页,向左翻的时候,松手的一瞬间,1页消失,-2页加载,然后smoothScroll到 -1页。向右亦然。因此可以保证不占用过多内存,又可以无限翻页。
实现的时候还遇到一点小问题,顺便也一起写下来。
一开始我很自然地想到重写HorizontalScrollView。即代码中的KamHorizontalScrollView。
- 主要是重写onTouchEvent方法,用于处理用户手指滑动事件。
- 由于每个子View占一屏,不可以出现两个View各占一半的现象,需要有一个将子View分页化的方法。在我的代码中就是public boolean scrollToPage(int);该方法传入的是页码,可以保证滑动到正确的位置,而不会滑一半。
- 还有一点要注意,翻页的时候,为了保证ScrollView只有3页,需要增加删除子View。在末尾增删没有问题,但在首部增加,所有的子View会向后移动,在首部删除,所有的子View会向前移动,因此这两个操作需要立即改变ScrollView的scroll值以保证屏幕显示顺滑。这一点在方法public boolean addLeft(View);和public boolean removeLeft();中均有体现。
接下来是我写代码过程中出现的一些问题:
1、重写HorizontalScrollView后,我在构造函数中进行初始化,添加三个初始的子View,报错。
解决:构造函数调用的时候,ScrollView还没有实例化,因此这个时候不能添加子View。应该等实例化之后再添加。重写protected void onFinishInflate();方法即可得到实例化完成的时机,在该方法下初始化。
2、左右滑动的时候,我调用的是scrollToPage(1);但是总是滑动到第2页或第0页。就是不能定在第1页。
解决:这个问题我花了不少时间(其实如果我去认真看看API就能很快搞定的)。通过Log,发现addView之后,新的View的Left值仍是0。或者说addView之后的一瞬间,layout中的所有子View还是保持原有的状态。过了一阵子才又重新排列的。所以我需要获得他们重新排列的时机,才能scroll到正确位置。之前写JavaSE的自定义布局有重写过排列布局的方法,所以这个也有。说白了就是onLayout方法(我以为是onMeasure,试了不行很纠结)。onLayout方法中,应该就是对所有子View进行重新排列了。(这一点可以自己去试试,先addView,然后立刻获取刚才这个View的位置和尺寸,会发现都是0。然后你可以通过按键事件再获取一次,会发现得到正确值了。因为从addView到按键这段时间足够他重新排列了。)
所以通过LinearLayout.addOnLayoutChangeListener(listener);就可以监听重新排列的时机。但是该方法需要APILevel 11及以上。刚好我在用我的G12测试,APILevel10。虽然很纠结,我也只能重写了LinearLayout,即代码中的KamLinearLayout,还有自定义监听器kamLayoutChangeListener。重写仅仅是为了在Android2.3监听onLayout。
另外加了一点小细节,翻页的机制除了手指滑动的距离,还有手指滑动的速度。自己写的SpeedChange三个方法。测试了一下感觉效果挺不错。
最后把源码附上,注释写了比较详细的,希望能帮助到初学者。不要像我走太多弯路。(注意改包名)
KamHorizontalScrollView.java
1 package com.kam.horizontalscrollviewtest.view;
2
3 import com.kam.horizontalscrollviewtest.R;
4
5 import android.content.Context;
6 import android.graphics.Color;
7 import android.util.AttributeSet;
8 import android.util.DisplayMetrics;
9 import android.util.Log;
10 import android.view.Gravity;
11 import android.view.MotionEvent;
12 import android.view.View;
13 import android.view.ViewGroup;
14 import android.widget.HorizontalScrollView;
15 import android.widget.LinearLayout;
16 import android.widget.TextView;
17 import android.widget.FrameLayout.LayoutParams;
18 /*如果不需要支持Android2.3,可以将代码中所有KamLinearLayout替换为ViewGroup*/
19 public class KamHorizontalScrollView extends HorizontalScrollView {
20 private static String tag = "KamHorizontalScrollView";
21 private Context context;
22
23 /*记录当前的页数标识(做日视图的时候可以和该值今日的日期作差)*/
24 private int PageNo=0;
25
26 /*保存ScrollView中的ViewGroup,如果不需要支持Android2.3,可以将KamLinearLayout替换为ViewGroup*/
27 private KamLinearLayout childGroup = null;
28
29 /*这是判断左右滑动用的(个人喜好,其实不需要这么麻烦)*/
30 private int poscache[] = new int[4];
31 private int startpos;
32
33 public KamHorizontalScrollView(Context context, AttributeSet attrs,
34 int defStyle) {
35 super(context, attrs, defStyle);
36 // TODO Auto-generated constructor stub
37 this.context=context;
38 }
39 public KamHorizontalScrollView(Context context, AttributeSet attrs) {
40 super(context, attrs);
41 // TODO Auto-generated constructor stub
42 this.context=context;
43 }
44 public KamHorizontalScrollView(Context context) {
45 super(context);
46 // TODO Auto-generated constructor stub
47 this.context=context;
48 }
49
50 /*重写触摸事件,判断左右滑动*/
51 @Override
52 public boolean onTouchEvent(MotionEvent ev) {
53 switch (ev.getAction()) {
54 case MotionEvent.ACTION_DOWN:
55 startpos = (int) ev.getX();
56 /*用于判断触摸滑动的速度*/
57 initSpeedChange((int) ev.getX());
58 break;
59 case MotionEvent.ACTION_MOVE: {
60 /*更新触摸速度信息*/
61 movingSpeedChange((int) ev.getX());
62 }
63 break;
64 case MotionEvent.ACTION_UP:
65 case MotionEvent.ACTION_CANCEL: {
66 /*先根据速度来判断向左或向右*/
67 int speed = releaseSpeedChange((int) ev.getX());
68 if(speed>0){
69 nextPage();
70 return true;
71 }
72 if(speed<0){
73 prevPage();
74 return true;
75 }
76
77 /*这里是根据触摸起始和结束位置来判断向左或向右*/
78 if (Math.abs((ev.getX() - startpos)) > getWidth() / 4) {
79 if (ev.getX() - startpos > 0) {
80 /*向左*/
81 prevPage();
82 } else {
83 /*向右*/
84 nextPage();
85 }
86 } else {
87 /*不变*/
88 scrollToPage(1);
89 }
90 return true;
91 }
92 }
93 return super.onTouchEvent(ev);
94 }
95
96 /*完成实例化*/
97 @Override
98 protected void onFinishInflate(){
99 super.onFinishInflate();
100 Log.i(tag, "onFinishInflate Called!");
101 init();
102 }
103
104 /*初始化,加入三个子View*/
105 private void init(){
106 this.childGroup=(KamLinearLayout) findViewById(R.id.container);
107 /*添加LayoutChange监听器*/
108 childGroup.addKamLayoutChangeListener(listener);
109 /*调用其自身的LayoutChange监听器(不支持Android2.3)*/
110 /*childGroup.addOnLayoutChangeListener(listener);*/
111
112 addRight(createExampleView(-1));
113 addRight(createExampleView(0));
114 addRight(createExampleView(1));
115 }
116 /*添加监听器*/
117 kamLayoutChangeListener listener = new kamLayoutChangeListener() {
118
119 @Override
120 public void onLayoutChange() {
121 // TODO Auto-generated method stub
122 Log.i(tag, "onLayoutChanged Called!");
123 scrollToPage(1);
124 }
125 };
126 /*
127 //注意,如果不需要支持Android2.3,可以将上面的listener替换成下方listener
128 OnLayoutChangeListener listener = new OnLayoutChangeListener() {
129
130 @Override
131 public void onLayoutChange(View arg0, int arg1, int arg2, int arg3,
132 int arg4, int arg5, int arg6, int arg7, int arg8) {
133 // TODO Auto-generated method stub
134 Log.i(tag, "onLayoutChanged Called!");
135 scrollToPage(1);
136 }
137 };
138 */
139
140 /*左翻页*/
141 public void prevPage(){
142 PageNo--;
143 addLeft(createExampleView(PageNo-1));
144 removeRight();
145 }
146
147 /*右翻页*/
148 public void nextPage(){
149 PageNo++;
150 addRight(createExampleView(PageNo+1));
151 removeLeft();
152 }
153
154
155 /*获取某个孩子的X坐标*/
156 private int getChildLeft(int index){
157 if (index>=0 && childGroup != null) {
158 if(index< childGroup.getChildCount())
159 return childGroup.getChildAt(index).getLeft();
160 }
161 return 0;
162 }
163
164 /**
165 * 向右边添加View
166 * @param view 需要添加的View
167 * @return true添加成功|false添加失败
168 */
169 public boolean addRight(View view){
170 if(view==null || childGroup==null)return false;
171 childGroup.addView(view);
172 return true;
173 }
174
175 /**
176 * 删除右边的View
177 * @return true成功|false失败
178 */
179 public boolean removeRight(){
180 if( childGroup==null || childGroup.getChildCount()<=0)return false;
181 childGroup.removeViewAt(childGroup.getChildCount()-1);
182 return true;
183 }
184
185 /**
186 * 向左边添加View
187 * @param view 需要添加的View
188 * @return true添加成功|false添加失败
189 */
190 public boolean addLeft(View view){
191 if(view==null || childGroup==null)return false;
192 childGroup.addView(view, 0);
193
194 /*因为在左边增加了View,因此所有View的x坐标都会增加,因此需要让ScrollView也跟着移动,才能从屏幕看来保持平滑。*/
195 int tmpwidth = view.getLayoutParams().width;
196 if(tmpwidth==0)tmpwidth=getWinWidth();
197 Log.i(tag, "the new view's width = "+view.getLayoutParams().width);
198 this.scrollTo(this.getScrollX()+tmpwidth, 0);
199
200 return true;
201 }
202
203 /**
204 * 删除左边的View
205 * @return true成功|false失败
206 */
207 public boolean removeLeft(){
208 if( childGroup==null || childGroup.getChildCount()<=0)return false;
209
210 /*因为在左边删除了View,因此所有View的x坐标都会减少,因此需要让ScrollView也跟着移动。*/
211 int tmpwidth=childGroup.getChildAt(0).getWidth();
212 childGroup.removeViewAt(0);
213 this.scrollTo((int) (this.getScrollX()-tmpwidth), 0);
214
215 return true;
216 }
217
218 /**
219 * 跳转到指定的页面
220 *
221 * @param index 跳转的页码
222 * @return
223 */
224 public boolean scrollToPage(int index){
225 if(childGroup==null)return false;
226 if(index<0 || index >= childGroup.getChildCount())return false;
227 smoothScrollTo(getChildLeft(index), 0);
228 return true;
229 }
230
231 private int getWinWidth() {
232 DisplayMetrics dm = new DisplayMetrics();
233 // 获取屏幕信息
234 dm = context.getResources().getDisplayMetrics();
235 return dm.widthPixels;
236 }
237
238 private int getWinHeight() {
239 DisplayMetrics dm = new DisplayMetrics();
240 // 获取屏幕信息
241 dm = context.getResources().getDisplayMetrics();
242 return dm.heightPixels;
243 }
244 /*生成一个测试用View。真正使用的时候就不需要这个了。*/
245 private View createExampleView(int index){
246 LayoutParams params = new LayoutParams(getWinWidth(), getWinHeight());
247 /*设置不同的背景色使效果更加明显*/
248 int colorarr[] = {
249 Color.rgb(240, 180, 180),
250 Color.rgb(240, 240, 180),
251 Color.rgb(180, 240, 240),
252 Color.rgb(180, 240, 180)};
253 TextView txtview = new TextView(context);
254 txtview.setBackgroundColor(colorarr[(index%4+4) % 4]);
255 txtview.setText(index + "");
256 txtview.setTextSize(40);
257 txtview.setGravity(Gravity.CENTER);
258 txtview.setLayoutParams(params);
259
260 return txtview;
261 }
262
263
264 /*下面的方法仅仅是个人喜好加上的,用于判断用户手指左右滑动的速度。*/
265 private void initSpeedChange(int x){
266 if(poscache.length<=1)return;
267 poscache[0]=1;
268 for(int i=1;i<poscache.length;i++){
269
270 }
271 }
272 private void movingSpeedChange(int x){
273 poscache[0]%=poscache.length-1;
274 poscache[0]++;
275 //Log.i(tag, "touch speed:"+(x-poscache[poscache[0]]));
276 poscache[poscache[0]]=x;
277 }
278 private int releaseSpeedChange(int x){
279 return releaseSpeedChange(x, 30);
280 }
281 private int releaseSpeedChange(int x,int limit){
282 poscache[0]%=poscache.length-1;
283 poscache[0]++;
284 /*检测到向左的速度很大*/
285 if(poscache[poscache[0]]-x>limit)return 1;
286 /*检测到向右的速度很大*/
287 if(x-poscache[poscache[0]]>limit)return -1;
288
289 return 0;
290 }
291 }
KamLinearLayout.java (如果不需要支持APILevel 10及以下,可以无视这个类)
1 package com.kam.horizontalscrollviewtest.view;
2
3 import android.content.Context;
4 import android.util.AttributeSet;
5 import android.widget.LinearLayout;
6
7 public class KamLinearLayout extends LinearLayout {
8 kamLayoutChangeListener listener = null;
9
10 public void addKamLayoutChangeListener(kamLayoutChangeListener listener){
11 this.listener=listener;
12 }
13
14 public KamLinearLayout(Context context) {
15 super(context);
16 // TODO Auto-generated constructor stub
17 }
18 public KamLinearLayout(Context context, AttributeSet attrs) {
19 super(context, attrs);
20 // TODO Auto-generated constructor stub
21 }
22
23
24 @Override
25 public void onLayout(boolean changed,
26 int l, int t, int r, int b){
27 super.onLayout(changed, l, t, r, b);
28 if(this.listener!=null)this.listener.onLayoutChange();
29 }
30
31 }
32 /*自定义监听器*/
33 interface kamLayoutChangeListener{
34 abstract void onLayoutChange();
35
36 }
MainActivity.java
1 package com.kam.horizontalscrollviewtest;
2
3 import android.support.v7.app.ActionBarActivity;
4 import android.os.Bundle;
5 import android.view.Menu;
6 import android.view.MenuItem;
7
8 public class MainActivity extends ActionBarActivity {
9
10 @Override
11 protected void onCreate(Bundle savedInstanceState) {
12 super.onCreate(savedInstanceState);
13 setContentView(R.layout.kamhsview);
14 }
15
16 @Override
17 public boolean onCreateOptionsMenu(Menu menu) {
18 // Inflate the menu; this adds items to the action bar if it is present.
19 getMenuInflater().inflate(R.menu.main, menu);
20 return true;
21 }
22
23 @Override
24 public boolean onOptionsItemSelected(MenuItem item) {
25 // Handle action bar item clicks here. The action bar will
26 // automatically handle clicks on the Home/Up button, so long
27 // as you specify a parent activity in AndroidManifest.xml.
28 int id = item.getItemId();
29 if (id == R.id.action_settings) {
30 return true;
31 }
32 return super.onOptionsItemSelected(item);
33 }
34 }
kamhsview.xml
<?xml version="1.0" encoding="utf-8"?>
<com.kam.horizontalscrollviewtest.view.KamHorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/kamscrollview"
android:fadingEdge="none"
android:scrollbars="none"
> <!-- 如果你不需要支持Android2.3,可以把后面的KamLinearLayout替换成普通的LinearLayout
<LinearLayout
android:id="@+id/container1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" > </LinearLayout > -->
<com.kam.horizontalscrollviewtest.view.KamLinearLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"> </com.kam.horizontalscrollviewtest.view.KamLinearLayout>
</com.kam.horizontalscrollviewtest.view.KamHorizontalScrollView>
AndroidManifest就是默认的那个,没有改。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.kam.horizontalscrollviewtest"
android:versionCode="1"
android:versionName="1.0" > <uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="10" /> <application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppBaseTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application> </manifest>
【Android】无限滚动的HorizontalScrollView的更多相关文章
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- Android 高级UI设计笔记09:Android如何实现无限滚动列表
ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们提供了一个良好,整洁的用户体验 ...
- Android 高级UI设计笔记09:Android实现无限滚动列表
1. 无限滚动列表应用场景: ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们 ...
- [Android]如何实现无限滚动的ListViw/GridView(翻译)
ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们提供了一个良好,整洁的用户体验 ...
- Android无限循环轮播广告位Banner
Android无限循环轮播广告位Banner 现在一些app通常会在头部放一个广告位,底部放置一行小圆圈指示器,指示广告位当前的页码,轮播展示一些图片,这些图片来自于网络.这个广告位banner ...
- LoopBar – Tap酒吧与无限滚动
相约 LoopBar – 标签栏与无限滚动为Android由Cleveroad 在Cleveroad我们最近认识到通过使用任何一个应用程序类别的导航,导航面板是很无聊和琐碎.这就是为什么我们的设计师的 ...
- Xamarin自定义布局系列——支持无限滚动的自动轮播视图CarouselView
背景简述 自动轮播视图(CarouselView)在现在App中的地位不言而喻,绝大多数的App中都有类似的视图,无论是WebApp还是Native App.在安卓.iOS以及Windows(UWP) ...
- Xamarin.Forms: 无限滚动的ListView(懒加载方式)
说明 在本博客中,学习如何在Xamarin.Forms应用程序中设计一个可扩展的无限滚动的ListView.这个无限滚动函数在默认的Xamarin.Forms不存在,因此我们需要为此添加插件.在这里我 ...
- iOScollectionView广告无限滚动(Swift实现)
今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: ...
随机推荐
- JavaScript--声明提前
声明提前(hoist): 在正式执行程序前,都会将所有var声明的变量和function声明的函数提前到*当前作用域*的顶部集中创建. 但是,赋值留在原地. console.log(a);//unde ...
- JS响应事件整理
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- 简洁的MysqlHelper
把MySqlXXX的类更改为SqlXXX就可以成为sqlHelper. 另外C#也提供了MysqlHelper和sqlHelper,用起来也挺方便的. public class MySqlHelper ...
- CentOS 7 之Helloworld with c
其实我也不知道是为了啥, 到了现在这种年纪还想学习Linux下的C语言编程.因为我一直就傻傻地认为机会是垂青有准备的人,也一直呆呆地认为活到老学到老.现在Android这么火,各种终端如雨后春笋,而这 ...
- ubantu-命令-进入超级用户
sudo su; 建立文件夹 mkdir ulike_work;
- Spring4.0学习笔记(11) —— Spring AspectJ 的五种通知
Spring AspectJ 一.基于注解的方式配置通知 1.额外引入的jar包: a) com.springsource.org.aopalliance-1.0.0.jar b) com.sprin ...
- struts2中IOC控制反转应用
package com.bjsxt.struts2.user.action; import java.util.Map; import org.apache.struts2.interceptor.A ...
- 实验一:基于Winsock完成简单的网络程序开发
第一部分:简答的UDP网络通信程序 // UDP5555.cpp : Defines the entry point for the application. //================== ...
- STM8S学习笔记-时钟控制1
1.图13可见,STM8S单片机主要有四种时钟源可供选择: 1).1-24MHz外部晶体振荡器(HSE). 2).最大24MHz外部时钟(HSE ext). 3).16MHz高速内部RC振荡器(HSI ...
- poj 2777Count Color
http://poj.org/problem?id=2777 注意:a可能比b大 #include <cstdio> #include <cstring> #include & ...