Android使用ViewPager实现图片滑动预览效果

本文为大家分享了Android ViewPager实现图片滑动预览效果展示的具体代码，供大家参考，具体内容如下

效果图：

滑动前：

滑动后：

代码非常简单，实现起来很容易

xml代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
  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="com.example.blog_0615.MainActivity"> 

  <android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/vp_main_viewpager"
    ></android.support.v4.view.ViewPager> 

</android.support.constraint.ConstraintLayout>

Activity代码：

package com.example.blog_0615; 

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView; 

import java.util.ArrayList;
import java.util.List; 

public class MainActivity extends AppCompatActivity { 

  //定义图片数组
  private int images[]={R.drawable.bird,R.drawable.cat,R.drawable.chicken};
  //定义一个View的数组
  private List<View> views=new ArrayList<>();
  private ViewPager vp_main_viewpager; 

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main); 

    vp_main_viewpager = (ViewPager) findViewById(R.id.vp_main_viewpager); 

    //将images数组中的图片放入ImageView
    for (int i = 0; i < images.length; i++) {
      ImageView imageView=new ImageView(this);
      imageView.setImageResource(images[i]);
      views.add(imageView);
    } 

    //为ViewPager设置适配器
    vp_main_viewpager.setAdapter(new MyAdapter());
  } 

  class MyAdapter extends PagerAdapter { 

    @Override
    public int getCount() {
      return views.size();
    } 

    @Override
    public boolean isViewFromObject(View view, Object object) {
      return view==object;
    } 

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
      View v=views.get(position);
      container.addView(v); 

      return v;
    } 

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      View v=views.get(position);
      //前一张图片划过后删除该View
      container.removeView(v);
    } 

  }
}

