Android使用viewpager实现画廊式效果

本文实例为大家分享了Android使用viewpager实现画廊式效果的具体代码,供大家参考,具体内容如下

先看一下效果

1.创建一个自定义类 ZoomOutPageTransformer

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
 //自由控制缩放比例
 private static final float MAX_SCALE = 1f;
 private static final float MIN_SCALE = 0.8f;//0.85f

 @Override
 public void transformPage(View page, float position) {

  if (position <= 1) {

   float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);

   page.setScaleX(scaleFactor);

   if (position > 0) {
    page.setTranslationX(-scaleFactor * 2);
   } else if (position < 0) {
    page.setTranslationX(scaleFactor * 2);
   }
   page.setScaleY(scaleFactor);
  } else {

   page.setScaleX(MIN_SCALE);
   page.setScaleY(MIN_SCALE);
  }
 }
}

2.创建适配器MyAdapter

public class MyAdapter extends PagerAdapter {

 private int[] mData;
 private Context mContext;

 public MyAdapter(Context ctx, int[] data) {
  this.mContext = ctx;
  this.mData = data;
 }

 @Override
 public int getCount() {
  return mData.length;// 返回数据的个数
 }

 @Override
 public Object instantiateItem(final ViewGroup container, final int position) {//子View显示
  View view = View.inflate(container.getContext(), R.layout.item, null);
  ImageView imageView = view.findViewById(R.id.iv_icon);
  imageView.setImageResource(mData[position]);

  imageView.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
    Toast.makeText(mContext, "当前条目:" + position, Toast.LENGTH_SHORT).show();
   }
  });

  container.addView(view);//添加到父控件
  return view;
 }

 @Override
 public boolean isViewFromObject(View view, Object object) {
  return view == object;// 过滤和缓存的作用
 }

 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  container.removeView((View) object);//从viewpager中移除掉
 }
}

3.item布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <ImageView
  android:id="@+id/iv_icon"
  android:layout_width="match_parent"
  android:scaleType="centerCrop"
  android:src="@mipmap/ic_launcher"
  android:layout_height="match_parent"/>
</LinearLayout>

4.activity_main布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/ll_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:clipChildren="false"
 android:orientation="vertical">

 <TextView
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:padding="5dp"
  android:text="viewpager实现画廊效果"
  android:textColor="@color/colorPrimary"/>

 <androidx.viewpager.widget.ViewPager
  android:id="@+id/viewPager"
  android:layout_width="200dp"
  android:layout_height="300dp"
  android:layout_gravity="center"
  android:layout_marginBottom="30dp"
  android:clipChildren="false"
  android:layout_marginTop="30dp"/>
</LinearLayout>

5.Main_Activity

public class MainActivity extends AppCompatActivity {
 private ViewPager mViewPager;
 private LinearLayout ll_layout;

 //向导界面的图片
 private int[] mPics = new int[]{R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher};

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

 private void initView() {
  mViewPager = (ViewPager) findViewById(R.id.viewPager);
  ll_layout = (LinearLayout) findViewById(R.id.ll_layout);

  //设置适配器
  mViewPager.setAdapter(new MyAdapter(this, mPics));
  mViewPager.setPageMargin(20);
  mViewPager.setOffscreenPageLimit(mPics.length);
  mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());//设置画廊模式

  //左右都有图
  mViewPager.setCurrentItem(1);

  //viewPager左右两边滑动无效的处理
  ll_layout.setOnTouchListener(new View.OnTouchListener() {
   @Override
   public boolean onTouch(View view, MotionEvent motionEvent) {
    return mViewPager.dispatchTouchEvent(motionEvent);
   }
  });
 }
}

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

(0)

