如何在Android Studio中结合ARCore实现基于图像识别的2D image slider

核心思路 #

在识别到目标图像后，在图像对应的AR锚点位置挂载一个包含图片滑块的自定义2D视图容器，通过ViewPager2或横向滚动组件实现图片切换功能。

具体实现步骤 #

1. 监听图像识别事件，触发滑块加载 #

在你的ARFragment中，基于simple-augmented-images示例的基础上，扩展图像识别后的逻辑：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val sceneView = arSceneView
    // 复用示例中的图像数据库配置逻辑
    setupAugmentedImageDatabase(sceneView.session)
    
    // 监听场景更新，捕获图像识别状态
    sceneView.scene.addOnUpdateListener {
        val frame = sceneView.arFrame ?: return@addOnUpdateListener
        val trackedImages = frame.getUpdatedTrackables(AugmentedImage::class.java)
        for (image in trackedImages) {
            if (image.trackingState == TrackingState.TRACKING && !image.isMarked) {
                // 识别到有效图像，添加滑块视图
                attachImageSliderToImage(image, sceneView)
                image.isMarked = true
            }
        }
    }
}

2. 创建滑块布局与适配器 #

先编写滑块的基础布局layout_ar_slider.xml：

<androidx.viewpager2.widget.ViewPager2
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/slider_pager"
    android:layout_width="240dp"
    android:layout_height="320dp"
    android:background="@android:color/transparent"/>

再实现ViewPager2的适配器：

class SliderImageAdapter(private val imgResList: List<Int>) : RecyclerView.Adapter<SliderImageAdapter.ViewHolder>() {
    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageView = itemView.findViewById(R.id.slider_item_img)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val itemView = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_slider_image, parent, false)
        return ViewHolder(itemView)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.imageView.setImageResource(imgResList[position])
    }

    override fun getItemCount() = imgResList.size
}

3. 将滑块布局转为ViewRenderable并挂载到AR锚点 #

编写挂载逻辑，把滑块视图绑定到识别到的图像锚点上：

private fun attachImageSliderToImage(augmentedImage: AugmentedImage, sceneView: ArSceneView) {
    ViewRenderable.builder()
        .setView(requireContext(), R.layout.layout_ar_slider)
        .build()
        .thenAccept { renderable ->
            // 创建锚点，绑定到图像中心位置
            val anchor = augmentedImage.createAnchor(augmentedImage.centerPose)
            val sliderNode = Node().apply {
                setParent(sceneView.scene)
                this.anchor = anchor
                this.renderable = renderable
                // 调整视图缩放比例，适配AR空间
                localScale = Vector3(0.12f, 0.12f, 0.12f)
            }
            // 初始化滑块适配器
            val viewPager = renderable.view.findViewById<ViewPager2>(R.id.slider_pager)
            viewPager.adapter = SliderImageAdapter(listOf(
                R.drawable.invite_img1,
                R.drawable.invite_img2,
                R.drawable.invite_img3
            ))
        }
        .exceptionally {
            Log.e("ARSlider", "加载滑块视图失败", it)
            null
        }
}

4. 优化交互与显示效果 #

• 如果滑块触摸无响应，可在ARFragment中重写onTouchEvent，将触摸事件传递给滑块视图：

override fun onTouchEvent(event: MotionEvent?): Boolean {
    arSceneView.scene.children.forEach { node ->
        node.renderable?.let {
            if (it is ViewRenderable) {
                it.view.dispatchTouchEvent(event)
            }
        }
    }
    return super.onTouchEvent(event)
}

• 可添加指示器、自动轮播等功能，增强滑块的交互体验

注意事项 #

• 确保目标识别图像的清晰度与对比度，提升AR识别稳定性
• 测试时选择光照充足的环境，避免识别失效
• 调整滑块的缩放比例和位置，让视图与识别图像的空间关系更协调

内容的提问来源于stack exchange，提问作者divyangrana