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

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

首页里面也提到过，自己有意做一款杂七杂八的APP，就是自己喜欢什么就加上面，现在本文说的是引导页，我找了很久才觉得可以的开源项目，自己做了一下修改
开源地址：https://github.com/TaurusXi/GuideBackgroundColorAnimation
先来看看效果图吧！

图片用的是官方的，嘿嘿

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

layout_main.xml

  1.       <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent" >
  6.     <com.lgl.viewpager.ColorAnimationView
  7.         android:id="@+id/ColorAnimationView"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent" />
  11.     <android.support.v4.view.ViewPager
  12.         android:id="@+id/viewPager"
  13.         android:layout_width="match_parent"
  14.         android:layout_height="match_parent"
  15.         android:padding="30dp" />
  17.     <RelativeLayout
  18.         android:layout_width="match_parent"
  19.         android:layout_height="match_parent" >
  21.         <Button
  22.             android:id="@+id/btn_go"
  23.             android:layout_width="100dp"
  24.             android:layout_height="wrap_content"
  25.             android:layout_alignParentBottom="true"
  26.             android:layout_centerHorizontal="true"
  27.             android:layout_marginBottom="43dp"
  28.             android:background="@drawable/colorbu"
  29.             android:text="开始"
  30.             android:visibility="gone" />
  31.     </RelativeLayout>
  33. </FrameLayout>
  34.

MainActivity

  1.       package com.lgl.viewpager;
  3. import android.annotation.SuppressLint;
  4. import android.os.Bundle;
  5. import android.support.v4.app.Fragment;
  6. import android.support.v4.app.FragmentActivity;
  7. import android.support.v4.app.FragmentManager;
  8. import android.support.v4.app.FragmentStatePagerAdapter;
  9. import android.support.v4.view.ViewPager;
  10. import android.util.Log;
  11. import android.view.LayoutInflater;
  12. import android.view.View;
  13. import android.view.ViewGroup;
  14. import android.widget.Button;
  15. import android.widget.ImageView;
  17. public class MainActivity extends FragmentActivity {
  18.     private static final int[] resource = new int[] { R.drawable.welcome1,
  19.             R.drawable.welcome4, R.drawable.welcome3, R.drawable.welcome4 };
  20.     private static final String TAG = MainActivity.class.getSimpleName();
  21.     private Button btn_go;
  23.     @Override
  24.     protected void onCreate(Bundle savedInstanceState) {
  25.         super.onCreate(savedInstanceState);
  26.         setContentView(R.layout.activity_main);
  27.         btn_go = (Button) findViewById(R.id.btn_go);
  28.         MyFragmentStatePager adpter = new MyFragmentStatePager(
  29.                 getSupportFragmentManager());
  30.         ColorAnimationView colorAnimationView = (ColorAnimationView) findViewById(R.id.ColorAnimationView);
  31.         ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
  32.         //设置adapter
  33.         viewPager.setAdapter(adpter);
  34.         //监听滑动
  35.         colorAnimationView.setmViewPager(viewPager, resource.length);
  36.         colorAnimationView
  37.                 .setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
  38.                     @Override
  39.                     public void onPageScrolled(int position,
  40.                             float positionOffset, int positionOffsetPixels) {
  41.                         Log.e("TAG", "onPageScrolled");
  42.                     }
  44.                     @Override
  45.                     public void onPageSelected(int position) {
  46.                         //Button显示或隐藏
  47.                         if (position == 3) {
  48.                             btn_go.setVisibility(View.VISIBLE);
  49.                         } else {
  50.                             btn_go.setVisibility(View.GONE);
  51.                         }
  52.                         Log.e("TAG", "onPageSelected");
  53.                     }
  55.                     @Override
  56.                     public void onPageScrollStateChanged(int state) {
  57.                         Log.e("TAG", "onPageScrollStateChanged");
  58.                     }
  59.                 });
  60.     }
  62.     public class MyFragmentStatePager extends FragmentStatePagerAdapter {
  64.         public MyFragmentStatePager(FragmentManager fm) {
  65.             super(fm);
  66.         }
  68.         @Override
  69.         public Fragment getItem(int position) {
  70.             return new MyFragment(position);
  71.         }
  73.         @Override
  74.         public int getCount() {
  75.             return resource.length;
  76.         }
  77.     }
  79.     @SuppressLint("ValidFragment")
  80.     public class MyFragment extends Fragment {
  81.         private int position;
  83.         public MyFragment(int position) {
  84.             this.position = position;
  85.         }
  87.         @Override
  88.         public View onCreateView(LayoutInflater inflater, ViewGroup container,
  89.                 Bundle savedInstanceState) {
  90.             ImageView imageView = new ImageView(getActivity());
  91.             imageView.setImageResource(resource[position]);
  92.             return imageView;
  93.         }
  94.     }
  95. }
  96.

