Android特效专辑(二)——ViewPager渲染背景颜色渐变(引导页)

Android特效专辑(二)——ViewPager渲染背景颜色渐变(引导页)

首页：http://blog.csdn.net/qq_26787115/article/details/50439020

首页里面也提到过，自己有意做一款杂七杂八的APP，就是自己喜欢什么就加上面，现在本文说的是引导页，我找了很久才觉得可以的开源项目，自己做了一下修改

开源地址：https://github.com/TaurusXi/GuideBackgroundColorAnimation

先来看看效果图吧！

图片用的是官方的，嘿嘿

这个做起来，其实也就是加了一个监听变色的效果，我们来写一下把；

layout_main.xml

<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="match_parent" >

    <com.lgl.viewpager.ColorAnimationView
        android:id="@+id/ColorAnimationView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="30dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/btn_go"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="43dp"
            android:background="@drawable/colorbu"
            android:text="开始"
            android:visibility="gone" />
    </RelativeLayout>

</FrameLayout>

MainActivity

package com.lgl.viewpager;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends FragmentActivity {
    private static final int[] resource = new int[] { R.drawable.welcome1,
            R.drawable.welcome4, R.drawable.welcome3, R.drawable.welcome4 };
    private static final String TAG = MainActivity.class.getSimpleName();
    private Button btn_go;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn_go = (Button) findViewById(R.id.btn_go);
        MyFragmentStatePager adpter = new MyFragmentStatePager(
                getSupportFragmentManager());
        ColorAnimationView colorAnimationView = (ColorAnimationView) findViewById(R.id.ColorAnimationView);
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        //设置adapter
        viewPager.setAdapter(adpter);
        //监听滑动
        colorAnimationView.setmViewPager(viewPager, resource.length);
        colorAnimationView
                .setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                    @Override
                    public void onPageScrolled(int position,
                            float positionOffset, int positionOffsetPixels) {
                        Log.e("TAG", "onPageScrolled");
                    }

                    @Override
                    public void onPageSelected(int position) {
                        //Button显示或隐藏
                        if (position == 3) {
                            btn_go.setVisibility(View.VISIBLE);
                        } else {
                            btn_go.setVisibility(View.GONE);
                        }
                        Log.e("TAG", "onPageSelected");
                    }

                    @Override
                    public void onPageScrollStateChanged(int state) {
                        Log.e("TAG", "onPageScrollStateChanged");
                    }
                });
    }

    public class MyFragmentStatePager extends FragmentStatePagerAdapter {

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

        @Override
        public Fragment getItem(int position) {
            return new MyFragment(position);
        }

        @Override
        public int getCount() {
            return resource.length;
        }
    }

    @SuppressLint("ValidFragment")
    public class MyFragment extends Fragment {
        private int position;

        public MyFragment(int position) {
            this.position = position;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            ImageView imageView = new ImageView(getActivity());
            imageView.setImageResource(resource[position]);
            return imageView;
        }
    }
}

ColorAnimationView

package com.lgl.viewpager;

import android.animation.Animator;
import android.animation.ArgbEvaluator;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;

public class ColorAnimationView extends View implements
        ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener {
    private static final int RED = 0xffFF8080;
    private static final int BLUE = 0xff8080FF;
    private static final int WHITE = 0xffffffff;
    private static final int GREEN = 0xff80ff80;
    private static final int DURATION = 3000;
    ValueAnimator colorAnim = null;

    private PageChangeListener mPageChangeListener;

    ViewPager.OnPageChangeListener onPageChangeListener;

    public void setOnPageChangeListener(
            ViewPager.OnPageChangeListener onPageChangeListener) {
        this.onPageChangeListener = onPageChangeListener;
    }

    /**
     * 这是你唯一需要关心的方法
     *
     * @param mViewPager
     *            你必须在设置 Viewpager 的 Adapter 这后，才能调用这个方法。
     * @param obj
     *            ,这个obj实现了 ColorAnimationView.OnPageChangeListener ，实现回调
     * @param count
     *            ,viewpager 数据的数量
     * @param colors
     *            int... colors ，你需要设置的颜色变化值~~ 如何你传人 空，那么触发默认设置的颜色动画
     * */

    public void setmViewPager(ViewPager mViewPager, int count, int... colors) {
        if (mViewPager.getAdapter() == null) {
            throw new IllegalStateException(
                    "ViewPager does not have adapter instance.");
        }
        mPageChangeListener.setViewPagerChildCount(count);

        mViewPager.setOnPageChangeListener(mPageChangeListener);
        if (colors.length == 0) {
            createDefaultAnimation();
        } else {
            createAnimation(colors);
        }

    }

    public ColorAnimationView(Context context) {
        this(context, null, 0);

    }

    public ColorAnimationView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ColorAnimationView(Context context, AttributeSet attrs,
            int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPageChangeListener = new PageChangeListener();
    }

    private void seek(long seekTime) {
        if (colorAnim == null) {
            createDefaultAnimation();
        }
        colorAnim.setCurrentPlayTime(seekTime);
    }

    private void createAnimation(int... colors) {
        if (colorAnim == null) {
            colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", colors);
            colorAnim.setEvaluator(new ArgbEvaluator());
            colorAnim.setDuration(DURATION);
            colorAnim.addUpdateListener(this);
        }
    }

    private void createDefaultAnimation() {
        colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", WHITE, RED,
                BLUE, GREEN, WHITE);
        colorAnim.setEvaluator(new ArgbEvaluator());
        colorAnim.setDuration(DURATION);
        colorAnim.addUpdateListener(this);
    }

    @Override
    public void onAnimationStart(Animator animation) {

    }

    @Override
    public void onAnimationEnd(Animator animation) {
    }

    @Override
    public void onAnimationCancel(Animator animation) {

    }

    @Override
    public void onAnimationRepeat(Animator animation) {

    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        invalidate();
    }

    private class PageChangeListener implements ViewPager.OnPageChangeListener {

        private int viewPagerChildCount;

        public void setViewPagerChildCount(int viewPagerChildCount) {
            this.viewPagerChildCount = viewPagerChildCount;
        }

        public int getViewPagerChildCount() {
            return viewPagerChildCount;
        }

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

            int count = getViewPagerChildCount() - 1;
            if (count != 0) {
                float length = (position + positionOffset) / count;
                int progress = (int) (length * DURATION);
                ColorAnimationView.this.seek(progress);
            }
            if (onPageChangeListener != null) {
                onPageChangeListener.onPageScrolled(position, positionOffset,
                        positionOffsetPixels);
            }

        }

        @Override
        public void onPageSelected(int position) {
            if (onPageChangeListener != null) {
                onPageChangeListener.onPageSelected(position);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            if (onPageChangeListener != null) {
                onPageChangeListener.onPageScrollStateChanged(state);
            }
        }
    }
}

扁平化Button

大家看到这个button是不是挺好看的，这里用到了一个shape属性

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"><shape>
            <solid android:color="#5cb57c" />

            <corners android:radius="8dp" />
        </shape></item>
    <item android:state_pressed="false"><shape>
            <solid android:color="#80ff80" />

            <corners android:radius="8dp" />
        </shape></item>
</selector>

Demo下载地址：http://download.csdn.net/detail/qq_26787115/9391782