ImageSwitcher左右无限循环滑动并带有圆点

来源:互联网 发布:有声朗读软件ios 编辑:程序博客网 时间:2024/05/18 20:10

我相信很多程序猿都遇到过图片之间的切换,左右循环滑动,以前我写项目用的都是Viewpager下面是网址,大家可以看一下:ViewPager链接,后来我发现了ImageSwitcher,我感觉用Imageswitcher实现ViewPager的这个功能更加简单,大家还是先看一下效果图吧:

        

下面是XML文件,很简单,自己看看吧,不做过多的解释啦:

<?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>

下面是class部分,先看代码,然后在解释:

package com.example.imageswitcher;import android.app.Activity;import android.os.Bundle;import android.os.Handler;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.ViewSwitcher.ViewFactory;public class ShowPhotoActivity extends Activity implements ViewFactory, OnTouchListener{/** * ImagaSwitcher 的引用 */private ImageSwitcher mImageSwitcher;/** * 图片id数组 */private int[] imgIds;/** * 当前选中的图片id序号 */private int currentPosition=0;/** * 按下点的X坐标 */private float downX;/** * 装载点点的容器 */private LinearLayout linearLayout;/** * 点点数组 */private ImageView[] tips;/** * 实现图片自动切换的核心部分 */Handler handler=new Handler(){public void handleMessage(android.os.Message msg) {switch (msg.what) {case 1:if(currentPosition < imgIds.length - 1){currentPosition ++ ;}else{currentPosition=0;}mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_in));mImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.left_out));mImageSwitcher.setImageResource(imgIds[currentPosition]);//为了保证在滑动的时候,图片和点点切换时间一致,因为动画有500的延迟handler.sendEmptyMessageDelayed(2, 500);handler.sendEmptyMessageDelayed(1, 2000);break;case 2:setImageBackground(currentPosition);break;default:break;}};};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);imgIds = new int[]{R.drawable.meinv1,R.drawable.meinv2,R.drawable.meinv3,R.drawable.meinv4,R.drawable.meinv5, R.drawable.meinv6};//实例化ImageSwitchermImageSwitcher  = (ImageSwitcher) findViewById(R.id.imageSwitcher1);//设置FactorymImageSwitcher.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.normal);linearLayout.addView(mImageView, layoutParams);}//这个我是从上一个界面传过来的,上一个界面是一个GridViewmImageSwitcher.setImageResource(imgIds[currentPosition]);//设置图片之间切换的时间间隔handler.sendEmptyMessageDelayed(1, 2000);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.focused);              }else{              tips[i].setBackgroundResource(R.drawable.normal);              }          }      } @Overridepublic View makeView() {final ImageView i = new ImageView(this);/*CENTER /center  按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的居中部分显示CENTER_CROP / centerCrop  按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽)CENTER_INSIDE / centerInside  将图片的内容完整居中显示,通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽FIT_CENTER / fitCenter  把图片按比例扩大/缩小到View的宽度,居中显示FIT_END / fitEnd   把图片按比例扩大/缩小到View的宽度,显示在View的下部分位置FIT_START / fitStart  把图片按比例扩大/缩小到View的宽度,显示在View的上部分位置FIT_XY / fitXY  把图片不按比例扩大/缩小到View的大小显示MATRIX / matrix 用矩阵来绘制*/i.setBackgroundColor(0xff000000);i.setScaleType(ImageView.ScaleType.CENTER_CROP);i.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));return i ;}@Overridepublic 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){currentPosition -- ;}else{currentPosition=imgIds.length - 1;}mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.left_in));mImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_out));mImageSwitcher.setImageResource(imgIds[currentPosition]);setImageBackground(currentPosition);} if(lastX < downX){if(currentPosition < imgIds.length - 1){currentPosition ++ ;}else{currentPosition=0;}mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_in));mImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.left_out));mImageSwitcher.setImageResource(imgIds[currentPosition]);setImageBackground(currentPosition);}}break;}return true;}}
其中的设置动画部分,可以直接调用系统的动画效果,例如左边进入动画可以使用:android.R.anim.slide_in_left,右边移出动画可以使用:android.R.anim.slide_out_right。

0 0