Android基于ImageSwitcher实现图片切换功能
程序员文章站
2024-02-20 23:12:46
左右切换图片控件大家都用viewpager, viewfipper比较多吧,我之前也用viewpager实现了,使用viewpager实现左右循环滑动图片,有兴趣的可以去看...
左右切换图片控件大家都用viewpager, viewfipper比较多吧,我之前也用viewpager实现了,使用viewpager实现左右循环滑动图片,有兴趣的可以去看下,今天介绍的是基于imageswitcher实现的左右切换图片,先上截图吧
好了,接下来来看代码吧,第一张图是一个gridview,点击item跳转到第二个界面,第一个界面可以忽略,主要是讲解imageswitcher的左右却换图片,先看布局文件
<?xml version="1.0" encoding="utf-8"?> <framelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <imageswitcher android:id="@+id/imageswitcher1" android:layout_width="fill_parent" android:layout_height="fill_parent"> </imageswitcher> <relativelayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <linearlayout android:id="@+id/viewgroup" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:layout_marginbottom="30dp" android:gravity="center_horizontal" android:orientation="horizontal" > </linearlayout> </relativelayout> </framelayout>
然后就是activity代码啦,总体来说比较简单,代码我添加了注释
package com.example.photoalbum; import android.app.activity; import android.os.bundle; import android.view.motionevent; import android.view.view; import android.view.view.ontouchlistener; import android.view.viewgroup; import android.view.animation.animationutils; import android.widget.imageswitcher; import android.widget.imageview; import android.widget.linearlayout; import android.widget.relativelayout.layoutparams; import android.widget.toast; import android.widget.viewswitcher.viewfactory; public class showphotoactivity extends activity implements viewfactory, ontouchlistener{ /** * imagaswitcher 的引用 */ private imageswitcher mimageswitcher; /** * 图片id数组 */ private int[] imgids; /** * 当前选中的图片id序号 */ private int currentposition; /** * 按下点的x坐标 */ private float downx; /** * 装载点点的容器 */ private linearlayout linearlayout; /** * 点点数组 */ private imageview[] tips; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.show_photo); imgids = new int[]{r.drawable.item01,r.drawable.item02,r.drawable.item03,r.drawable.item04, r.drawable.item05, r.drawable.item06, r.drawable.item07, r.drawable.item08,r.drawable.item09, r.drawable.item10, r.drawable.item11, r.drawable.item12}; //实例化imageswitcher mimageswitcher = (imageswitcher) findviewbyid(r.id.imageswitcher1); //设置factory mimageswitcher.setfactory(this); //设置ontouchlistener,我们通过touch事件来切换图片 mimageswitcher.setontouchlistener(this); linearlayout = (linearlayout) findviewbyid(r.id.viewgroup); tips = new imageview[imgids.length]; for(int i=0; i<imgids.length; i++){ imageview mimageview = new imageview(this); tips[i] = mimageview; linearlayout.layoutparams layoutparams = new linearlayout.layoutparams(new viewgroup.layoutparams(layoutparams.wrap_content, layoutparams.wrap_content)); layoutparams.rightmargin = 3; layoutparams.leftmargin = 3; mimageview.setbackgroundresource(r.drawable.page_indicator_unfocused); linearlayout.addview(mimageview, layoutparams); } //这个我是从上一个界面传过来的,上一个界面是一个gridview currentposition = getintent().getintextra("position", 0); mimageswitcher.setimageresource(imgids[currentposition]); setimagebackground(currentposition); } /** * 设置选中的tip的背景 * @param selectitems */ private void setimagebackground(int selectitems){ for(int i=0; i<tips.length; i++){ if(i == selectitems){ tips[i].setbackgroundresource(r.drawable.page_indicator_focused); }else{ tips[i].setbackgroundresource(r.drawable.page_indicator_unfocused); } } } @override public view makeview() { final imageview i = new imageview(this); i.setbackgroundcolor(0xff000000); i.setscaletype(imageview.scaletype.center_crop); i.setlayoutparams(new imageswitcher.layoutparams(layoutparams.fill_parent, layoutparams.fill_parent)); return i ; } @override public boolean ontouch(view v, motionevent event) { switch (event.getaction()) { case motionevent.action_down:{ //手指按下的x坐标 downx = event.getx(); break; } case motionevent.action_up:{ float lastx = event.getx(); //抬起的时候的x坐标大于按下的时候就显示上一张图片 if(lastx > downx){ if(currentposition > 0){ //设置动画,这里的动画比较简单,不明白的去网上看看相关内容 mimageswitcher.setinanimation(animationutils.loadanimation(getapplication(), r.anim.left_in)); mimageswitcher.setoutanimation(animationutils.loadanimation(getapplication(), r.anim.right_out)); currentposition --; mimageswitcher.setimageresource(imgids[currentposition % imgids.length]); setimagebackground(currentposition); }else{ toast.maketext(getapplication(), "已经是第一张", toast.length_short).show(); } } if(lastx < downx){ if(currentposition < imgids.length - 1){ mimageswitcher.setinanimation(animationutils.loadanimation(getapplication(), r.anim.right_in)); mimageswitcher.setoutanimation(animationutils.loadanimation(getapplication(), r.anim.lift_out)); currentposition ++ ; mimageswitcher.setimageresource(imgids[currentposition]); setimagebackground(currentposition); }else{ toast.maketext(getapplication(), "到了最后一张", toast.length_short).show(); } } } break; } return true; } }
上面切换图片主要用到的就是动画了,用的是translate移动动画,这里我就不介绍了,接下来我吧动画代码贴出来,在res新建一个anim的目录,如下图
左边进入的动画,left_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromxdelta="-100%p" android:toxdelta="0" android:duration="500"/> </set>
左边出去的动画,left_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromxdelta="0" android:toxdelta="-100%p" android:duration="500"/> </set>
右边进入的动画,right_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromxdelta="100%p" android:toxdelta="0" android:duration="500"/> </set>
右边出去的动画,right_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromxdelta="0" android:toxdelta="100%p" android:duration="500"/> </set>
好了,介绍完了,代码写的不是很好,写的不好的地方希望大家谅解,小编一定更加努力。
推荐阅读
-
Android基于ImageSwitcher实现图片切换功能
-
Android编程基于自定义View实现绚丽的圆形进度条功能示例
-
Android编程实现支持拖动改变位置的图片中叠加文字功能示例
-
Android编程滑动效果之Gallery+GridView实现图片预览功能(附demo源码下载)
-
Android编程实现图片背景渐变切换与图层叠加效果
-
Android编程实现调用系统图库与裁剪图片功能
-
Android基于AudioManager、PhoneStateListener实现设置黑名单功能
-
Android编程基于自定义View实现绚丽的圆形进度条功能示例
-
Android启动屏实现左右滑动切换查看功能
-
Android编程实现支持拖动改变位置的图片中叠加文字功能示例