欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android中通过ImageSwitcher实现相册滑动查看照片功能(附代码下载)

程序员文章站 2022-07-02 13:19:38
场景 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 将需要滚动查看的照片复制到res/drawable下 这里只准备了两张bg01.jpg和bg02.jpg 在滚动时需 ......

场景

效果

Android中通过ImageSwitcher实现相册滑动查看照片功能(附代码下载)

 

 

 

Android中通过ImageSwitcher实现相册滑动查看照片功能(附代码下载)

注:

博客:

关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

将需要滚动查看的照片复制到res/drawable下

这里只准备了两张bg01.jpg和bg02.jpg

Android中通过ImageSwitcher实现相册滑动查看照片功能(附代码下载)

 

 

 

Android中通过ImageSwitcher实现相册滑动查看照片功能(附代码下载)

在滚动时需要用到左进右出和左出右进的动画,所以在res下新建anim目录,在目录下新建四种动画的xml文件

Android中通过ImageSwitcher实现相册滑动查看照片功能(附代码下载)

 

 

 

Android中通过ImageSwitcher实现相册滑动查看照片功能(附代码下载)

具体代码参照示例代码。

然后打开布局文件activity_image_switcher.xml

将布局修改为相对布局relativelayout,并添加一个imageswitcher,设置其id属性。

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".imageswitcheractivity">


    <imageswitcher
        android:id="@+id/imageswitcher"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</relativelayout>

 

然后来到imageswitcheractivity

首先声明一些私有变量,用来存储照片资源数组、数组索引、鼠标放下和离开的x坐标等。  

   //图片资源数组
    private int[] arraypicture = new int[]{
            r.drawable.bg01,r.drawable.bg02
    };
    private imageswitcher imageswitcher;
    private  int index;
    private  float touchdowmx;
    private  float touchupx;

 

然后通过id获取imageswitcher并设置其视图工厂

        //获取imageswitch
        imageswitcher =(imageswitcher) findviewbyid(r.id.imageswitcher);
        //设置视图工厂
        imageswitcher.setfactory(new viewswitcher.viewfactory() {
            @override
            public view makeview() {
                imageview imageview = new imageview(imageswitcheractivity.this);
                imageview.setimageresource(arraypicture[index]);
                return imageview;
            }
        });

然后设置imageswitcher的触碰的监听器

通过

event.getaction() == motionevent.action_down

 

判断如果是鼠标按下,则记录鼠标按下时的坐标。

否则通过

event.getaction() ==motionevent.action_up

 

判断如果是鼠标抬起,则记录抬起时的x坐标。

此时再通过

touchupx-touchdowmx >100

 

即抬起时的x坐标减去落下时的x坐标大于100则认为是从左往右滑动。

此时图片的索引通过三目表达式进行判断。

index = index==0?arraypicture.length-1:index-1;

 

如果当前索引为0,即为第一张照片时,则从左往右滑动后,应该是最后一张照片,即照片索引为图片数组的长度减一。

然后通过

 imageswitcher.setinanimation(animationutils.loadanimation(imageswitcheractivity.this, r.anim.slide_in_left));

 

设置左边滑进的动画

再通过

imageswitcher.setoutanimation(animationutils.loadanimation(imageswitcheractivity.this, r.anim.slide_out_right));

 

设置右边滑出的动画

最后通过

imageswitcher.setimageresource(arraypicture[index]);

 

设置图片索引。

同理如果通过

touchdowmx - touchupx >100

 

则认为是从右往左滑。

同样通过三目表达式

index = index==arraypicture.length -1?0:index+1;

 

如果是最后一张照片,即索引为数组的长度 -1 ,则再往左滑 该是第一张照片,即索引为0  否则就索引+1。

然后通过

imageswitcher.setinanimation(animationutils.loadanimation(imageswitcheractivity.this, r.anim.slide_in_right));

 

设置右边滑进的动画

再通过

imageswitcher.setoutanimation(animationutils.loadanimation(imageswitcheractivity.this, r.anim.slide_out_left));

 

设置左边滑出的动画

最后通过

imageswitcher.setimageresource(arraypicture[index]);

 

设置图片

完整示例代码

package com.badao.relativelayouttest;

import androidx.appcompat.app.appcompatactivity;

import android.os.bundle;
import android.view.motionevent;
import android.view.view;
import android.view.animation.animationutils;
import android.widget.imageswitcher;
import android.widget.imageview;
import android.widget.viewswitcher;

public class imageswitcheractivity extends appcompatactivity {

    //图片资源数组
    private int[] arraypicture = new int[]{
            r.drawable.bg01,r.drawable.bg02
    };
    private imageswitcher imageswitcher;
    private  int index;
    private  float touchdowmx;
    private  float touchupx;

    @override
    protected void oncreate(bundle savedinstancestate) {
        super.oncreate(savedinstancestate);
        setcontentview(r.layout.activity_image_switcher);
        //获取imageswitch
        imageswitcher =(imageswitcher) findviewbyid(r.id.imageswitcher);
        //设置视图工厂
        imageswitcher.setfactory(new viewswitcher.viewfactory() {
            @override
            public view makeview() {
                imageview imageview = new imageview(imageswitcheractivity.this);
                imageview.setimageresource(arraypicture[index]);
                return imageview;
            }
        });

        //设置imageswitcher 触碰监听器
        imageswitcher.setontouchlistener(new view.ontouchlistener() {
            @override
            public boolean ontouch(view v, motionevent event) {
                //如果是鼠标按下
                if(event.getaction() == motionevent.action_down)
                {
                    //记录按下时的x坐标
                    touchdowmx = event.getx();
                    return  true;
                }else if(event.getaction() ==motionevent.action_up) //如果是鼠标抬起
                {
                    //记录抬起时的x坐标
                    touchupx = event.getx();
                    //如果是从左向右滑动
                    if(touchupx-touchdowmx >100)
                    {
                        //如果是第一张图片则从左向右滑后下标是数组的长度-1,即最后一张,如果不是则索引-1
                        index = index==0?arraypicture.length-1:index-1;
                        //设置左边滑进的动画
                        imageswitcher.setinanimation(animationutils.loadanimation(imageswitcheractivity.this, r.anim.slide_in_left));
                        //设置右边滑出的动画
                        imageswitcher.setoutanimation(animationutils.loadanimation(imageswitcheractivity.this, r.anim.slide_out_right));
                        //设置图片索引
                        imageswitcher.setimageresource(arraypicture[index]);
                    }
                    //否则认为是从右往左滑
                    else if(touchdowmx - touchupx >100)
                    {
                        //如果是最后一张照片,即索引为数组的长度 -1 ,则再往左滑 该是第一张照片,即索引为0  否则就索引+1
                        index = index==arraypicture.length -1?0:index+1;
                        //设置右边滑进的动画
                        imageswitcher.setinanimation(animationutils.loadanimation(imageswitcheractivity.this, r.anim.slide_in_right));
                        //设置左边滑出的动画
                        imageswitcher.setoutanimation(animationutils.loadanimation(imageswitcheractivity.this, r.anim.slide_out_left));
                        //设置图片索引
                        imageswitcher.setimageresource(arraypicture[index]);
                    }
                }
                return false;
            }
        });

    }
}

 

示例代码下载

关注公众号:

霸道的程序猿

回复:

android相册滑动代码