轮播 ———–与———无限轮播
应用情景
无限轮播常见的应用有新闻类app,其对新闻进行滚动,点击后跳转到该新闻页面
无限轮播还常见于动态展示图片,丰富界面
轮播常见于手机app导航页面,跳转后进入主页面,再次进入后显示单个图片,自动或手动跳转
注意事项
1.网络加载注意添加internet 方法。
主要技术
采用技术主要有 ViewPager,viewPager的setOnPageChangeListener事件,imageView的OnTouchListener()事件,xUtils中BitmapUtils 的display()方法或者ImageLoader 的展示图片的方法,动态加载图片 ,自定义 shape。
主要功能实现
无限轮播,本地图片展示 思路
1.页面布局,常用 FrameLayout,里面设置ViewPager和展示小原点的父布局
2.1初始化控件,初始化viewPager和小圆点的父布局,一般为线性布局
2.2初始化小圆点
3.初始化数据 设置图片来源,为本地图片还是网络请求地址,采用不同的方式处理
4.设置适配器
5.设置相应的事件
功能点
1.轮播功能
设置初始位置
vp.setCurrentItem(10000*datas.length);
- Integer.MAX_VALUE 设置最大数,ViewPager就能不会滑到头
实例化ImageView,往ViewPager添加数据;由于图片源少,而展示个数posstion多,取余实现图片源和posstion 匹配
ImageView image=new ImageView(MainActivity.this);
int index=position%datas.length;
//设置图片源
image.setImageResource(datas[index]);
image.setScaleType(ImageView.ScaleType.CENTER_CROP);
//设置宽高
image.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
container.addView(image);
2.自动播放
`Handler mHandler=new Handler(){
public void handleMessage(android.os.Message msg) {
int item = vp.getCurrentItem();
vp.setCurrentItem(++item);
mHandler.sendEmptyMessageDelayed(0, 1000);
};
};`
oncreat()方法中,初次调用
`mHandler.sendEmptyMessageDelayed(0, 1000);`
3.自动轮播,点击图片暂停,离开后继续自动播放
实现触摸监听事件,效果为点击不进行自动播放
` image.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mHandler.removeCallbacksAndMessages(null); break; case MotionEvent.ACTION_UP: mHandler.sendEmptyMessageDelayed(0, 1000); break; case MotionEvent.ACTION_CANCEL: mHandler.sendEmptyMessageDelayed(0, 1000); break; default: break; } return true; } });
4.网络图片处理 现主要为两种方式,一种为 xUtils, 一为 ImageLoader
`BitmapUtils bitmapUtils=new BitmapUtils(context);
bitmapUtils.display(img, list.get(index));`
`ImageLoader.getInstance().displayImage(list.get(position), img,options);`
完整代码
布局
`<FrameLayout 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.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="match_parent" /> <LinearLayout android:id="@+id/ll" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:gravity="center" ></LinearLayout> </FrameLayout>`
原点一,聚焦的圆点
`<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#ff7575"/> </shape>`
原点二,正常的圆点
`<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#c7c7e2"/> </shape>`
主要代码
`import java.util.ArrayList; import java.util.List; import android.os.Bundle; import android.os.Handler; import android.app.Activity; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.Menu; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener; import android.view.ViewGroup; import android.view.Window; import android.widget.ImageView; import android.widget.LinearLayout; public class MainActivity extends Activity { private List<ImageView> list; private int []datas=new int[]{R.drawable.guide1,R.drawable.guide11,R.drawable.guide12,R.drawable.guide13,R.drawable.guide2,R.drawable.guide3}; Handler mHandler=new Handler(){ public void handleMessage(android.os.Message msg) { int item = vp.getCurrentItem(); vp.setCurrentItem(++item); mHandler.sendEmptyMessageDelayed(0, 1000); }; }; private ViewPager vp; private LinearLayout ll; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); //初始化控件 vp = (ViewPager) findViewById(R.id.vp); ll = (LinearLayout) findViewById(R.id.ll); vp.setAdapter(new MyAdapter()); vp.setCurrentItem(10000*datas.length); mHandler.sendEmptyMessageDelayed(0, 1000); //初始化 View initDot(); //设置监听事件 vp.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { for(int i=0;i<list.size();i++){ int j=arg0%list.size(); if(j==i){ list.get(i).setImageResource(R.drawable.dot_focus); }else{ list.get(i).setImageResource(R.drawable.dot_nomal); } } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } }); } private void initDot() { list=new ArrayList<ImageView>(); for(int i=0;i<datas.length;i++){ ImageView img=new ImageView(this); img.setLayoutParams(new ViewGroup.MarginLayoutParams(20, 20)); //设置默认 if(i==0){ img.setImageResource(R.drawable.dot_focus); }else{ img.setImageResource(R.drawable.dot_nomal); } list.add(img); ll.addView(img); } } class MyAdapter extends PagerAdapter{ @Override public int getCount() { // TODO Auto-generated method stub return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0==arg1; } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView image=new ImageView(MainActivity.this); int index=position%datas.length; //设置图片源 image.setImageResource(datas[index]); image.setScaleType(ImageView.ScaleType.CENTER_CROP); //设置宽高 image.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); container.addView(image); image.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mHandler.removeCallbacksAndMessages(null); break; case MotionEvent.ACTION_UP: mHandler.sendEmptyMessageDelayed(0, 1000); break; case MotionEvent.ACTION_CANCEL: mHandler.sendEmptyMessageDelayed(0, 1000); break; default: break; } return true; } }); return image; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((ImageView)object); } } } `
t