快捷導(dǎo)航

Android實(shí)現(xiàn)左右滑動(dòng)切換圖片

更新時(shí)間：2022年05月17日 09:56:18 作者：Biu→Biu丶

這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)左右滑動(dòng)切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

簡要說明

本文采用ImageSwitcher實(shí)現(xiàn)左右滑動(dòng)切換圖片。首先調(diào)用setFactory方法，設(shè)置視圖工廠；然后設(shè)置手指觸碰監(jiān)聽，判斷左滑右滑進(jìn)而切換圖片。

本地圖片

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)
?? ?// 網(wǎng)絡(luò)圖片
?? ?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() {
? ? ? ? // 設(shè)置視圖工廠
? ? ? ? imageSwitcher.setFactory {
? ? ? ? ? ? val imageView = ImageView(this@MainActivity)
? ? ? ? ? ? imageView.setImageResource(images[index])
? ? ? ? ? ? imageView
? ? ? ? }
? ? ? ? // 設(shè)置觸摸監(jiān)聽
? ? ? ? imageSwitcher.setOnTouchListener(object : View.OnTouchListener {
? ? ? ? ? ? override fun onTouch(view: View?, event: MotionEvent?): Boolean {
? ? ? ? ? ? ? ? //判斷動(dòng)作是不是按下
? ? ? ? ? ? ? ? if (event?.action == MotionEvent.ACTION_DOWN) {
? ? ? ? ? ? ? ? ? ? // 獲取手指按下時(shí)的X坐標(biāo)
? ? ? ? ? ? ? ? ? ? touchDownX = event.x
? ? ? ? ? ? ? ? ? ? return true
? ? ? ? ? ? ? ? } else if (event?.action == MotionEvent.ACTION_UP) {
? ? ? ? ? ? ? ? ? ? // 獲取手指離開后的X坐標(biāo)
? ? ? ? ? ? ? ? ? ? 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
? ? ? ? ? ? }
? ? ? ? })
? ? }
}

網(wǎng)絡(luò)圖片(采用Glide網(wǎng)絡(luò)加載)

setFactory方法對應(yīng)替換：

imageSwitcher.setFactory {
? ? ? ? ? ? val imageView = ImageView(this@MainActivity) ? ? ??
? ? ? ? ? ? Glide.with(this).load(urlImages[index]).into(imageView)
? ? ? ? ? ? imageView
? ? ? ? }

setOnTouchListener對應(yīng)替換：

Glide.with(this@SwipeRecommend).asBitmap().load(urlImages[index]).into(imageSwitcher.currentView as ImageView)

注意加載http網(wǎng)絡(luò)圖片需要設(shè)置網(wǎng)絡(luò)權(quán)限：

AndroidManifest.xml中添加：

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

AndroidManifest.xml的application標(biāo)簽添加：

android:networkSecurityConfig="@xml/network_security_config"

network_security_config.xml(res/xml/文件夾下,沒有自行創(chuàng)建即可)內(nèi)容為：

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

效果展示