左右滑动切换图片

运行效果图




修改布局文件activity_main.xml:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="滑动浏览图片" />
    <TextView
        android:id="@+id/TvId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" />

    <ImageView
        android:id="@+id/Iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

修改MainActivity.java:



import android.os.Bundle;
import android.app.Activity;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.Menu;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {
	private ImageView Iv;
	private TextView TvId;
	private GestureDetector gestureDetector;//定义手势检测器对象
	//定义图片资源
	private int[] ResId=new int[]{
			R.drawable.bg_1,R.drawable.bg_2,R.drawable.bg_3,R.drawable.bg_4};
	private int count=0;//设置当前图片资源id
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		Iv=(ImageView) findViewById(R.id.Iv);//获取对象id
		TvId=(TextView) findViewById(R.id.TvId);
		
		setListener();//设置视图监听器事件
		//切换ImageView的图片
		changeImg();
		setImgId();
	}

	private void setListener() {
		//设置手势监听器的处理效果
		gestureDetector=new GestureDetector(MainActivity.this, onGestureListener);
	}
	//手势识别监听器
	private GestureDetector.OnGestureListener onGestureListener
			=new GestureDetector.SimpleOnGestureListener(){
		//当识别的手势是滑动手势时回调onFling方法
		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=(count+4)%4;
			}else if(x<0){//向左滑动
				count++;
				count %=4;
			}
			changeImg();
			setImgId();
			return true;
		}
	};
	//切换图片Id
	public void changeImg(){
		//设置当前位置的图片资源
		Iv.setImageResource(ResId[count]);
	}
	//显示照片页数
	public void setImgId(){
			TvId.setText((count+1)+"/"+ResId.length);//显示图片个数
	}
	public boolean onTouchEvent(MotionEvent event){
		return gestureDetector.onTouchEvent(event);//当前Activity被触摸时回调
	}
}



  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
实现左右滑动切换图片可以使用一些现成的插件或者自己编写JavaScript代码实现。以下是一个使用JavaScript实现左右滑动切换图片的示例代码: HTML代码: ```html <div class="slider"> <div class="slider-wrapper"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <a href="#" class="slider-prev">Prev</a> <a href="#" class="slider-next">Next</a> </div> ``` CSS样式: ```css .slider { position: relative; overflow: hidden; } .slider-wrapper { display: flex; transition: transform 0.5s ease; } .slider-wrapper img { width: 100%; height: auto; } .slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; color: white; background-color: black; padding: 8px 16px; text-decoration: none; z-index: 1; } .slider-prev { left: 0; } .slider-next { right: 0; } ``` JavaScript代码: ```js const slider = document.querySelector('.slider'); const wrapper = document.querySelector('.slider-wrapper'); const prevButton = document.querySelector('.slider-prev'); const nextButton = document.querySelector('.slider-next'); let position = 0; prevButton.addEventListener('click', () => { position += slider.clientWidth; if (position > 0) { position = -wrapper.clientWidth + slider.clientWidth; } wrapper.style.transform = `translateX(${position}px)`; }); nextButton.addEventListener('click', () => { position -= slider.clientWidth; if (position < -wrapper.clientWidth + slider.clientWidth) { position = 0; } wrapper.style.transform = `translateX(${position}px)`; }); ``` 该代码实现了一个左右滑动切换图片的功能,点击“Prev”按钮可以向左切换图片,点击“Next”按钮可以向右切换图片。需要注意的是,该代码使用了flex布局和transform属性实现图片的水平布局和平移动画。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

饕餮幻想家

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值