# Android特效專輯(二)——ViewPager渲染背景顏色漸變(引導頁) 首頁：[http://blog.csdn.net/qq_26787115/article/details/50439020](http://blog.csdn.net/qq_26787115/article/details/50439020) > 首頁里面也提到過，自己有意做一款雜七雜八的APP，就是自己喜歡什么就加上面，現在本文說的是引導頁，我找了很久才覺得可以的開源項目，自己做了一下修改 開源地址：[https://github.com/TaurusXi/GuideBackgroundColorAnimation](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](http://download.csdn.net/detail/qq_26787115/9391782)