Android实现轮播图片效果
程序员文章站
2022-05-15 15:28:43
本文实例为大家分享了android实现轮播图片效果的具体代码,供大家参考,具体内容如下一、原理首先,将这些要轮播的图片和一些文本分别放置在不同的数据集合中,程序启动的时候默认显示一组图片和文本数据,然...
本文实例为大家分享了android实现轮播图片效果的具体代码,供大家参考,具体内容如下
一、原理
首先,将这些要轮播的图片和一些文本分别放置在不同的数据集合中,程序启动的时候默认显示一组图片和文本数据,然后启动一个定时器,每隔一段时间便替换掉显示的图片和文本数据,同时加入一些动画效果,已达到轮播的特效。同时,我们也要实现手指滑动图片达到轮播的效果。
二、实现
1、程序启动界面mainactivity
public class mainactivity extends appcompatactivity implements imagebannerframlayout.framlayoutlisenner{ private imagebannerframlayout mgroup; private int[] ids = new int[] { r.drawable.i1,//图片资源1 r.drawable.i2,//图片资源2 }; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); //计算当前手机宽度 displaymetrics displaymetrics = new displaymetrics(); getwindowmanager().getdefaultdisplay().getmetrics(displaymetrics); int width = displaymetrics.widthpixels; mgroup = (imagebannerframlayout) findviewbyid(r.id.image_group); mgroup.setlisenner(this); list<bitmap> list = new arraylist<>(); for (int i = 0; i < ids.length; i++) { bitmap bitmap = bitmapfactory.decoderesource(getresources(),ids[i]); list.add(bitmap); } mgroup.addbitmaps(list); } @override public void chickimageindex(int pos) { toast.maketext(this,"索引值 = " + pos,toast.length_short).show(); } }
2、新建包view下面新建两个类
1)新建imagebarnnerviewgroup类继承自viewgroup
public class imagebarnnerviewgroup extends viewgroup { private int children;//我们view group的子视图总个数 private int childwidth;//子视图的宽度 private int childheight;//子视图的高度 private int x;//此时的x的值代表的是第一次按下的位置的横坐标,每一次移动过的过程中 移动之前的位置横坐标 private int index = 0;//代表名为每张图片的索引 private scroller scroller; /** * 利用一个单击变量开关进行判断,离开屏幕的一瞬间判断用户的操作是点击 */ private boolean isclick;//true的时候点击事件,false的时候不是点击事件 private imagebarnnerlister lister; private imagebarnnerviewgrouplisnner barnnerviewgrouplisnner; public imagebarnnerlister getlister() { return lister; } public void setlister(imagebarnnerlister lister) { this.lister = lister; } public imagebarnnerviewgrouplisnner getbarnnerviewgrouplisnner() { return barnnerviewgrouplisnner; } public void setbarnnerviewgrouplisnner(imagebarnnerviewgrouplisnner barnnerviewgrouplisnner) { this.barnnerviewgrouplisnner = barnnerviewgrouplisnner; } public interface imagebarnnerlister { void chickimageindex(int pos);//pos代表的是我们当前的图片的具体索引值 } /** * 实现轮播图底部圆点切换效果 * 自定义一个继承自fragmenlayou布局,利用fragmelayout布局特性 */ //自动轮播 private boolean isauto = true;//默认情况下开启轮播 private timer timer = new timer(); private timertask timertask; @suppresslint("handlerleak") private android.os.handler autohandler = new android.os.handler() { @override public void handlemessage(message msg) { switch (msg.what) { case 0://我们需要图片的自动轮播 if (++index >= children) {//如果是最后一张图片,从第一张开始 index = 0; } scrollto(childwidth * index,0); barnnerviewgrouplisnner.selectimage(index); break; default: } } }; private void startauto() { isauto = true; } private void stopauto() { isauto = false; } /** * 采用timer,timertask,handler三者结合的方式来实现自动轮播 */ public imagebarnnerviewgroup(context context) { super(context); initobj(); } public imagebarnnerviewgroup(context context, attributeset attrs) { super(context, attrs); initobj(); } public imagebarnnerviewgroup(context context, attributeset attrs, int defstyleattr, int defstyleres) { super(context, attrs, defstyleattr, defstyleres); initobj(); } private void initobj() { scroller = new scroller(getcontext()); timertask = new timertask() { @override public void run() { if (isauto) {//开启轮播图 autohandler.sendemptymessage(0); } } }; timer.schedule(timertask,100,3000); } @override public void computescroll() { super.computescroll(); if (scroller.computescrolloffset()) { scrollto(scroller.getcurrx(),0); invalidate();//重绘 } } @override protected void onmeasure(int widthmeasurespec, int heightmeasurespec) { super.onmeasure(widthmeasurespec, heightmeasurespec); //1.求出子视图的个数 children = getchildcount();//我们可以知道自试图的个数 if (0 == children) { setmeasureddimension(0,0); } else { measurechildren(widthmeasurespec, heightmeasurespec); //此时我们以第一个子视图=为基准,也就是说我们的view group view view = getchildat(0); childwidth = view.getmeasuredwidth(); childheight = view.getmeasuredheight(); int width = view.getmeasuredwidth() * children; setmeasureddimension(width,childheight); } //2.测量子视图的宽度和高度 //3.根据子视图的狂赌和高度,求出该viewgroup的宽度和高度 } @override public boolean onintercepttouchevent(motionevent ev) { return super.onintercepttouchevent(ev); } /** * 用两种方式来实现轮播图的手动轮播 * 1,利用scrollto,scrollby 完成轮播图的手动轮播 * 1,利用scroller 对象完成轮播图的手动效果 * @param event * @return */ @override public boolean ontouchevent(motionevent event) { switch (event.getaction()) { case motionevent.action_down://表示用户按下的一瞬间 stopauto();//停止图片轮播 if (!scroller.isfinished()) { scroller.abortanimation(); } isclick = true; x=(int)event.getx(); break; case motionevent.action_move://表示用户按下之后在屏幕上移动的过程 int movex = (int) event.getx(); int distance = movex - x; scrollby(-distance,0); x = movex; isclick = false; break; case motionevent.action_up://标识的是用户抬起的一瞬间 int scrollx = getscrollx(); index = (scrollx + childwidth / 2) / childwidth; if (index < 0) { //已经滑动到了最左边 index = 0; } else if (index > children - 1) {//说明已经滑动到了最右边 index = children - 1; } if (isclick) { //点击事件 lister.chickimageindex(index); } else { int dx = index * childwidth - scrollx; scroller.startscroll(scrollx,0,dx,0); postinvalidate(); barnnerviewgrouplisnner.selectimage(index); } startauto();//开启图片轮播 break; default: } return true; //返回true的目的是告诉该view group容器的父view 我们已经处理好了该事件 } @override protected void onlayout(boolean b, int i, int i1, int i2, int i3) { if (b) { int lefrmargin = 0; for (int j = 0; j < children; j++) { view view = getchildat(j); view.layout(lefrmargin,0,lefrmargin + childwidth,childheight); lefrmargin += childwidth; } } } public interface imagebarnnerviewgrouplisnner{ void selectimage(int index); } }
2)新建imagebannerframlayout类继承自framelayout实现两个接口
public class imagebannerframlayout extends framelayout implements imagebarnnerviewgroup.imagebarnnerviewgrouplisnner,imagebarnnerviewgroup.imagebarnnerlister{ private imagebarnnerviewgroup imagebarnnerviewgroup; private linearlayout linearlayout; private framlayoutlisenner lisenner; public framlayoutlisenner getlisenner() { return lisenner; } public void setlisenner(framlayoutlisenner lisenner) { this.lisenner = lisenner; } public imagebannerframlayout(@nonnull context context) { super(context); initimagebarnnerviewgroup(); initdotlinearlayout(); } public imagebannerframlayout(@nonnull context context, @nullable attributeset attrs) { super(context, attrs); initimagebarnnerviewgroup(); initdotlinearlayout(); } public imagebannerframlayout(@nonnull context context, @nullable attributeset attrs, int defstyleattr) { super(context, attrs, defstyleattr); initimagebarnnerviewgroup(); initdotlinearlayout(); } public void addbitmaps(list<bitmap> list) { for (int i = 0; i < list.size(); i++) { bitmap bitmap = list.get(i); addbitmaptoimagebarnnerviewgroup(bitmap); adddottolinearlayout(); } } private void adddottolinearlayout() { imageview iv = new imageview(getcontext()); linearlayout.layoutparams layoutparams = new linearlayout.layoutparams (linearlayout.layoutparams.wrap_content,linearlayout.layoutparams.match_parent); layoutparams.setmargins(5,5,5,5); iv.setlayoutparams(layoutparams); iv.setimageresource(r.drawable.dot_normal); linearlayout.addview(iv); } private void addbitmaptoimagebarnnerviewgroup(bitmap bitmap) { imageview imageview = new imageview(getcontext()); imageview.setscaletype(imageview.scaletype.center_crop); imageview.setlayoutparams(new viewgroup.layoutparams(viewgroup.layoutparams.wrap_content,viewgroup.layoutparams.wrap_content)); imageview.setimagebitmap(bitmap); imagebarnnerviewgroup.addview(imageview); } //初始化自定义图片轮播功能核心类 private void initimagebarnnerviewgroup() { imagebarnnerviewgroup = new imagebarnnerviewgroup(getcontext()); framelayout.layoutparams layoutparams = new framelayout.layoutparams (framelayout.layoutparams.match_parent, framelayout.layoutparams.match_parent); imagebarnnerviewgroup.setlayoutparams(layoutparams); imagebarnnerviewgroup.setbarnnerviewgrouplisnner(this);//将linsnner传递给framlayout imagebarnnerviewgroup.setlister(this); addview(imagebarnnerviewgroup); } //初始化底部圆点布局 private void initdotlinearlayout() { linearlayout = new linearlayout(getcontext()); framelayout.layoutparams layoutparams = new framelayout.layoutparams (framelayout.layoutparams.match_parent, 40); linearlayout.setlayoutparams(layoutparams); linearlayout.setorientation(linearlayout.horizontal); linearlayout.setgravity(gravity.center); linearlayout.setbackgroundcolor(color.red); addview(linearlayout); framelayout.layoutparams layoutparams1 = (layoutparams) linearlayout.getlayoutparams(); layoutparams.gravity = gravity.bottom; linearlayout.setlayoutparams(layoutparams1); if (build.version.sdk_int >= build.version_codes.honeycomb) { linearlayout.setalpha(0.5f); } else { linearlayout.getbackground().setalpha(100); } } @override public void selectimage(int index) { int count = linearlayout.getchildcount(); for (int i = 0;i < count; i++) { imageview iv = (imageview) linearlayout.getchildat(i); if (i == index) { iv.setimageresource(r.drawable.dot_select); } else { iv.setimageresource(r.drawable.dot_normal); } } } @override public void chickimageindex(int pos) { lisenner.chickimageindex(pos); } public interface framlayoutlisenner{ void chickimageindex(int pos); } }
3、程序布局页面activity_main
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity"> <com.example.tony.imagegroup.view.imagebannerframlayout android:id="@+id/image_group" android:layout_width="match_parent" android:layout_height="200dp"> </com.example.tony.imagegroup.view.imagebannerframlayout> </relativelayout>
4、新建两个drawable资源文件dot_normal.xml和dot_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>
三、运行结果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。