ITdaan
首页
最新
原创
最火
收藏夹
写博客
关于
搜索答案
搜索本文相关内容
轮播图(网页新闻效果,触摸暂停、无限滚动)有Demo
本文转载自
baopengjian
查看原文
2015/12/21
0
滚动
/
网页
/
新闻
/
效果
/
轮播图
/
事件处理
/
viewpager
/
消息发送与取消
/
demo
/
轮播
收藏
0
0
#1 安卓中通常通过动态的轮播图来展示内容:其数据动态显示,数据的条数不确定,有很好的演示效果
#2 效果图如下
#3 实现原理:
1) 利用ViewPager可以左右滑动,来实现滑动效果
2) 由于是自动播放,可以定义一个任务,或定时发送一个消息,改变轮播图的tab页
3) 当手动滑动时,向左或向右滑动时,滑动到第一个或最后一个现实页面时,仍然可以滑动,所以一定有循环,而其又可以无限的自动轮播或滑动,可以设置ViewPager的页面数量是无穷的,用
Integer.MAX_VALUE
来表示,让其从中间开始,同时要保证开始滚动的第一页是要显示的第一页所以ViewPager的开始滚动的位置是:Integer.MAX_VALUE/2 - Integer/2 % 轮播图的页面数
4) 点击跳转,触摸停止滚动,通过ViewPager的事件和页面的显示和隐藏来实现 轮播图开始滚动和停止滚动即开始发送消息和停止发送消息
#4 代码实现:
public class MainActivity extends Activity {
private ViewPager viewPager;
private TextView tv_msg;
private LinearLayout ll_point_group;
private int[] ids = { R.drawable.a, R.drawable.b, R.drawable.c,
R.drawable.d, R.drawable.e };
// 图片标题集合
private final String[] imageDescriptions = {
"昆明游客扎堆喂鸥",
"省半税 送保养NISSAN新车赏",
"揭秘北京电影如何升级",
"乐视网TV版大派送",
"深圳滑坡 整个工业园被吞" };
private List<ImageView> imageViews;
/**
* 上一次被高亮显示的点
*/
private int lastPointIndex;
private Handler handler = new Handler(){
public void handleMessage(android.os.Message msg) {
//自动跳转到下一个页面
viewPager.setCurrentItem(viewPager.getCurrentItem()+1);
handler.sendEmptyMessageDelayed(0, 2000);
};
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewPager);
tv_msg = (TextView) findViewById(R.id.tv_msg);
ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);
initView();
viewPager.setAdapter(new MyPagerAdapter());
//设置ViewPager的开始滚动的位置,从第一个界面开始
int item = Integer.MAX_VALUE/2 - Integer.MAX_VALUE/2%imageViews.size();
viewPager.setCurrentItem(item);
tv_msg.setText(imageDescriptions[item%imageViews.size()]);
//监听页面改变的方法
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
int newIndex = position % imageViews.size();
tv_msg.setText(imageDescriptions[newIndex]);
//当前下标点高亮
ll_point_group.getChildAt(newIndex).setEnabled(true);
//上一次高亮显示的变成默认
ll_point_group.getChildAt(lastPointIndex).setEnabled(false);
lastPointIndex = newIndex;
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
}
/**
* 当页面状态发生改变的时候回调
* 静止-滑动
* 滑动-进制
*/
@Override
public void onPageScrollStateChanged(int state) {
}
});
//发消息开始滚动
}
@Override
protected void onResume() {
super.onResume();
System.out.println("MainActivity >>> onResume()");
handler.sendEmptyMessageDelayed(0, 2000);
}
@Override
protected void onPause() {
super.onPause();
System.out.println("MainActivity >>> onPause()");
handler.removeCallbacksAndMessages(null);
}
private void initView() {
imageViews = new ArrayList<ImageView>();
for(int i=0;i<ids.length;i++){
ImageView iv = new ImageView(this);
iv.setBackgroundResource(ids[i]);
imageViews.add(iv);
//加指示点
ImageView iv_point = new ImageView(this);
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, -2);
params.leftMargin = 15;//设置距离
iv_point.setLayoutParams(params );
iv_point.setBackgroundResource(R.drawable.point_selector);
if(i==0){
iv_point.setEnabled(true);
}else{
iv_point.setEnabled(false);
}
ll_point_group.addView(iv_point);
}
}
public void onTouchViewPager(View view, final int position) {
// 给图片注册触摸事件监听器
view.setOnTouchListener(new OnTouchListener() {
private long downTime;
private int downX;
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 手指按下时,取消所有事件,即轮播图不在滚动了
handler.removeCallbacksAndMessages(null);
// 按下去时,记录按下的坐标和时间,用于判断是否是点击事件
downX = (int) event.getX();
downTime = System.currentTimeMillis();
break;
case MotionEvent.ACTION_UP:
System.out.println("MainActivity Event...ACTION_UP");
// 抬起手指时,判断落下抬起的时间差和坐标,符合以下条件为点击
if (System.currentTimeMillis() - downTime < 500
&& Math.abs(downX - event.getX()) < 30) {
Toast.makeText(MainActivity.this, "点击跳转!", Toast.LENGTH_SHORT).show();
// 点击事件被触发
}else{
handler.sendEmptyMessageDelayed(0, 2000);
}
break;
case MotionEvent.ACTION_CANCEL:
//手指滑动完图片后,能够让轮播图继续自动滚动
handler.sendEmptyMessageDelayed(0, 2000);
break;
}
return true;
}
});
}
class MyPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView iv = imageViews.get(position % imageViews.size());
onTouchViewPager(iv,position);
container.addView(iv);
return iv;
}
/**
* 当前页面和instantiateItem返回的值
* view:当前页面
* object:就是instantiateItem方法返回的值
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
/**
* container:Viewpager,容器
* position:那个页面改移除了
* object:要移除的页面
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
}
}
#5 Demo下载地址:
http://download.csdn.net/detail/baopengjian/9370095
智能推荐
×
注意!
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。
猜您在找
无限滚动的轮播图
android ViewPager无限滚动、轮播图
RollViewPager 实现无限循环的轮播图效果
iOS 简易无限滚动的图片轮播器 Demo事例
【Demo】jQuery 轮播图简单动画效果
【No46】Java菜鸟到大牛学习路线之高级篇
【No44】Java菜鸟到大牛学习路线培训教程
【No254】冲击年薪50万之机器学习到深度学习学习路线教程
赞助商链接
© 2014-2019 ITdaan.com
粤ICP备14056181号
×
收藏本文
添加到收藏夹 *
赞助商广告