Photo album sliding view via ImageSwitcher in Android (with code download)

scene

Effect

 

 

 

Note:

Blog:
https://blog.csdn.net/badao_liumang_qizhi
Focus on Public Number
Domineering program ape
Get programming-related e-books, tutorial pushes, and free downloads.

Realization

Copy photos that you need to scroll through to res/drawable

Only two bg01.jpg and bg02.jpg are prepared here

 

 

 

You need left-in, right-out, and left-out, right-in animations to scroll, so create a new anim directory under res and a new xml file for the four animations in the directory

 

 

 

The specific code refers to the sample code.

Then open the layout file activity_image_switcher.xml

Modify the layout to Relative Layout and add an ImageSwitcher to 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>

 

Then come to ImageSwitcherActivity

First, declare some private variables to store the array of photo resources, the array index, the X coordinates of the mouse down and away, and so on.*

   //Picture Resource Array
    private int[] arrayPicture = new int[]{
            R.drawable.bg01,R.drawable.bg02
    };
    private ImageSwitcher imageSwitcher;
    private  int index;
    private  float touchDowmX;
    private  float touchUpX;

 

Then get ImageSwitcher by id and set its view factory

        //Obtain imageSwitch
        imageSwitcher =(ImageSwitcher) findViewById(R.id.imageSwitcher);
        //Set View Factory
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(ImageSwitcherActivity.this);
                imageView.setImageResource(arrayPicture[index]);
                return imageView;
            }
        });

Then set the monitor that ImageSwitcher touches

adopt

event.getAction() == MotionEvent.ACTION_DOWN

 

Determine if the mouse is pressed, then record the coordinates when the mouse is pressed.

Otherwise pass

event.getAction() ==MotionEvent.ACTION_UP

 

Determine if the mouse is raised, then record the X coordinate when the mouse is raised.

Pass again at this time

touchUpX-touchDowmX >100

 

That is, the X-coordinate at the time of lifting minus the X-coordinate at the time of falling is considered to slide from left to right if it is greater than 100.

The index of the picture is then determined by a trinomial expression.

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

 

If the current index is 0, which is the first photo, then after sliding from left to right, it should be the last photo, that is, the photo index is one minus the length of the picture array.

Then pass

 imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_left));

 

Set animation for sliding left

Pass Again

imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_right));

 

Set the animation that slides out on the right

Last Passed

imageSwitcher.setImageResource(arrayPicture[index]);

 

Set the picture index.

Similarly, if passed

touchDowmX - touchUpX >100

 

Slide from right to left is considered.

Also through trinomial expressions

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

 

If it is the last photo, that is, the index is the length of the array - 1, then slide left again to the first photo, that is, the index is 0, otherwise index + 1.

Then pass

imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_right));

 

Set animation for sliding right

Pass Again

imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_left));

 

Set the animation to slide out on the left

Last Passed

imageSwitcher.setImageResource(arrayPicture[index]);

 

Set Picture

Complete sample code

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 {

    //Picture Resource Array
    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);
        //Obtain imageSwitch
        imageSwitcher =(ImageSwitcher) findViewById(R.id.imageSwitcher);
        //Set View Factory
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(ImageSwitcherActivity.this);
                imageView.setImageResource(arrayPicture[index]);
                return imageView;
            }
        });

        //Set up imageSwitcher Touch Monitor
        imageSwitcher.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                //If the mouse is pressed
                if(event.getAction() == MotionEvent.ACTION_DOWN)
                {
                    //Record when pressed X coordinate
                    touchDowmX = event.getX();
                    return  true;
                }else if(event.getAction() ==MotionEvent.ACTION_UP) //If the mouse is raised
                {
                    //Record when lifted X coordinate
                    touchUpX = event.getX();
                    //If sliding from left to right
                    if(touchUpX-touchDowmX >100)
                    {
                        //If the first picture is the length of the array by sliding from left to right with the subscript-1,That is the last one, if not the index-1
                        index = index==0?arrayPicture.length-1:index-1;
                        //Set animation for sliding left
                        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_left));
                        //Set the animation that slides out on the right
                        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_right));
                        //Set Picture Index
                        imageSwitcher.setImageResource(arrayPicture[index]);
                    }
                    //Otherwise it is considered a right-to-left slide
                    else if(touchDowmX - touchUpX >100)
                    {
                        //If it is the last photo, the length of the array is indexed -1 ,Slide left again for the first photo, i.e. index 0 or else index+1
                        index = index==arrayPicture.length -1?0:index+1;
                        //Set animation for sliding right
                        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_right));
                        //Set the animation to slide out on the left
                        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_left));
                        //Set Picture Index
                        imageSwitcher.setImageResource(arrayPicture[index]);
                    }
                }
                return false;
            }
        });

    }
}

 

Sample Code Download

Focus on Public Number:

Domineering program ape

Reply:

Android Album Slide Code

Tags: Android xml Programming encoding

Posted on Mon, 06 Jan 2020 22:20:55 -0800 by mightymaster