viewpager滑动背景透明效果渐变(引导界面滑动)

 

参看https://github.com/bingoogolapple/BGABanner-Android，这个实现太复杂了，看的烦躁，自己写了一个
具体代码在：http://download.csdn.net/detail/xiaomu123456/9677927
步骤：

            1.使用viewpager实现图片的切换效果

            2.在OnPageChangeListener中监听滑动距离，实现背景的透明效果渐变

实际效果如下：

首先创建布局activity_splash_viewpager.xml:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/activity_main"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    >

    <ImageView

        android:id="@+id/img1"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="@drawable/pic_01"/>

    <ImageView

        android:id="@+id/img2"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="@drawable/bg2"/>

    <ImageView

        android:id="@+id/img3"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="@drawable/pic_04"/>

    <android.support.v4.view.ViewPager

        android:id="@+id/viewpager"

        android:layout_width="match_parent"

        android:layout_height="match_parent"/>

    <TextView

        android:id="@+id/btn"

        android:layout_width="match_parent"

        android:layout_height="50dp"

        android:layout_alignParentBottom="true"

        android:gravity="center"

        android:alpha="0.6"

        android:background="#33000000"

        android:text="footer view" />

</RelativeLayout>

根据图中效果可以知道，总共需要6张图片，3张作为背景(id:img1,img2,img3)，3张是背景上面的文字显示效果(此处在代码中添加到viewpager中)。

主要代码如下：

package com.lj.admin.myviewpagger;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.Log;

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 implements ViewPager.OnPageChangeListener,View.OnClickListener{

    private List<ImageView> imageViewList;

    private ViewPager mViewPager;

    private ImageView img1;

    private ImageView img2;

    private ImageView img3;

    private float mCurrentOffset;

    private float mLastOffset;

    private static final  float EPSINON = 0.00001f;

//    private static final int ZEROALPHA = 0;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_splash_viewpager);

        initView();

        prepareData();

        initEvent();

    }

    private void initView() {

        img1 = (ImageView) findViewById(R.id.img1);

        img2 = (ImageView) findViewById(R.id.img2);

        img3 = (ImageView) findViewById(R.id.img3);

        mViewPager = (ViewPager) findViewById(R.id.viewpager);

    }

    private void initEvent() {

        img1.setOnClickListener(this);

        img2.setOnClickListener(this);

        img3.setOnClickListener(this);

        /**

        * 刚进来，显示第一张图片

        * 直接用img.setAlpha没有效果，不知道为啥？

        */

        img2.getBackground().setAlpha(0);

        img3.getBackground().setAlpha(0);

        mViewPager.addOnPageChangeListener(this);

        ViewPagerAdapter adapter = new ViewPagerAdapter();

        mViewPager.setAdapter(adapter);

    }

    private void prepareData() {

        imageViewList = new ArrayList<ImageView>();

        int[] imageResIDs = getImageResIDs();

        ImageView iv;

        for (int i = 0; i < imageResIDs.length; i++) {

            iv = new ImageView(this);

            iv.setBackgroundResource(imageResIDs[i]);

            imageViewList.add(iv);

        }

    }

    /**

    * 在此处填充三张viewpager要展示的图片

    */

    private int[] getImageResIDs() {

        return new int[]{

                R.drawable.guide_foreground_1,

                R.drawable.guide_foreground_2,

                R.drawable.guide_foreground_3

        };

    }

    @Override

    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        mCurrentOffset = positionOffset;

        if( !isZeroFloat(positionOffset) ){

            float fraction = positionOffset;

            if( position == 0){

                img1.getBackground().setAlpha( (int) ( (1-fraction) * 255) );

                img2.getBackground().setAlpha((int) ( fraction * 255 ) );

                img3.getBackground().setAlpha(0);

            }

            if( position == 1){

                img2.getBackground().setAlpha( (int) ( (1-fraction) * 255) );

                img3.getBackground().setAlpha((int) ( fraction * 255 ) );

                img1.getBackground().setAlpha(0);

            }

//此处的代码直接用上面的两段替换，不用管

//            if( mCurrentOffset - mLastOffset > 0){

//                if( position == 0){

//                    img1.getBackground().setAlpha( (int) ( (1-fraction) * 255) );

//                    img2.getBackground().setAlpha((int) ( fraction * 255 ) );

//                    img3.getBackground().setAlpha(0);

//                }

//                if( position == 1){

//                    img2.getBackground().setAlpha( (int) ( (1-fraction) * 255) );

//                    img3.getBackground().setAlpha((int) ( fraction * 255 ) );

//                    img1.getBackground().setAlpha(0);

//                }

//            }else{

//                if( position == 0){

//                    img1.getBackground().setAlpha( (int) ( (1-fraction) * 255) );

//                    img2.getBackground().setAlpha((int) ( fraction * 255 ) );

//                    img3.getBackground().setAlpha(0);

//                }

//                if( position == 1){

//                    img2.getBackground().setAlpha( (int) ( (1-fraction) * 255) );

//                    img3.getBackground().setAlpha((int) ( fraction * 255 ) );

//                    img1.getBackground().setAlpha(0);

//                }

//            }

        }

        mLastOffset = mCurrentOffset;

        Log.d("liujie","position:" + position + "||"

                + "positionOffset:" + positionOffset + "||"

                + "positionOffsetPixels:" + positionOffsetPixels);

    }

    private boolean isZeroFloat(float f){

        if( f < EPSINON  &&  f >  -EPSINON){

            return true;

        }

        return false;

    }

    @Override

    public void onPageSelected(int position) {

        /**

        *此处获取当前的滑动位置并不准确，它会没有滑动停止时就改变，所以不能和

        */

//        mCurrentImgPos = position;

        Log.d("liujie1","pageselect************:  "+ position);

    }

    @Override

    public void onPageScrollStateChanged(int state) {

    }

    @Override

    public void onClick(View view) {

        //如果需要实现三张图片的点击事件，可以在里面实现，如：img.setClickable来控制三张图片的透传效果

    }

    class ViewPagerAdapter extends PagerAdapter{

        @Override

        public int getCount() {

            return imageViewList.size();

        }

        //判断出去的view是否等于进来的view 如果为true直接复用

        @Override

        public boolean isViewFromObject(View view, Object object) {

            return view == object;

        }

        /**

        * 销毁预加载以外的view对象, 会把需要销毁的对象的索引位置传进来就是position

        */

        @Override

        public void destroyItem(ViewGroup container, int position, Object object) {

            container.removeView(imageViewList.get(position));

        }

        /**

        * 创建一个view

        */

        @Override

        public Object instantiateItem(ViewGroup container, int position) {

            container.addView(imageViewList.get(position));

            return imageViewList.get(position);

        }

    }

    @Override

    protected void onDestroy() {

        super.onDestroy();

    }

}