文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

二 - ViewPager 渲染背景颜色渐变（引导页）

发布于 2025-02-28 12:56:40 字数 9768 浏览 0 评论 0 收藏 0

首页里面也提到过，自己有意做一款杂七杂八的 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

分享到QQ

分享到微博