Android 使用ViewPager实现轮播图效果

写这篇文章只是对今天所学的知识进行加深印象,对ViewPager的一些处理,比如适配器和各个方法的作用等。

先看效果图

这里我是在xml中写的圆点

Drawable文件夹下的xml代码:

Shape_yes.xml:

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#ff6c67"></solid> <corners android:radius="1000dp"></corners> </shape>

Shape_no.xml:

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#f0f0f0"></solid> <corners android:radius="1000dp"></corners> </shape>

选择器

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

Activity_main.xml:

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="160dp"> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="wrap_content"> </android.support.v4.view.ViewPager> <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:layout_alignParentBottom="true" android:gravity="center_horizontal" android:padding="5dp" android:orientation="vertical" android:background="#66000000"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:gravity="center" android:orientation="horizontal" android:paddingBottom="10dp"> <ImageView android:id="@+id/iv_one" android:layout_width="20dp" android:layout_height="20dp" android:layout_marginRight="20dp" android:background="@drawable/selector_show" /> <ImageView android:id="@+id/iv_two" android:layout_width="20dp" android:layout_height="20dp" android:layout_marginRight="20dp" android:background="@drawable/selector_show" /> <ImageView android:id="@+id/iv_three" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/selector_show" /> </LinearLayout> </LinearLayout> </RelativeLayout> </RelativeLayout>

写一个类ViewPagerAdapter_Circleextends PagerAdapter