以上代码就可以实现Android ViewPager图片滑动预览效果啦。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Android自定义滑动解锁控件使用详解

    Android自定义滑动解锁控件使用详解

    最近的项目里用到了,在网上找不到合适的,于是自己写了个简单的,带回弹效果: 可以自定义的属性有: <!-- 滑动解锁控件 xml配置属性 --> <declare-styleable name="SlideToUnlockView"> <attr name="slideImageViewWidth" format="dimension"/><!-- 滑块宽度 --> <attr name=&q

  • Android实现简单底部导航栏 Android仿微信滑动切换效果

    Android实现简单底部导航栏 Android仿微信滑动切换效果

    Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏的设置方法类似于TabLayout的关联,View需要创建关联方法,用来关联VIewPager; 3. 通过关联方法获取ViewPager实例后,根据ViewPager页面数创建底部导航栏的图标按钮; 代码实现: 1. 新建第一个自定义View, 图标 + 文字 的底部按钮; /** * 自定义控件

  • Android ViewPager实现左右滑动的实例

    Android ViewPager实现左右滑动的实例 多个标题以及标题下的每个View视图 <com.shizhefei.view.indicator.ScrollIndicatorView android:id="@+id/moretab_indicator" android:layout_width="match_parent" android:layout_height="45dp" /> <View android:la

  • Android view随触碰滑动效果

    Android view随触碰滑动效果

    主要思路是通过父布局的onTouch(),方法,获取滑动到的位置和点击下的位置,再去设置子view的位置.我的代码中考虑了在边缘情况.需要注意的是,使用RelativeLayout,以imageView为例.从测试结果来看,bottomMargin 和rightMargin 性能非常差,最好还是用leftMargin与topMargin定位. 下面是运行效果: 布局文件里面就是一个Relativelayout中有一个ImageView.如下 <?xml version="1.0"

  • Android 修改viewpage滑动速度的实现代码

    1.自定义Scroller public class ViewPageFixedSpeedScroller extends Scroller { private int mDuration = 300; public ViewPageFixedSpeedScroller(Context context) { super(context); // TODO Auto-generated constructor stub } public ViewPageFixedSpeedScroller(Con

  • Android模仿美团顶部的滑动菜单实例代码

    Android模仿美团顶部的滑动菜单实例代码

    前言 本文主要给大家介绍了关于Android模仿美团顶部滑动菜单的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先来看下效果图: 实现方法 这是通过 ViewPager 和 GridView 相结合做出来的效果,每一个 ViewPager 页面都是一个 GridView,底部的每个滑动指示圆点都是从布局文件中 inflate 出来的 首先需要一个代表每个活动主题的 JavaBean /** * Created by CZY on 2017/6/23. */ publ

  • Android 滑动监听的实例详解

    Android 滑动监听的实例详解

    Android 滑动监听的实例详解 摘要: ScollBy,ScollTo是对内容的移动,view.ScollyBy是对view的内容的移动 view,ScollTo是对内容的移动(移动到指定位置),view.ScollyBy是对view的内容的移动(移动距离) 在次activity中,当手指点击TextView ,此时是ViewGroup 响应还是TextView响应呢? 代码实践: 在activity中重写onTouchEvent(): public boolean onTouchEvent

  • Android使用ViewPager实现图片滑动预览效果

    Android使用ViewPager实现图片滑动预览效果

    本文为大家分享了Android ViewPager实现图片滑动预览效果展示的具体代码,供大家参考,具体内容如下 效果图: 滑动前: 滑动后: 代码非常简单,实现起来很容易 xml代码: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/ap

  • JS交互点击WKWebView中的图片实现预览效果

    Swift 4.0 WKWebView 1.注入js代码 (重点) func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { let jsGetImages = "function getImages(){" + "var objs = document.getElementsByTagName(\"img\");" + "var imgScr =

  • JavaScript实现图片放大预览效果

    JavaScript实现图片放大预览效果

    代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style

  • Android自定义ViewPager实现纵向滑动翻页效果

    Android自定义ViewPager实现纵向滑动翻页效果

    抖音几乎已经成为了我们日常生活中使用比较频繁的App,无聊之时或工作之后可以刷一刷短视频来供我们娱乐与放松.看到抖音的视屏切换效果,觉得用ViewPager可以做出一样的效果.想一想之前用的ViewPager都是横向切换的,虽然很经常用,但是从来没实现过竖向的切换效果,说做就做吧. 我们先看一波效果图: 那么,要想实现这样的效果,当然是自定义ViewPager啦.问了一下度娘,看到有这样一种思路: 首先,把Touch事件的x,y坐标做一下交换,从原先的x坐标差值转变成y坐标的差值,正符合了我们手

  • Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载

    Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载

    首先给大家展示靓照,对效果图感兴趣的朋友可以继续往下阅读哦. ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,上面是效果图,用美女图片是我一贯的作风,呵呵  1.    首先看一些layout下的xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=&qu

  • Android 使用ViewPager实现图片左右循环滑动自动播放

    Android 使用ViewPager实现图片左右循环滑动自动播放

    ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,先上效果图,用美女图片是我一贯的作风,呵呵 1. 首先看一些layout下的xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_

  • Android仿头条、微信大图预览视图的方法详解

    Android仿头条、微信大图预览视图的方法详解

    图片大图预览 在我现在的项目当中,也存在大图预览的功能,但其实现过于繁重,采用一个Activity实现,并且在图片展示的过程中会产生卡顿感,整体感觉很是不好,正巧项目也在重构过程中,所以决定将这一功能写成一个成型的控件. 话不多说,先上图看下效果. 整体实现思路 图片展示:PhotoView(大图支持双击放大) 图片加载:Glide(加载网络图片.本地图片.资源文件) 小图变大图时的实现:动画 图片的下载:插入系统相册 该控件采用自定义View的方式,通过一些基本的控件的组合,来形成一个具有大图

  • Android使用ViewPager实现无限滑动效果

    Android使用ViewPager实现无限滑动效果

    前言 其实仔细想一下原理还是挺简单的.无非是当我们滑动到最后一页,再向后滑动时定位到第一页;当我们滑动到第一页,再向前滑动时定位到最后一页. 但是,相信很多朋友都遇到过这个问题:视图的过度效果不自然. 小编也是通过百度和谷歌查找了很多解决方案,实验了很多方法,总结了一个相对不错的方法,接下来给各位分享下滑动效果.实现细节以及一些踩过的坑. 1.无限滑动效果(左右无限滑动) 事先准备好2张滑动图片(有想试验的小伙伴,自备图片啊,小编就不提供了...) 运行效果图(左右无限循环): 为了显示更加直观

  • 微信小程序实现图片放大预览功能

    微信小程序实现图片放大预览功能

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码: <!--图片描述--> <view wx:if="{{item.pictures}}" class="list-dImg"> <image bindtap="imgYu" data-list="{{item

  • 微信小程序实现点击图片放大预览

    这个强大的API( wx.previewImage() ),接下来我们来讲一下微信小程序中图片点击放大预览的实现步骤! 思路: 1.点击事件 2.放大 3.左右滑动查看上.下一张 在绑定点击事件的时候我们需要同时获取到点击图片的url和这一组数据的ID(通过这个id从数据里面找到你点击的这一组数据然后从中取出这一组图片就可以了) index.wxml <view class='topic_answerImg'> <block wx:for='{{item.answerImg}}' wx:

随机推荐