Android slide view photo album function achieved by ImageSwitcher (with code to download)

Scenes

effect

 

 

 

Note:

Blog:
https://blog.csdn.net/badao_liumang_qizhi
public concern number of
programs overbearing ape
acquisition-related programming e-books, tutorials and push for free download.

achieve

The photos need to scroll to view the copy / lower res drawable

Here only prepared two bg01.jpg and bg02.jpg

 

 

 

When rolling out the need to use the left into the right and the left and right out into animation, so the new anim directory under the res, the new four kinds of animation in the directory xml file

 

 

 

Sample Code reference specific code.

Then open the layout file activity_image_switcher.xml

The layout modification of the layout relative RelativeLayout, and add a ImageSwitcher, set its ID property.

<?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相册滑动代码