ColorAnimationView

  1.       package com.lgl.viewpager;
  3. import android.animation.Animator;
  4. import android.animation.ArgbEvaluator;
  5. import android.animation.ObjectAnimator;
  6. import android.animation.ValueAnimator;
  7. import android.content.Context;
  8. import android.support.v4.view.ViewPager;
  9. import android.util.AttributeSet;
  10. import android.view.View;
  12. public class ColorAnimationView extends View implements
  13.         ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener {
  14.     private static final int RED = 0xffFF8080;
  15.     private static final int BLUE = 0xff8080FF;
  16.     private static final int WHITE = 0xffffffff;
  17.     private static final int GREEN = 0xff80ff80;
  18.     private static final int DURATION = 3000;
  19.     ValueAnimator colorAnim = null;
  21.     private PageChangeListener mPageChangeListener;
  23.     ViewPager.OnPageChangeListener onPageChangeListener;
  25.     public void setOnPageChangeListener(
  26.             ViewPager.OnPageChangeListener onPageChangeListener) {
  27.         this.onPageChangeListener = onPageChangeListener;
  28.     }
  30.     /**
  31.      * 这是你唯一需要关心的方法
  32.      * 
  33.      * @param mViewPager
  34.      *            你必须在设置 Viewpager 的 Adapter 这后，才能调用这个方法。
  35.      * @param obj
  36.      *            ,这个obj实现了 ColorAnimationView.OnPageChangeListener ，实现回调
  37.      * @param count
  38.      *            ,viewpager 数据的数量
  39.      * @param colors
  40.      *            int... colors ，你需要设置的颜色变化值~~ 如何你传人 空，那么触发默认设置的颜色动画
  41.      * */
  43.     public void setmViewPager(ViewPager mViewPager, int count, int... colors) {
  44.         if (mViewPager.getAdapter() == null) {
  45.             throw new IllegalStateException(
  46.                     "ViewPager does not have adapter instance.");
  47.         }
  48.         mPageChangeListener.setViewPagerChildCount(count);
  50.         mViewPager.setOnPageChangeListener(mPageChangeListener);
  51.         if (colors.length == 0) {
  52.             createDefaultAnimation();
  53.         } else {
  54.             createAnimation(colors);
  55.         }
  57.     }
  59.     public ColorAnimationView(Context context) {
  60.         this(context, null, 0);
  62.     }
  64.     public ColorAnimationView(Context context, AttributeSet attrs) {
  65.         this(context, attrs, 0);
  66.     }
  68.     public ColorAnimationView(Context context, AttributeSet attrs,
  69.             int defStyleAttr) {
  70.         super(context, attrs, defStyleAttr);
  71.         mPageChangeListener = new PageChangeListener();
  72.     }
  74.     private void seek(long seekTime) {
  75.         if (colorAnim == null) {
  76.             createDefaultAnimation();
  77.         }
  78.         colorAnim.setCurrentPlayTime(seekTime);
  79.     }
  81.     private void createAnimation(int... colors) {
  82.         if (colorAnim == null) {
  83.             colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", colors);
  84.             colorAnim.setEvaluator(new ArgbEvaluator());
  85.             colorAnim.setDuration(DURATION);
  86.             colorAnim.addUpdateListener(this);
  87.         }
  88.     }
  90.     private void createDefaultAnimation() {
  91.         colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", WHITE, RED,
  92.                 BLUE, GREEN, WHITE);
  93.         colorAnim.setEvaluator(new ArgbEvaluator());
  94.         colorAnim.setDuration(DURATION);
  95.         colorAnim.addUpdateListener(this);
  96.     }
  98.     @Override
  99.     public void onAnimationStart(Animator animation) {
  101.     }
  103.     @Override
  104.     public void onAnimationEnd(Animator animation) {
  105.     }
  107.     @Override
  108.     public void onAnimationCancel(Animator animation) {
  110.     }
  112.     @Override
  113.     public void onAnimationRepeat(Animator animation) {
  115.     }
  117.     @Override
  118.     public void onAnimationUpdate(ValueAnimator animation) {
  119.         invalidate();
  120.     }
  122.     private class PageChangeListener implements ViewPager.OnPageChangeListener {
  124.         private int viewPagerChildCount;
  126.         public void setViewPagerChildCount(int viewPagerChildCount) {
  127.             this.viewPagerChildCount = viewPagerChildCount;
  128.         }
  130.         public int getViewPagerChildCount() {
  131.             return viewPagerChildCount;
  132.         }
  134.         @Override
  135.         public void onPageScrolled(int position, float positionOffset,
  136.                 int positionOffsetPixels) {
  138.             int count = getViewPagerChildCount() - 1;
  139.             if (count != 0) {
  140.                 float length = (position + positionOffset) / count;
  141.                 int progress = (int) (length * DURATION);
  142.                 ColorAnimationView.this.seek(progress);
  143.             }
  144.             if (onPageChangeListener != null) {
  145.                 onPageChangeListener.onPageScrolled(position, positionOffset,
  146.                         positionOffsetPixels);
  147.             }
  149.         }
  151.         @Override
  152.         public void onPageSelected(int position) {
  153.             if (onPageChangeListener != null) {
  154.                 onPageChangeListener.onPageSelected(position);
  155.             }
  156.         }
  158.         @Override
  159.         public void onPageScrollStateChanged(int state) {
  160.             if (onPageChangeListener != null) {
  161.                 onPageChangeListener.onPageScrollStateChanged(state);
  162.             }
  163.         }
  164.     }
  165. }
  166.

扁平化Button

  1.       大家看到这个button是不是挺好看的，这里用到了一个shape属性
  2.     
  1.       <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  4.     <item android:state_pressed="true"><shape>
  5.             <solid android:color="#5cb57c" />
  7.             <corners android:radius="8dp" />
  8.         </shape></item>
  9.     <item android:state_pressed="false"><shape>
  10.             <solid android:color="#80ff80" />
  12.             <corners android:radius="8dp" />
  13.         </shape></item>
  14. </selector>
  15.

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