ViewPager简单使用（四）实现图片轮播

在很多软件中，我们都会看到图片轮播的效果。如图：

首先在布局文件中添加viewpager控件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"xmlns:android="http://schemas.android.com/apk/res/android" ><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="wrap_content"android:layout_height="300dp"/></LinearLayout>

设置适配器

 PagerAdapter pagerAdapter = new PagerAdapter() {@Overridepublic int getCount() {//返回一个比较大的值，目的是为了实现无限轮播return Integer.MAX_VALUE;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view==object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {position = position%imageIds.length;ImageView imageView = new ImageView(MainActivity.this);imageView.setImageResource(imageIds[position]);imageView.setScaleType(ImageView.ScaleType.FIT_XY);container.addView(imageView);mList.add(imageView);return imageView;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mList.get(position));}};

利用 Timer 实现每隔 2s 向 Handler 发送message来更新图片

Handler mHandler  = new Handler(){@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);switch (msg.what){case 1:index++;viewPager.setCurrentItem(index);}}};

 timer = new Timer();//创建Timer对象//执行定时任务timer.schedule(new TimerTask() {@Overridepublic void run() {//首先判断是否需要轮播if (isContinue) {mHandler.sendEmptyMessage(1);}}},2000,2000);//延迟2秒，每隔2秒发一次消息