相关推荐

  • Android viewpager 3D画廊的实现方法

    ViewPager有个方法叫做: setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 用于设置ViewPager切换时的动画效果. 这里我们只要自定义一个PageTransformer来实现我们需要的动画偏移效果就好了! public class ScrollOffsetTransformer implements PageTransformer { private static final f

  • Android实现漂亮的Gallery画廊

    本文实例为大家分享了Android实现Gallery画廊的具体代码,供大家参考,具体内容如下 仅是实现基本功能,页面粗糙请见谅 图片下标0开始 activity_main.xml页面: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:too

  • Android开发实现Gallery画廊效果的方法

    本文实例讲述了Android开发实现Gallery画廊效果的方法.分享给大家供大家参考,具体如下: 画廊 使用Gallery表示,按水平方向显示内容,并且可以用手指直接拖动图片移动,一般用来浏览图片,被选中的选项位于中间,可以响应事件显示信息. xml布局文件基本语法 <Gallery 属性列表 /> Gallery支持4中xml属性 属性名称 描述 android:animationDuration 设置布局变化时动画的转换所需的时间(毫秒级).仅在动画开始时计时.该值必须是整数,比如:10

  • Android画廊效果之ViewPager显示多个图片

    首先来看下ViewPager显示多个图片效果: 从上面的图片可以看到,当添加多张图片的时候,能够在下方形成一个画廊的效果,我们左右拉动图片来看我们添加进去的图片,效果是不是好了很多呢?下面来看看怎么实现吧! 上面的效果类似Android里面ViewPage的效果,但是跟ViewPager有所不同,ViewPager每次只能显示一张图片. 其实我们是利用到了View的clipChildren属性,我们在这里要把ViewPager以及它的父窗体都设置为false,如下: android:clipCh

  • Android利用ViewPager实现可滑动放大缩小画廊效果

    画廊在很多的App设计中都有,如下图所示: 该例子是我没事的时候写的一个小项目,具体源码地址请访问https://github.com/AlexSmille/YingMi. 该画廊类似封面的效果,滑到中间的图片会慢慢变大,离开的View会慢慢的缩小,同时可设置滑动监听和点击监听. 网上有很多例子都是通过Gallery实现的,而上例的实现是通过ViewPager实现,解决了性能优化的问题,今天特此把它抽出来,封装一下,以便以后的方便使用.最终实现的效果如下: 使用方式 布局中添加该自定义控件 <R

  • Android ViewPager画廊效果详解及实例

    Android ViewPager 画廊效果 从上面的图片可以看到,当添加多张图片的时候,能够在下方形成一个画廊的效果,我们左右拉动图片来看我们添加进去的图片,效果是不是好了很多呢?下面来看看怎么实现吧! 上面的效果类似Android里面ViewPage的效果,但是跟ViewPager有所不同,ViewPager每次只能显示一张图片. 其实我们是利用到了View的clipChildren属性,我们在这里要把ViewPager以及它的父窗体都设置为false,如下: android:clipChi

  • Android App开发中使用RecyclerView实现Gallery画廊的实例

    什么是RecyclerView         RecyclerView是Android 5.0 materials design中的组件之一,相应的还有CardView.Palette等.看名字我们就能看出一点端倪,没错,它主要的特点就是复用.我们知道,Listview中的Adapter中可以实现ViewHolder的复用.RecyclerView提供了一个耦合度更低的方式来复用ViewHolder,并且可以轻松的实现ListView.GridView以及瀑布流的效果. RecyclerVie

  • Android高级组件Gallery画廊视图使用方法详解

    画廊视图(Gallery)表示,能够按水平方向显示内容,并且可用手指直接拖动图片移动,一般用来浏览图片,被选中的选项位于中间,并且可以响应事件显示信息.在使用画廊视图时,首先需要在屏幕上添加Gallery组件,通常使用<Gallery>标记在XML布局文件中添加.其基本语法如下: <Gallery     属性列表   > </Gallery> Gallery组件支持的XML属性表如下: android:animationDuration  用于设置列表切换时的动画持续

  • Android开发中画廊视图Gallery的两种使用方法分析

    本文实例讲述了Android开发中画廊视图Gallery的两种使用方法.分享给大家供大家参考,具体如下: 第一种方法: 第一步:设计xml布局文件 代码如下:main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_w

  • Android使用viewpager实现画廊式效果

    本文实例为大家分享了Android使用viewpager实现画廊式效果的具体代码,供大家参考,具体内容如下 先看一下效果 1.创建一个自定义类 ZoomOutPageTransformer public class ZoomOutPageTransformer implements ViewPager.PageTransformer { //自由控制缩放比例 private static final float MAX_SCALE = 1f; private static final float

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

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

  • android自定义ViewPager水平滑动弹性效果

    android ViewPager是一个经常要用到的组件,但android系统本身为我们提供的ViewPager是没有任何效果的,只能是一页一页的滑动,这样会让人感觉很死板,在看一些知名大公司的App时,看到了他们的ViewPager在滑动到最开始或者最后的时候是有一个弹性效果的,使用起来感觉非常的好,于是乎就是百度搜了一下,在StackOverflow中看到一篇文章就是讲如何实现这个效果的. 先看下效果图:滑动到最后一页时仍然可以拉动-- 代码如下: package com.example.m

  • Android使用ViewPager实现翻页效果

    本文实例为大家分享了Android使用ViewPager实现翻页效果的具体代码,供大家参考,具体内容如下 效果如图所示: 代码实现: 1.布局代码:activity_view_pager.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xm

  • Android使用ViewPager实现屏幕滑动效果

    使用ViewPager实现屏幕滑动 从一个完整的屏幕移动到另一个屏幕的过程被称为屏幕滑动,在安装向导.幻灯片中应用广泛.下面介绍如何利用Android Support库的ViewPager来实现屏幕滑动. 创建View 创建一个在之后作为fragment的内容的布局文件,下面的例子中包含一个Textview,用来展示一些文字. <!-- fragment_screen_slide_page.xml --> <ScrollView xmlns:android="http://sc

  • android使用ViewPager实现轮播效果

    ViewPager:一个可以实现视图左右滑动切换的控件. ViewPager的基本使用: ViewPager的视图需要通过PagerAdapter来实现显示. PagerAdapter的主要方法: ● getCount 视图的数量 ● instantiateItem 添加视图 ● destroyItem 销毁视图 ● isViewFromObject 是否由对象创建视图 ViewPager的常用方法: setAdapter 设置适配器 addOnPageChangeListener 监听页面切换

  • Android 使用ViewPager自动滚动循环轮播效果

    对Android 利用ViewPager实现图片可以左右循环滑动效果,感兴趣的朋友可以直接点击查看内容详情. 主要介绍如何实现ViewPager自动播放,循环滚动的效果及使用.顺便解决ViewPager嵌套(ViewPager inside ViewPager)影响触摸滑动及ViewPager滑动速度设置问题. 先给大家展示下效果图,喜欢的朋友可以下载源码: 1.实现 没有通过ScheduledExecutorService或Timer定期执行某个任务实现,而是简单的通过handler发送消息去

  • 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滑到第一页或者最后一页的时候,如果再滑动的时候,就会有一个缓冲的过程,也就是回弹效果.之前在研究回弹效果的时候,也顺便实现了ViewPager的回弹效果,其实也很简单,一下是实现代码,注释比较少: package com.freesonfish.viewpager_2; import android.content.Context; import andro

随机推荐