android 图片浏览控件 android实现图片浏览器

转载

技术极客之光 2023-08-27 23:24:30

文章标签 android 图片浏览控件 android android studio webview 手势滑动 文章分类 Android 移动开发

摘要

1. 效果预览
2. 创建新的Android项目
3. 添加ImageView
4. 实现手势滑动
5. 测试应用
总结

摘要

本文将详细介绍如何在Android应用中实现一个图片浏览器，用户可以通过手势滑动来切换图片。我们将使用GestureDetector类来处理手势滑动事件。

1. 效果预览

首先，我们来看一下我们即将创建的应用的效果：

android 图片浏览控件 android实现图片浏览器_android studio

用户可以通过左右滑动来切换不同的图片。

2. 创建新的Android项目

在Android Studio中，选择 “File” -> “New” -> “New Project…” ，然后选择一个适合的模板（例如 “Empty Activity”）开始创建。

3. 添加ImageView

在主布局文件中（通常为activity_main.xml），我们需要添加一个ImageView组件来显示图片。

<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=".MainActivity">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/picture0" />
</RelativeLayout>

4. 实现手势滑动

我们需要在主活动（通常为MainActivity.java）中初始化ImageView，并创建一个GestureDetector来处理手势滑动事件。当用户滑动时，我们将切换ImageView的图片。

package com.example.application;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

        import android.view.GestureDetector;
        import android.view.MotionEvent;
        import android.widget.ImageView;


public class MainActivity extends AppCompatActivity {
    // 定义保存ImageView的对象
    private ImageView imageView;
    //定义手势检测器对象
    private GestureDetector gestureDetector;
    //定义图片的资源数组
    private int[] ResId = new int[]{
            R.drawable.picture0, R.drawable.picture1, R.drawable.picture2,
            R.drawable.picture3, R.drawable.picture4, R.drawable.picture5,
            R.drawable.picture6, R.drawable.picture7, R.drawable.picture8,
            R.drawable.picture9, R.drawable.picture10, R.drawable.picture11,
            R.drawable.picture12
    };
    //定义当前显示的图片的下标
    private int count = 0;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        findView();
        setListener();
    }

    private void setListener() {
        //设置手势监听器的处理效果由onGestureListener来处理
        gestureDetector = new GestureDetector(MainActivity.this,
                onGestureListener);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //当前Activity被触摸时回调
        return gestureDetector.onTouchEvent(event);
    }

    private void findView() {
        //得到当前页面的imageview控件
        imageView = (ImageView) findViewById(R.id.imageView);
    }
   //定义了GestureDetector的手势识别监听器
    private GestureDetector.OnGestureListener onGestureListener
            = new GestureDetector.SimpleOnGestureListener() {
        //当识别的手势是滑动手势时回调onFling方法
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                               float velocityY) {
            //得到滑动手势的起始和结束点的x，y坐标，并进行计算
            float x = e2.getX() - e1.getX();
            float y = e2.getY() - e1.getY();

            //通过计算结果判断用户是向左滑动还是向右滑动
            if (x > 0) {
                count++;
                count %= 13;
            } else if (x < 0) {
                count--;
                count = (count + 13) % 13;
            }
            //切换ImageView的图片
            changeImg();
            return true;
        }
    };

    public void changeImg() {
        //设置当前位置的图片资源
        imageView.setImageResource(ResId[count]);
    }
}

在上述代码中，我们首先定义了一个ImageView对象以及一个手势检测器对象。然后，我们定义了一个数组来存储我们要显示的图片的资源ID。接下来，在onCreate()方法中，我们调用findView()和setListener()方法来初始化ImageView和设置手势监听器。

我们通过覆盖onFling()方法来实现滑动切换图片的功能。onFling()方法有两个参数，分别代表滑动事件的起始点和结束点。我们可以通过计算这两个点的x坐标差来判断用户是向左滑动还是向右滑动。然后，我们根据滑动的方向来改变当前显示的图片的下标，并调用changeImg()方法来切换图片。