//手指按下和划动的时候停止图片的轮播

  /*** 根据当前触摸事件判断是否要轮播*/View.OnTouchListener onTouchListener  = new View.OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction()){//手指按下和划动的时候停止图片的轮播case MotionEvent.ACTION_DOWN:case MotionEvent.ACTION_MOVE:isContinue = false;break;default:isContinue = true;}return false;}};

MainActivity.class

public class MainActivity extends AppCompatActivity {private ViewPager viewPager;//图片资源private int[] imageIds = {R.drawable.d1,R.drawable.d2,R.drawable.d3,R.drawable.d4};//存放图片的数组private List<ImageView> mList;//当前索引位置以及上一个索引位置private int index = 0;//是否需要轮播标志private boolean isContinue = true;//定时器，用于实现轮播private Timer timer;Handler mHandler  = new Handler(){@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);switch (msg.what){case 1:index++;viewPager.setCurrentItem(index);}}};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);viewPager = (ViewPager) findViewById(R.id.viewpager);mList = new ArrayList<>();viewPager.setAdapter(pagerAdapter);viewPager.addOnPageChangeListener(onPageChangeListener);viewPager.setOnTouchListener(onTouchListener);timer = new Timer();//创建Timer对象//执行定时任务timer.schedule(new TimerTask() {@Overridepublic void run() {//首先判断是否需要轮播，是的话我们才发消息if (isContinue) {mHandler.sendEmptyMessage(1);}}},2000,2000);//延迟2秒，每隔2秒发一次消息}/*** 根据当前触摸事件判断是否要轮播*/View.OnTouchListener onTouchListener  = new View.OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction()){//手指按下和划动的时候停止图片的轮播case MotionEvent.ACTION_DOWN:case MotionEvent.ACTION_MOVE:isContinue = false;break;default:isContinue = true;}return false;}};/***根据当前选中的页面设置按钮的选中*/ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {index = position;//当前位置赋值给索引setCurrentDot(index%imageIds.length);}@Overridepublic void onPageScrollStateChanged(int state) {}};/*** 设置对应位置按钮的状态* @param i 当前位置*/private void setCurrentDot(int i) {}PagerAdapter pagerAdapter = new PagerAdapter() {@Overridepublic int getCount() {//返回一个比较大的值，目的是为了实现无限轮播return Integer.MAX_VALUE;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view==object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {position = position%imageIds.length;ImageView imageView = new ImageView(MainActivity.this);imageView.setImageResource(imageIds[position]);imageView.setScaleType(ImageView.ScaleType.FIT_XY);container.addView(imageView);mList.add(imageView);return imageView;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mList.get(position));}};
}

效果如图：

上面实现了基本的轮播效果。

现在我们给他加上选中的小圆点效果

未选中的小圆点

point_default.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solid android:color="@color/colorAccent"/><size android:height="10dp" android:width="10dp"/>
</shape>

选中的小圆点

point_select.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solid android:color="@android:color/white"/><size android:height="10dp" android:width="10dp"/>
</shape>

选择器

rg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_enabled="false" android:drawable="@drawable/point_default"/><item android:state_enabled="true" android:drawable="@drawable/point_select"/>
</selector>

在主布局中添加RadioGroup,并将主布局改为RelativeLayout(或者FrameLayout).

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"android:layout_height="300dp"xmlns:android="http://schemas.android.com/apk/res/android" ><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="wrap_content"android:layout_height="300dp"/><RadioGroupandroid:layout_centerHorizontal="true"android:layout_above="@id/viewpager"android:layout_alignParentBottom="true"android:id="@+id/point_group"android:layout_width="wrap_content"android:layout_marginBottom="10dp"android:orientation="horizontal"android:layout_height="wrap_content"/></RelativeLayout>

初始化RadioGroup

  private RadioGroup group;group = (RadioGroup) findViewById(R.id.point_group);

根据图片个数初始化按钮

/*** 根据图片个数初始化按钮* @param length*/private void initGroup(int length) {for(int i = 0;i<length;i++){ImageView imageview = new ImageView(this);imageview.setImageResource(R.drawable.rg_selector);//设置背景选择器imageview.setPadding(20,0,0,0);//设置每个按钮之间的间距//将按钮依次添加到RadioGroup中group.addView(imageview, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);//默认选中第一个按钮，因为默认显示第一张图片group.getChildAt(0).setEnabled(false);}}

根据当前选中的页面设置按钮的选中

/***根据当前选中的页面设置按钮的选中*/ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {index = position;//当前位置赋值给索引setCurrentDot(index%imageIds.length);}@Overridepublic void onPageScrollStateChanged(int state) {}};

设置对应位置按钮的状态

/*** 设置对应位置按钮的状态* @param i 当前位置*/private void setCurrentDot(int i) {if(group.getChildAt(i)!=null){group.getChildAt(i).setEnabled(false);//当前按钮选中}if(group.getChildAt(preIndex)!=null){group.getChildAt(preIndex).setEnabled(true);//上一个取消选中preIndex = i;//当前位置变为上一个，继续下次轮播}}

MainActivity.class

public class MainActivity extends AppCompatActivity {private ViewPager viewPager;private RadioGroup group;//图片资源private int[] imageIds = {R.drawable.d1,R.drawable.d2,R.drawable.d3,R.drawable.d4};//存放图片的数组private List<ImageView> mList;//当前索引位置以及上一个索引位置private int index = 0,preIndex = 0;//是否需要轮播标志private boolean isContinue = true;//定时器，用于实现轮播private Timer timer;Handler mHandler  = new Handler(){@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);switch (msg.what){case 1:index++;System.out.println("==========index: "+index);viewPager.setCurrentItem(index);}}};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);viewPager = (ViewPager) findViewById(R.id.viewpager);group = (RadioGroup) findViewById(R.id.point_group);mList = new ArrayList<>();viewPager.setAdapter(pagerAdapter);viewPager.setPageMargin(50);viewPager.addOnPageChangeListener(onPageChangeListener);viewPager.setOnTouchListener(onTouchListener);initGroup(imageIds.length);timer = new Timer();//创建Timer对象//执行定时任务timer.schedule(new TimerTask() {@Overridepublic void run() {//首先判断是否需要轮播，是的话我们才发消息if (isContinue) {mHandler.sendEmptyMessage(1);}}},2000,2000);//延迟2秒，每隔2秒发一次消息}/*** 根据图片个数初始化按钮* @param length*/private void initGroup(int length) {for(int i = 0;i<length;i++){ImageView imageview = new ImageView(this);imageview.setImageResource(R.drawable.rg_selector);//设置背景选择器imageview.setPadding(20,0,0,0);//设置每个按钮之间的间距//将按钮依次添加到RadioGroup中group.addView(imageview, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);//默认选中第一个按钮，因为默认显示第一张图片group.getChildAt(0).setEnabled(false);}}/*** 根据当前触摸事件判断是否要轮播*/View.OnTouchListener onTouchListener  = new View.OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction()){//手指按下和划动的时候停止图片的轮播case MotionEvent.ACTION_DOWN:case MotionEvent.ACTION_MOVE:isContinue = false;break;default:isContinue = true;}return false;}};/***根据当前选中的页面设置按钮的选中*/ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {index = position;//当前位置赋值给索引setCurrentDot(index%imageIds.length);}@Overridepublic void onPageScrollStateChanged(int state) {}};/*** 设置对应位置按钮的状态* @param i 当前位置*/private void setCurrentDot(int i) {if(group.getChildAt(i)!=null){group.getChildAt(i).setEnabled(false);//当前按钮选中}if(group.getChildAt(preIndex)!=null){group.getChildAt(preIndex).setEnabled(true);//上一个取消选中preIndex = i;//当前位置变为上一个，继续下次轮播}}PagerAdapter pagerAdapter = new PagerAdapter() {@Overridepublic int getCount() {//返回一个比较大的值，目的是为了实现无限轮播return Integer.MAX_VALUE;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view==object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {position = position%imageIds.length;ImageView imageView = new ImageView(MainActivity.this);imageView.setImageResource(imageIds[position]);imageView.setScaleType(ImageView.ScaleType.FIT_XY);container.addView(imageView);mList.add(imageView);return imageView;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mList.get(position));}};
}

效果如图：

最后再说一点小变化：

viewPager.setPageMargin //设置页与页之间的间距

viewPager.setPageMargin(50);

PagerAdapter里的getPageWidth方法 //一屏显示多个子界面

 @Overridepublic float getPageWidth(int position) {return 0.8f;}

如图：

ViewPager简单使用（四）实现图片轮播相关推荐

Android 使用ViewPager 做的半吊子的图片轮播
Android 使用ViewPager 做的半吊子的图片轮播效果图虽然不咋样,但是最起码的功能是实现了,下面我们来一步步的实现它. 界面下面我们来分析一下界面的构成整体的布局: 因为我们要做出 ...
Android---flipper实现图片轮播
前言其实,ViewPager+Fragment也可以实现图片轮播,但是这次我主要用了Filpper来实现. 布局 <LinearLayout xmlns:android="http: ...
原生Js_简易图片轮播模板
功能:图片自动循环轮播,通过点击"上一张","下一张"按钮来控制图片的切换 <!DOCTYPE html> <html><head ...
viewpager实现花式图片轮播
效果图首先,让我们了解下什么是viewpager: 这个大致意思是:这个布局管理器允许用户左右翻转并传递页面的数据,你想要的视图可以通过pagerAdapter来实现. 布局文件: <Fram ...
Android使用ViewPager实现图片轮播和手势滑动
ViewPager常用来实现图片的轮播,比如淘宝首页,会把一些促销的商品的图片和描述信息来回的播放,这就是典型的使用ViewPager实现的. ViewPager属于布局管理器,允许用户通过页面翻转查 ...
html+轮播图下标跳转代码,最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告 body, div, ul, li { margin: ; padding: ; } ul { list-style-t ...
Android之——史上最简单图片轮播广告效果实现
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48049913 如今的Android开发需求越来越来多,实现效果越来越酷炫,很多An ...
网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
javascript实现图片轮播_第2章第9节 JavaScript(四)
● 知道哪些ES6,ES7的语法参考回答: promise,await/async,let.const.块级作用域.箭头函数 ● promise和await/async的关系参考回答: 都是异步编 ...

ViewPager简单使用（四）实现图片轮播

ViewPager简单使用（四）实现图片轮播相关推荐

最新文章

热门文章