Android实现图片轮播效果
程序员文章站
2023-12-17 14:04:52
本文实例讲述了jaandroid实现图片轮播效果代码,分享给大家供大家参考。具体如下:
运行效果截图如下:
具体代码如下:
首先看下一下布局文件:
&l...
本文实例讲述了jaandroid实现图片轮播效果代码,分享给大家供大家参考。具体如下:
运行效果截图如下:
具体代码如下:
首先看下一下布局文件:
<relativelayout 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" tools:context=".mainactivity" > <!-- 广告条的使用 --> <com.xuliugen.viewpager.myviewpagertransformeranim android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="200dp" /> <!-- 广告条下边的文字 --> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignbottom="@id/viewpager" android:background="#33000000" android:orientation="vertical" > <textview android:id="@+id/image_desc" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="@string/app_name" android:textcolor="@android:color/white" android:textsize="16sp" /> <linearlayout android:id="@+id/point_group" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginbottom="5dp" android:orientation="horizontal" > </linearlayout> </linearlayout> </relativelayout>
效果很简单,从布局文件中我们看到使用了一个自定义的viewpager动画,代码如下:
package com.xuliugen.viewpager; import java.util.hashmap; import java.util.map; import android.content.context; import android.support.v4.view.viewpager; import android.util.attributeset; import android.view.view; import com.nineoldandroids.view.viewhelper; /* * 自定义viewpager实现动画切换效果: * * 1、需要拿到当前切换的两个view * * 2、一个动画的梯度值 */ public class myviewpagertransformeranim extends viewpager { private view mleft; private view mright; private float mtrans; private float mscale; private static final float min_scale = 0.6f; private map<integer, view> mchildren = new hashmap<integer, view>(); /* * 要有两个构造方法 */ public myviewpagertransformeranim(context context, attributeset attrs) { super(context, attrs); } public myviewpagertransformeranim(context context) { super(context); } /* * 设置put的方法 */ public void setviewforposition(view view, int position) { mchildren.put(position, view); } /* * remove的方法 */ public void removeviewfromposition(integer position) { mchildren.remove(position); } /** * 重写的方法 */ @override protected void onpagescrolled(int position, float offset, int offsetpixels) { // log.e("tag", "position =" + position + ",offset = " + offset); mleft = mchildren.get(position); mright = mchildren.get(position + 1); animstack(mleft, mright, offset, offsetpixels);// 创建动画效果 super.onpagescrolled(position, offset, offsetpixels); } private void animstack(view left, view right, float offset, int offsetpixels) { if (right != null) { // 从0-1页,offset:0`1 mscale = (1 - min_scale) * offset + min_scale; mtrans = -getwidth() - getpagemargin() + offsetpixels; viewhelper.setscalex(right, mscale); viewhelper.setscaley(right, mscale); viewhelper.settranslationx(right, mtrans); } if (left != null) { left.bringtofront(); } } }
mainactivity.java
package com.xuliugen.viewpager; import java.util.arraylist; import android.app.activity; import android.os.bundle; import android.os.handler; import android.support.v4.view.pageradapter; import android.support.v4.view.viewpager; import android.support.v4.view.viewpager.onpagechangelistener; import android.view.view; import android.view.viewgroup; import android.widget.imageview; import android.widget.linearlayout; import android.widget.textview; public class mainactivity extends activity { private viewpager viewpager; private linearlayout pointgroup; private textview iamgedesc; // 图片资源id private final int[] imageids = { r.drawable.a, r.drawable.b, r.drawable.c, r.drawable.d, r.drawable.e }; // 图片标题集合 private final string[] imagedescriptions = { "巩俐不低俗,我就不能低俗", "扑树又回来啦!再唱经典老歌引万人大合唱", "揭秘北京电影如何升级", "乐视网tv版大派送", "热血屌丝的反杀" }; private arraylist<imageview> imagelist; /** * 上一个页面的位置 */ protected int lastposition; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); viewpager = (viewpager) findviewbyid(r.id.viewpager); pointgroup = (linearlayout) findviewbyid(r.id.point_group); iamgedesc = (textview) findviewbyid(r.id.image_desc); iamgedesc.settext(imagedescriptions[0]); imagelist = new arraylist<imageview>(); for (int i = 0; i < imageids.length; i++) { // 初始化图片资源 imageview image = new imageview(this); image.setbackgroundresource(imageids[i]); imagelist.add(image); // 添加指示点 imageview point = new imageview(this); linearlayout.layoutparams params = new linearlayout.layoutparams( linearlayout.layoutparams.wrap_content, linearlayout.layoutparams.wrap_content); params.rightmargin = 20; point.setlayoutparams(params); point.setbackgroundresource(r.drawable.point_bg); if (i == 0) { point.setenabled(true); } else { point.setenabled(false); } pointgroup.addview(point); } viewpager.setadapter(new mypageradapter()); // viewpager.setcurrentitem(integer.max_value/2 - // (integer.max_value/2%imagelist.size())) ; viewpager.setonpagechangelistener(new onpagechangelistener() { @override /** * 页面切换后调用 * position 新的页面位置 */ public void onpageselected(int position) { position = position % imagelist.size(); // 设置文字描述内容 iamgedesc.settext(imagedescriptions[position]); // 改变指示点的状态 // 把当前点enbale 为true pointgroup.getchildat(position).setenabled(true); // 把上一个点设为false pointgroup.getchildat(lastposition).setenabled(false); lastposition = position; } @override /** * 页面正在滑动的时候,回调 */ public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) { } @override /** * 当页面状态发生变化的时候,回调 */ public void onpagescrollstatechanged(int state) { } }); /* * 自动循环: 1、定时器:timer 2、开子线程 while true 循环 3、colckmanager 4、 用handler * 发送延时信息,实现循环 */ isrunning = true; // 设置图片的自动滑动 handler.sendemptymessagedelayed(0, 3000); } /** * 判断是否自动滚动 */ private boolean isrunning = false; private handler handler = new handler() { public void handlemessage(android.os.message msg) { // 让viewpager 滑动到下一页 viewpager.setcurrentitem(viewpager.getcurrentitem() + 1); if (isrunning) { handler.sendemptymessagedelayed(0, 3000); } }; }; protected void ondestroy() { isrunning = false; }; private class mypageradapter extends pageradapter { @override /** * 获得页面的总数 */ public int getcount() { return integer.max_value; // 使得图片可以循环 } @override /** * 获得相应位置上的view * container view的容器,其实就是viewpager自身 * position 相应的位置 */ public object instantiateitem(viewgroup container, int position) { // system.out.println("instantiateitem ::" + position); // 给 container 添加一个view container.addview(imagelist.get(position % imagelist.size())); // 返回一个和该view相对的object return imagelist.get(position % imagelist.size()); } @override /** * 判断 view和object的对应关系 */ public boolean isviewfromobject(view view, object object) { if (view == object) { return true; } else { return false; } } @override /** * 销毁对应位置上的object */ public void destroyitem(viewgroup container, int position, object object) { // system.out.println("destroyitem ::" + position); container.removeview((view) object); object = null; } } }
另外我们看效果图可以看出,效果图下边的几个原点是变化的,所以我们需要一个selector,如下:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/point_nomal" android:state_enabled="false"/> <item android:drawable="@drawable/point_focured" android:state_enabled="true"/> </selector>
希望本文所述对大家学习android软件编程有所帮助。