左右切换图片控件大家都用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>
好了，介绍完了，代码写的不是很好，写的不好的地方希望大家谅解，小编一定更加努力。
如对本文有疑问， 点击进行留言回复！！
网友评论