Android实现左右滑动切换图片

简要说明

本文采用imageswitcher实现左右滑动切换图片。首先调用setfactory方法，设置视图工厂；然后设置手指触碰监听，判断左滑右滑进而切换图片。

本地图片

xml

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

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

</linearlayout>

activity

package com.imageswitcher

import android.os.bundle
import android.view.motionevent
import android.view.view
import android.view.animation.animationutils
import android.widget.imageview
import androidx.appcompat.app.appcompatactivity
import com.bumptech.glide.glide
import kotlinx.android.synthetic.main.activity_main.*

class mainactivity : appcompatactivity() {
    // 本地图片
    private val images = arrayof(r.drawable.t1,
            r.drawable.t2,
            r.drawable.t3,
            r.drawable.t4,
            r.drawable.t5,
            r.drawable.t6)
    // 网络图片
    private val urlimages = arrayof("http://ip/aa.jpg",
            "http://ip/bb.jpg",
            "http://ip/cc.jpg",
            "http://ip/dd.jpg",
            "http://ip/ee.jpg",
            "http://ip/ff.jpg")
            
    private var index = 0
    private var touchdownx: float = 0f
    private var touchupx: float = 0f

    override fun oncreate(savedinstancestate: bundle?) {
        super.oncreate(savedinstancestate)
        setcontentview(r.layout.activity_main)

        initview()
    }

    private fun initview() {
        // 设置视图工厂
        imageswitcher.setfactory {
            val imageview = imageview(this@mainactivity)
            imageview.setimageresource(images[index])
            imageview
        }
        // 设置触摸监听
        imageswitcher.setontouchlistener(object : view.ontouchlistener {
            override fun ontouch(view: view?, event: motionevent?): boolean {
                //判断动作是不是按下
                if (event?.action == motionevent.action_down) {
                    // 获取手指按下时的x坐标
                    touchdownx = event.x
                    return true
                } else if (event?.action == motionevent.action_up) {
                    // 获取手指离开后的x坐标
                    touchupx = event.x
                    // 判断是左滑还是右滑
                    if (touchupx - touchdownx > 100) {
                        // 上一张
                        if (index == 0) {
                            index = images.size - 1
                        } else {
                            index--
                        }
                    } else if (touchdownx - touchupx > 100) {
                        // 下一张
                        if (index >= images.size - 1) {
                            index = 0
                        } else {
                            index++
                        }
                    }
                    // 使用自带的淡入淡出
                    imageswitcher.inanimation = animationutils.loadanimation(this@mainactivity, android.r.anim.fade_in);
                    imageswitcher.outanimation = animationutils.loadanimation(this@mainactivity, android.r.anim.fade_out);
                    // 显示另一张图片
                    imageswitcher.setimageresource(images[index])
                    return true
                }
                return false
            }
        })
    }
}

网络图片(采用glide网络加载)

• setfactory方法对应替换：

imageswitcher.setfactory {
            val imageview = imageview(this@mainactivity)       
            glide.with(this).load(urlimages[index]).into(imageview)
            imageview
        }

• setontouchlistener对应替换：

glide.with(this@swiperecommend).asbitmap().load(urlimages[index]).into(imageswitcher.currentview as imageview)

注意加载http网络图片需要设置网络权限：

• androidmanifest.xml中添加：

<uses-permission android:name="android.permission.internet" />

• androidmanifest.xml的application标签添加：

android:networksecurityconfig="@xml/network_security_config"

• network_security_config.xml(res/xml/文件夹下,没有自行创建即可)内容为：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartexttrafficpermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

效果展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。