Android--ViewPager制作APP引导页

ViewPager使用FragmentStatePagerAdapter做Adapter，引导页使用多Fragment形式。

FragmentStatePagerAdapter代码如下：

public class GuideFragmentPagerAdapter extends FragmentStatePagerAdapter {
    private List<GuideBaseFragment> list;
    public GuideFragmentPagerAdapter(FragmentManager fm, List<GuideBaseFragment> list) {
        super(fm);
        this.list = list;
    }

    public GuideFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

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

ViewPager代码如下：

public class GuideViewPager extends ViewPager {
    private Bitmap bg;
    private Paint b = new Paint(1);

    public GuideViewPager(Context context) {
        super(context);
    }

    public GuideViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        if (this.bg != null) {
            int width = this.bg.getWidth();
            int height = this.bg.getHeight();
            int count = getAdapter().getCount();
            int x = getScrollX();
            // 子View中背景图片需要显示的宽度，放大背景图或缩小背景图。
            int n = height * getWidth() / getHeight();

            /**
             * (width - n) / (count - 1)表示除去显示第一个ViewPager页面用去的背景宽度，剩余的ViewPager需要显示的背景图片的宽度。
             * getWidth()等于ViewPager一个页面的宽度，即手机屏幕宽度。在该计算中可以理解为滑动一个ViewPager页面需要滑动的像素值。
             * ((width - n) / (count - 1)) /getWidth()也就表示ViewPager滑动一个像素时，背景图片滑动的宽度。
             * x * ((width - n) / (count - 1)) /  getWidth()也就表示ViewPager滑动x个像素时，背景图片滑动的宽度。
             * 背景图片滑动的宽度的宽度可以理解为背景图片滑动到达的位置。
             */
            int w = x * ((width - n) / (count - 1)) / getWidth();
            canvas.drawBitmap(this.bg, new Rect(w, 0, n + w, height), new Rect( x, 0, x + getWidth(), getHeight()), this.b);
        }
        super.dispatchDraw(canvas);
    }

    public void setBackGroud(Bitmap paramBitmap) {
        this.bg = paramBitmap;
        this.b.setFilterBitmap(true);
    }
}

Fragment代码如下：

public abstract class GuideBaseFragment extends Fragment {
    public abstract void  startAnimation();
    public abstract void  stopAnimation();
}

public class WelcomeGuideFragment extends GuideBaseFragment implements View.OnClickListener {
    private static final float ZOOM_MAX = 1.3f;
    private static final  float ZOOM_MIN = 1.0f;

    private ImageView imgView_immediate_experience;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        View rooView=inflater.inflate(R.layout.fragment_guide_welcome, null);
        imgView_immediate_experience=(ImageView) rooView.findViewById(R.id.imgView_immediate_experience);
        imgView_immediate_experience.setOnClickListener(this);
        return rooView;
    }

    public void playHeartbeatAnimation(){
        /**
         * 放大动画
         */
        AnimationSet animationSet = new AnimationSet(true);
        animationSet.addAnimation(new ScaleAnimation(ZOOM_MIN, ZOOM_MAX, ZOOM_MIN, ZOOM_MAX, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f));
        animationSet.addAnimation(new AlphaAnimation(1.0f, 0.8f));

        animationSet.setDuration(500);
        animationSet.setInterpolator(new AccelerateInterpolator());
        animationSet.setFillAfter(true);

        animationSet.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                /**
                 * 缩小动画
                 */
                AnimationSet animationSet = new AnimationSet(true);
                animationSet.addAnimation(new ScaleAnimation(ZOOM_MAX, ZOOM_MIN, ZOOM_MAX,ZOOM_MIN, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f));
                animationSet.addAnimation(new AlphaAnimation(0.8f, 1.0f));
                animationSet.setDuration(600);
                animationSet.setInterpolator(new DecelerateInterpolator());
                animationSet.setFillAfter(false);
                // 实现心跳的View
                imgView_immediate_experience.startAnimation(animationSet);
            }
        });
        // 实现心跳的View
        imgView_immediate_experience.startAnimation(animationSet);
    }

    @Override
    public void onClick(View v) {
        Intent intent = new Intent();
        intent.setClass(getActivity(),MainActivity.class);
        startActivity(intent);
        getActivity().finish();
    }

    @Override
    public void startAnimation() {
        playHeartbeatAnimation();
    }

    @Override
    public void stopAnimation() {

    }
}

FragmentActivity代码如下：

public class GuideActivity extends FragmentActivity {

    private GuideViewPager guideViewPager;
    private List<GuideBaseFragment> guideBaseFragmentArrayList = new ArrayList<GuideBaseFragment>();
    private GuideFragmentPagerAdapter guideFragmentPagerAdapter;

    private ImageView[] tips;//点点点指示
    private int currentSelect;//记录当前选择页序列

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

        //初始化点点点控件
        ViewGroup group = (ViewGroup)findViewById(R.id.viewGroup);
        tips = new ImageView[3];
        for (int i = 0; i < tips.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setLayoutParams(new ViewGroup.LayoutParams(10, 10));
            if (i == 0) {
                imageView.setBackgroundResource(R.drawable.page_indicator_focused);
            } else {
                imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);
            }
            tips[i]=imageView;

            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                    new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
            layoutParams.leftMargin = 20;//设置点点点view的左边距
            layoutParams.rightMargin = 20;//设置点点点view的右边距
            group.addView(imageView,layoutParams);
        }

        //获取自定义viewpager 然后设置背景图片
        guideViewPager = (GuideViewPager) findViewById(R.id.viewpager_launcher);
        guideViewPager.setBackGroud(BitmapFactory.decodeResource(getResources(), R.drawable.bg_kaka_launcher));

        /**
         * 初始化三个fragment  并且添加到list中
         */
        WelcomeGuideFragment rewardFragment = new WelcomeGuideFragment();
        WelcomeGuideFragment privateFragment = new WelcomeGuideFragment();
        WelcomeGuideFragment wFragement = new WelcomeGuideFragment();
        guideBaseFragmentArrayList.add(wFragement);
        guideBaseFragmentArrayList.add(rewardFragment);
        guideBaseFragmentArrayList.add(privateFragment);

        guideFragmentPagerAdapter = new GuideFragmentPagerAdapter(getSupportFragmentManager(), guideBaseFragmentArrayList);
        guideViewPager.setAdapter(guideFragmentPagerAdapter);
        guideViewPager.setOffscreenPageLimit(2);//viewPager缓存页面数量
        guideViewPager.setCurrentItem(0);//滑屏速度
        guideViewPager.setOnPageChangeListener(changeListener);
    }

    /**
     * 监听viewpager的移动
     */
    ViewPager.OnPageChangeListener changeListener=new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageSelected(int index) {
            setImageBackground(index);//改变点点点的切换效果
            GuideBaseFragment fragment= guideBaseFragmentArrayList.get(index);

            guideBaseFragmentArrayList.get(currentSelect).stopAnimation();//停止前一个页面的动画
            fragment.startAnimation();//开启当前页面的动画

            currentSelect=index;
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {}
        @Override
        public void onPageScrollStateChanged(int arg0) {}
    };

    /**
     * 改变点点点的切换效果
     * @param selectItems
     */
    private void setImageBackground(int selectItems) {
        for (int i = 0; i < tips.length; i++) {
            if (i == selectItems) {
                tips[i].setBackgroundResource(R.drawable.page_indicator_focused);
            } else {
                tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);
            }
        }
    }
}