Android实现单页显示3个Item的ViewPager炫酷切换效果

单页显示3个item的viewpager炫酷切换效果，适用于banner等。

效果图

rotate y

rotate down

rotate up

alpha

scalein

scalein + alpha + rotate down

使用

###（1）引入

compile `com.zhy:magic-viewpager:1.0.1`

###（2）示例

布局文件

<framelayout
  android:layout_width="match_parent"
  android:layout_height="160dp"
  android:clipchildren="false"
  android:layout_centerinparent="true"
  android:background="#aadc71ff"
  >
  <android.support.v4.view.viewpager
    android:id="@+id/id_viewpager"
    android:layout_width="match_parent"
    android:layout_marginleft="60dp"
    android:clipchildren="false"
    android:layout_marginright="60dp"
    android:layout_height="120dp"
    android:layout_gravity="center"
    >
  </android.support.v4.view.viewpager>

</framelayout>

注意外层android:layout_centerinparent="true".（貌似其实没什么影响）

编码

mviewpager.setpagemargin(20);//设置page间间距，自行根据需求设置
mviewpager.setoffscreenpagelimit(3);//>=3
mviewpager.setadapter...//写法不变

//setpagetransformer 决定动画效果
mviewpager.setpagetransformer(true, new rotatedownpagetransformer());

##目前可选动画

alphapagetransformer
rotatedownpagetransformer
rotateuppagetransformer
rotateytransformer
nonpagetransformer
scaleintransformer

动画间可以*组合，例如：

mviewpager.setpagetransformer(true,new rotatedownpagetransformer(new alphapagetransformer(new scaleintransformer()))); 

需求：

1.一个页面显示三个item

2.viewpager无限循环

3.定时滑动

4.长条形小点

<?xml version="1.0" encoding="utf-8"?>
<framelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="#aadc71ff"
  android:clipchildren="false"
  tools:context="com.example.administrator.banner2.mainactivity">


  <android.support.v4.view.viewpager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_gravity="center"
    android:layout_marginbottom="10dp"
    android:layout_marginleft="30dp"
    android:layout_marginright="30dp"
    android:layout_margintop="10dp"
    android:clipchildren="false"></android.support.v4.view.viewpager>

  <linearlayout
    android:id="@+id/dotlayout"
    android:layout_width="match_parent"
    android:layout_height="10dp"
    android:layout_gravity="bottom"
    android:layout_marginbottom="10dp"
    android:gravity="center"
    android:orientation="horizontal"></linearlayout>

</framelayout>

import android.os.bundle;
import android.os.handler;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.support.v7.app.appcompatactivity;
import android.view.view;
import android.view.viewgroup;
import android.widget.imageview;
import android.widget.linearlayout;
import android.widget.relativelayout;

import com.zhy.magicviewpager.transformer.scaleintransformer;

import java.util.timer;
import java.util.timertask;

public class mainactivity extends appcompatactivity {

  private viewpager mviewpager;
  private pageradapter madapter;
  private linearlayout dotlayout;
  private timer timer;
  private handler mhandler = new handler();

  private int preposition = 0;

  int[] imgres = {r.drawable.a, r.drawable.b, r.drawable.c, r.drawable.d,
      r.drawable.e, r.drawable.f, r.drawable.g, r.drawable.h, r.drawable.i};

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);

    mviewpager = (viewpager) findviewbyid(r.id.viewpager);
    dotlayout = (linearlayout) findviewbyid(r.id.dotlayout);

    initdots();

    mviewpager.setpagemargin(20);
    mviewpager.setoffscreenpagelimit(3);
    mviewpager.setadapter(madapter = new pageradapter() {
      @override
      public object instantiateitem(viewgroup container, int position) {
        imageview view = new imageview(mainactivity.this);
        view.setscaletype(imageview.scaletype.fit_xy);
        view.setimageresource(imgres[position % imgres.length]);
        container.addview(view);
        return view;
      }

      @override
      public void destroyitem(viewgroup container, int position, object object) {
        container.removeview((view) object);
      }

      @override
      public int getcount() {
        return integer.max_value;
      }

      @override
      public boolean isviewfromobject(view view, object o) {
        return view == o;
      }
    });
    mviewpager.addonpagechangelistener(new viewpager.onpagechangelistener() {
      @override
      public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {

      }

      @override
      public void onpageselected(int position) {
        dotlayout.getchildat(preposition).setenabled(false);
        dotlayout.getchildat(position % imgres.length).setenabled(true);
        preposition = position % imgres.length;
      }

      @override
      public void onpagescrollstatechanged(int state) {

      }
    });
    mviewpager.setpagetransformer(true, new scaleintransformer());
    if (null != timer) {
      timer.cancel();
    }
    timer = new timer();
    timer.schedule(new timertask() {
      @override
      public void run() {
        mhandler.post(new runnable() {
          @override
          public void run() {
            mviewpager.setcurrentitem(mviewpager.getcurrentitem() + 1);
          }
        });
      }
    }, 0, 1000);

  }

  private void initdots() {
    if (null != dotlayout) {
      dotlayout.removeallviews();
    }
    for (int i = 0; i < imgres.length; i++) {
      imageview dot = new imageview(this);
      dot.setenabled(false);
      dot.setimageresource(r.drawable.dot);
      linearlayout.layoutparams params = new linearlayout.layoutparams(relativelayout.layoutparams.wrap_content, relativelayout.layoutparams.wrap_content);
      params.leftmargin = 10;
      dot.setlayoutparams(params);
      dotlayout.addview(dot);
    }
    dotlayout.getchildat(0).setenabled(true);
  }
}

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_enabled="true">
    <shape android:shape="rectangle">
      <size android:width="15dp" android:height="3dp"></size>
      <corners android:radius="10dp" />
      <solid android:color="#ff0000" />
    </shape>
  </item>
  <item android:state_enabled="false">
    <shape android:shape="rectangle">
      <size android:width="15dp" android:height="3dp"></size>
      <corners android:radius="10dp" />
      <solid android:color="#ffffff" />
    </shape>
  </item>
</selector>

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