public class ViewPagerAdapter_Circle extends PagerAdapter { ArrayList<View> arrayList; Context context; public ViewPagerAdapter_Circle(ArrayList<View> arrayList, Context context) { this.arrayList = arrayList; this.context = context; } /***数据源的大小(条目)*/ @Override public int getCount() { return arrayList.size(); } /** * 页面视图是否关联到特定的对象 */ @Override public boolean isViewFromObject(View view, Object object) { return view == object;//判断当前要显示的页面 } /** * 初始化页面 * 1.页面添加到container * 2.将页面返回 */ @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(arrayList.get(position));//页面添加到container,添加位置 return arrayList.get(position); } /** * 销毁当前页面 */ @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(arrayList.get(position)); } }

MainActivity中代码(含注解)

public class MainActivity extends AppCompatActivity { ViewPager viewPager; int imageResIds[]; ArrayList<View> imageViewList;//存图片的集合 ArrayList<ImageView> imageViews;//存白点的集合 ImageView iv_one,iv_two,iv_three; int oldPostion;//记录原来的位置 private Boolean flag; int count=0; Handler handler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); if (msg.what == 0) { viewPager.setCurrentItem(count); } } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化布局 initView(); //初始化数据 initData(); //设置适配器 initAdapter(); //设置圆点 initPoint(); flag = true; //循环设置播放 new Thread() { @Override public void run() { while (flag) { try { Thread.sleep(3000); count++; if (count == 3) { count = 0; } } catch (InterruptedException e) { e.printStackTrace(); } /**传递信息*/ Message msg = new Message(); msg.what = 0; msg.obj = count; handler.sendMessage(msg); } } }.start(); } private void initView() { viewPager = (ViewPager) findViewById(R.id.vp); } //初始化要显示的数据 private void initData() { //图片资源数组 imageResIds = new int[]{R.mipmap.a, R.mipmap.b, R.mipmap.c}; imageViewList = new ArrayList<>();//存图片的集合 ImageView imageView; for (int i = 0; i < imageResIds.length; i++) { imageView = new ImageView(this); imageView.setBackgroundResource(imageResIds[i]); imageViewList.add(imageView); } } //设置适配器 private void initAdapter() { ViewPagerAdapter_Circle myViewPagerAdapter = new ViewPagerAdapter_Circle(imageViewList, this); viewPager.setAdapter(myViewPagerAdapter); } /** * 设置圆点的 */ private void initPoint() { iv_one = (ImageView) findViewById(R.id.iv_one); iv_two = (ImageView) findViewById(R.id.iv_two); iv_three = (ImageView) findViewById(R.id.iv_three); imageViews = new ArrayList<>(); imageViews.add(iv_one); imageViews.add(iv_two); imageViews.add(iv_three); iv_one.setSelected(true);//设置第一个圆点为true /**viewPager监听事件*/ viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { /**滑动时调用*/ @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } /**停止时调用*/ @Override public void onPageSelected(int position) { imageViews.get(position).setSelected(true);//滑动后颜色改变 imageViews.get(oldPostion).setSelected(false);//变为初始颜色 oldPostion = position;//把滑动后的圆点的position给原来的oldPostion } /**滑动状态改变时调用*/ @Override public void onPageScrollStateChanged(int state) { } }); } }

以上所述是小编给大家介绍的Android 使用ViewPager实现轮播图效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-10-26 01:18:02

Android 使用ViewPager实现轮播图效果的相关文章

Android ViewPager实现轮播图效果

先上一张效果图: 说到ViewPager实现轮播图效果,那么肯定会用到PagerAdapter,下面先介绍下这个类. PagerAdapter简介 PagerAdapter是Android.support.v4包中的类,是一个抽象类,直接继承于Object,导入包android.support.v4.view.PagerAdapter即可使用. PagerAdapter主要是viewpager的适配器,而viewPager则也是在android.support.v4扩展包中新添加的一个强大的控件

Android中用RxJava和ViewPager实现轮播图_Android

前言 很多人要实现轮播图都会想到使用ViewPager + Handler来完成轮播图的效果.但是在RxJava快速发展的情况下,已经可以使用RxJava来代替Handler完成这样任务了. 下面我们就来介绍如何实现RxJava+ViewPager的轮播图. 效果图如下 ViewPager的操作 说到ViwePager应该大家都不陌生,它可以结合普通的View也可以结合Fragment一起使用.在此我也就不对它的使用方法进行过多的介绍了.直接开始介绍轮播的方法. 常见的轮播操作 private

Android编程实现ListView头部ViewPager广告轮询图效果_Android

本文实例讲述了Android编程实现ListView头部ViewPager广告轮询图效果.分享给大家供大家参考,具体如下: 之前看了别人的一些软件,发现其广告图轮询的时候,那个广告感觉和ViewPager的效果不太一样,后来也查了一下,是因为时间问题,找了一些资料,自己也实践一下. 1.为了解决ListView头部加ViewPager滑动冲突问题,必须自定义ListView,重写里面的onInterceptTouchEvent方法,ListView代码如下: package com.exampl

简单实现轮播图效果的实例_javascript技巧

一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

jQuery实现简洁的轮播图效果实例_jquery

本文实例讲述了jQuery实现简洁的轮播图效果.分享给大家供大家参考,具体如下: HTML: <div class="ppt"> <a href="###"><img src="ppt/ppt1.jpg" /></a> <a href="###" style="display:none;"><img src="ppt/ppt2.jp

jQuery轮播图效果精简版完整示例_jquery

本文实例讲述了jQuery轮播图效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta ht

JS仿京东移动端手指拨动切换轮播图效果_javascript技巧

如今,移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的,今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果. 这个效果的主要技术点依托于触屏设备特有的touch事件:好了,接下来就进入主题吧. 首先是html布局: 1. 这里强调的是记得给html加上viewport这个适口属性. 2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,要想达到理想效果,需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张

android使用ViewPager实现轮播效果

ViewPager:一个可以实现视图左右滑动切换的控件. ViewPager的基本使用: ViewPager的视图需要通过PagerAdapter来实现显示. PagerAdapter的主要方法: ● getCount 视图的数量 ● instantiateItem 添加视图 ● destroyItem 销毁视图 ● isViewFromObject 是否由对象创建视图 ViewPager的常用方法: setAdapter 设置适配器 addOnPageChangeListener 监听页面切换

android 3d轮播图效果

问题描述 最近要做一个3d的轮播图,轮播图由六张图片组成,形成一个六边形.显示效果是一张那个图片在中间,两张微侧在两边,还有三张图片在这三张的后面,可以看到被面,不知道有谁做过没,指点小弟一二!!!感谢 解决方案