(二)——ViewPager渲染背景颜色渐变(引导页)
最后更新于：2022-04-01 09:36:10
# 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)