正文

Android基于ImageSwitcher实现图片切换功能

︶ㄣSDDLL学院 メ
SDDLL学院V管理员 / 阅读
0717
这篇文章主要介绍了Android基于ImageSwitcher实现图片切换功能的相关资料,需要的朋友可以参考下

这篇文章主要介绍了Android基于ImageSwitcher实现图片切换功能的相关资料,需要的朋友可以参考下

左右切换图片控件大家都用viewpager, viewfipper比较多吧，我之前也用viewpager实现了，使用viewpager实现左右循环滑动图片，有兴趣的可以去看下，今天介绍的是基于imageswitcher实现的左右切换图片，先上截图吧

Android基于ImageSwitcher实现图片切换功能

好了，接下来来看代码吧，第一张图是一个gridview，点击item跳转到第二个界面，第一个界面可以忽略，主要是讲解imageswitcher的左右却换图片，先看布局文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?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代码啦，总体来说比较简单，代码我添加了注释

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
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

?
1
2
3
4
5
6
7
<?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

?
1
2
3
4
5
6
7
<?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

?
1
2
3
4
5
6
7
<?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

?
1
2
3
4
5
6
7
<?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>

好了，介绍完了，代码写的不是很好，写的不好的地方希望大家谅解，小编一定更加努力。