Git Product home page Git Product logo

viewpagertransformer's Introduction

Viewpager各种效果

效果图

自定义的ViewpagerTransformer说明

动画
基类 BasePageTransformer
渐变 AlphaPageTransformer
旋转 RotatePageTransformer
立方体 CubePageTransformer
可折叠的 AccordionPageTransformer
急速 FlipPageTransformer
前背景和后背景渐变,后背景有个放大缩小效果 DepthPageTransformer
前背景和后背景渐变 ZoomFadePageTransformer
前背景和后背景直接缩放 ZoomCenterPageTransformer
左右滑动缩放 ZoomPageTransformer
画廊展示效果 ZoomOutPagerTransformer

使用步骤

Step 1.添加依赖

项目的 build.gradle 添加

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

/app/build.gradle

	dependencies {
          compile 'com.github.leifu1107:ViewpagerTransformer:V1.0'
  }

Step 2.在布局文件中添加ViewPager

<android.support.v4.view.ViewPager
            android:id="@+id/banner_main_cube"
            android:layout_width="match_parent"
            android:layout_height="120dp"/>

Step 3.在Activity中直接调用setPageTransformer方法即可(一屏显示多个子页面\画廊效果不适合,还需要增加代码)

  //立方体效果
  banner_main_cube.setPageTransformer(false, new CubePageTransformer());//也可自定义动画范围大小new CubePageTransformer(90f)
  banner_main_cube.setAdapter(new ViewPagerAdpter(getData()));

Step 4.一屏显示多个子页面和画廊效果需要额外配置

布局文件(ViewPager和父布局都需要添加clipChildren="false")

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:clipChildren="false">

            <android.support.v4.view.ViewPager
                android:id="@+id/banner_main_ZoomOut"
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:layout_marginLeft="80dp"
                android:layout_marginRight="80dp"
                android:clipChildren="false"
                />
        </LinearLayout>

Activity中代码(setPageMargin设置负值边距才能调整合适)

 //画廊展示效果
        banner_main_ZoomOut.setPageMargin(-DensityUtil.dip2px(getApplicationContext(), 10));//设置viewpage两个页面间距,要使间距变小请设置负值或者在Adpter中重写getPageWidth
        banner_main_ZoomOut.setOffscreenPageLimit(3);//提前预加载3个,数量最好大于3个
        banner_main_ZoomOut.setPageTransformer(false, new ZoomOutPagerTransformer(0.7f));
        banner_main_ZoomOut.setAdapter(new ViewPagerAdpter(getData()));
一屏显示3个页面后,viewpager滚动活动中间的页面才能左右滑动,滑动左右两边的页面没有效果(可通过事件分发处理)
ll_Multiple为ViewPager的父布局,不要忘记父布局添加clickable="true"
//处理只能点击中间范围viewpage才能滑动,点击左右两边的viewpage也可以滑动,注意要设置LinearLayout的clickable="true"
        findViewById(R.id.ll_Multiple).setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                banner_main_Multiple.onTouchEvent(event);
                return false;
            }
        });

APK文件

扫描二维码 或者 点击二维码 下载

ViewpagerTransformer

viewpagertransformer's People

Contributors

leifu1107 avatar llfysn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

viewpagertransformer's Issues

可否加一下作者qq问你一下缩放如何计算问题

我自己实现了一个类似的效果,但是我的item 不是一张图片,是一块自定义布局,我的布局宽度设置的match_parent, 设置了作者写的中间放大 两边缩放的效果,初始化后 默认右侧 不缩放

希望作者说一下qq 交流一下如何修改

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.