Android中通过ImageSwitcher实现相册滑动查看照片功能(附代码下载)
场景
效果
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
将需要滚动查看的照片复制到res/drawable下
这里只准备了两张bg01.jpg和bg02.jpg
在滚动时需要用到左进右出和左出右进的动画,所以在res下新建anim目录,在目录下新建四种动画的xml文件
具体代码参照示例代码。
然后打开布局文件activity_image_switcher.xml
将布局修改为相对布局RelativeLayout,并添加一个ImageSwitcher,设置其ID属性。
<?xml version="1.0" encoding="utf-8"?>
<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=".ImageSwitcherActivity"> <ImageSwitcher
android:id="@+id/imageSwitcher"
android:layout_width="match_parent"
android:layout_height="match_parent"/> </RelativeLayout>
然后来到ImageSwitcherActivity
首先声明一些私有变量,用来存储照片资源数组、数组索引、鼠标放下和离开的X坐标等。
//图片资源数组
private int[] arrayPicture = new int[]{
R.drawable.bg01,R.drawable.bg02
};
private ImageSwitcher imageSwitcher;
private int index;
private float touchDowmX;
private float touchUpX;
然后通过id获取ImageSwitcher并设置其视图工厂
//获取imageSwitch
imageSwitcher =(ImageSwitcher) findViewById(R.id.imageSwitcher);
//设置视图工厂
imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
@Override
public View makeView() {
ImageView imageView = new ImageView(ImageSwitcherActivity.this);
imageView.setImageResource(arrayPicture[index]);
return imageView;
}
});
然后设置ImageSwitcher的触碰的监听器
通过
event.getAction() == MotionEvent.ACTION_DOWN
判断如果是鼠标按下,则记录鼠标按下时的坐标。
否则通过
event.getAction() ==MotionEvent.ACTION_UP
判断如果是鼠标抬起,则记录抬起时的X坐标。
此时再通过
touchUpX-touchDowmX >
即抬起时的X坐标减去落下时的X坐标大于100则认为是从左往右滑动。
此时图片的索引通过三目表达式进行判断。
index = index==?arrayPicture.length-:index-;
如果当前索引为0,即为第一张照片时,则从左往右滑动后,应该是最后一张照片,即照片索引为图片数组的长度减一。
然后通过
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_left));
设置左边滑进的动画
再通过
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_right));
设置右边滑出的动画
最后通过
imageSwitcher.setImageResource(arrayPicture[index]);
设置图片索引。
同理如果通过
touchDowmX - touchUpX >
则认为是从右往左滑。
同样通过三目表达式
index = index==arrayPicture.length -?:index+;
如果是最后一张照片,即索引为数组的长度 -1 ,则再往左滑 该是第一张照片,即索引为0 否则就索引+1。
然后通过
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_right));
设置右边滑进的动画
再通过
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_left));
设置左边滑出的动画
最后通过
imageSwitcher.setImageResource(arrayPicture[index]);
设置图片
完整示例代码
package com.badao.relativelayouttest; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher; public class ImageSwitcherActivity extends AppCompatActivity { //图片资源数组
private int[] arrayPicture = new int[]{
R.drawable.bg01,R.drawable.bg02
};
private ImageSwitcher imageSwitcher;
private int index;
private float touchDowmX;
private float touchUpX; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_switcher);
//获取imageSwitch
imageSwitcher =(ImageSwitcher) findViewById(R.id.imageSwitcher);
//设置视图工厂
imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
@Override
public View makeView() {
ImageView imageView = new ImageView(ImageSwitcherActivity.this);
imageView.setImageResource(arrayPicture[index]);
return imageView;
}
}); //设置imageSwitcher 触碰监听器
imageSwitcher.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
//如果是鼠标按下
if(event.getAction() == MotionEvent.ACTION_DOWN)
{
//记录按下时的X坐标
touchDowmX = event.getX();
return true;
}else if(event.getAction() ==MotionEvent.ACTION_UP) //如果是鼠标抬起
{
//记录抬起时的X坐标
touchUpX = event.getX();
//如果是从左向右滑动
if(touchUpX-touchDowmX >)
{
//如果是第一张图片则从左向右滑后下标是数组的长度-1,即最后一张,如果不是则索引-1
index = index==?arrayPicture.length-:index-;
//设置左边滑进的动画
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_left));
//设置右边滑出的动画
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_right));
//设置图片索引
imageSwitcher.setImageResource(arrayPicture[index]);
}
//否则认为是从右往左滑
else if(touchDowmX - touchUpX >)
{
//如果是最后一张照片,即索引为数组的长度 -1 ,则再往左滑 该是第一张照片,即索引为0 否则就索引+1
index = index==arrayPicture.length -?:index+;
//设置右边滑进的动画
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_right));
//设置左边滑出的动画
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_left));
//设置图片索引
imageSwitcher.setImageResource(arrayPicture[index]);
}
}
return false;
}
}); }
}
示例代码下载
关注公众号:
霸道的程序猿
回复:
Android相册滑动代码
Android中通过ImageSwitcher实现相册滑动查看照片功能(附代码下载)的更多相关文章
- Android中四种补间动画的使用示例(附代码下载)
场景 Android中四种补间动画. 透明度渐变动画 旋转动画 缩放动画 平移动画 注: 博客: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程 ...
- Android 中 DrawerLayout + ViewPager 怎么解决滑动冲突?
DrawerLayout 是 Android 官方的侧滑菜单控件,而 ViewPager 相信大家都很熟悉了.今天这里就讲一下当在 DrawerLayout 中嵌套 ViewPager 时,要如何解决 ...
- JPA中实现双向多对多的关联关系(附代码下载)
场景 JPA入门简介与搭建HelloWorld(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103473937 ...
- 浅谈Android中拍照、从相册选择图片并截图相关知识点
前言 我们在Android开发中经常会需要使用相机或者从相册中选取图片的情况,今天就把这里面相关的知识点总结下,方便以后开发的时候使用. 1.相机拍照并可自定义截图功能 我们先来看如何使用Intent ...
- Android中通过访问本地相册或者相机设置用户头像
目前几乎所有的APP在用户注册时都会有设置头像的需求,大致分为三种情况: (1)通过获取本地相册的图片,经过裁剪后作为头像. (2)通过启动手机相机,现拍图片然后裁剪作为头像. (3)在APP中添加一 ...
- Android中使用GridView和ImageViewSwitcher实现电子相册简单功能
我们在手机上查看相册时,首先看到的是网格状的图片展示界面,然后我们选择想要欣赏的照片点击进入,这样就可以全屏观看该照片,并且可以通过左右滑动来切换照片.如下图的显示效果: 首先我们先罗列一下本次实现所 ...
- Android中获取网页表单中的数据实现思路及代码
在Android中获取网页里表单中的数据具体实现代码如下,感兴趣的各位可以参考过下哈,希望对大家有所帮助 MainActivity如下: 复制代码 代码如下: package cn.testjavas ...
- Android中实现一个简单的逐帧动画(附代码下载)
场景 Android中的逐帧动画,就是由连续的一张张照片组成的动画. 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 ...
- Android 一s个相对完整的自动升级功能实现代码
由于项目的需要最近做了一个关于Android自动升级的功能,下面将贴出Android手机客户端的完整代码.这段代码参考别的代码居多,由于不满足需求,所以自己仅仅改了一些需要变动的内容,其他功能都是按照 ...
随机推荐
- Windows10 java环境配置
1.下载 JDK 下载地址:https ://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 点击下载按钮 ...
- 学习 lind api 十月 第5弹
继续 四弹里的 自定义的api response message 但是 那上面的 那些值得也是包含
- jade 的 考古
Jade是一款高性能简洁易懂的模板引擎(加上这两个字我想起了发动机,为什么不直接叫发动机呢), Jade是Haml的Javascript实现, 在服务端(NodeJS)及客户端均有支持. haml 是 ...
- 个人第4次作业——alpha项目测试
这个作业属于哪个课程 http://edu.cnblogs.com/campus/xnsy/GeographicInformationScience 这个作业的要求在哪里 https://www.cn ...
- 1.Vue初始及相关Vue核心组件
1.Vue官方文档 官网文档:https://cn.vuejs.org/v2/guide/ 2.Vue-cli官方文档(脚手架) 官网文档:https://cli.vuejs.org/zh/guide ...
- 富文本编辑器、全文检索和django发送邮件
1.富文本编辑器 1.1快速了解 借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的.所见即所得的页面.此处以tinymce为例,其它富文本编辑器的使用也是类似的. 在虚拟环境中 ...
- CTF--HTTP服务--暴力破解
开门见山 1. 扫描靶机ip,发现PCS 192.168.1.103 2. 用nmap扫描靶机开放服务和服务版本 3. 再扫描全部信息 4. 用nikto探测敏感文件 5. 打开敏感网页发掘信息 6. ...
- ElasticSearch系列专栏
最近我们公司因业务发展较快,不少服务遇到了一些瓶颈,影响最大的就是数据量的暴增带来的搜索效率的问题.虽然建立索引以及利用好缓存可以有效地缓解该问题,但是随着业务的发展,业务的复杂度也逐渐提升,原有的技 ...
- 使用H5与webGL的3D 可视化地铁展示
前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...
- 图像GIST特征和LMGIST包的python实现(有github)
1什么是Gist特征 (1) 一种宏观意义的场景特征描述 (2) 只识别"大街上有一些行人"这个场景,无需知道图像中在那些位置有多少人,或者有其他什么对 ...