Android编程入门--ViewPager引导页

ViewPager使用FragmentStatePagerAdapter做Adapter，引导页使用多Fragment形式。

FragmentStatePagerAdapter代码如下：

public class GuideFragmentPagerAdapter extends FragmentStatePagerAdapter {
private List<GuideBaseFragment> list;
public GuideFragmentPagerAdapter(FragmentManager fm, List<GuideBaseFragment> list) {
super(fm);
this.list = list;
}

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

@Override
public Fragment getItem(int position) {
return list.get(position);
}

@Override
public int getCount() {
return list.size();
}
}

ViewPager代码如下：

public class GuideViewPager extends ViewPager {
private Bitmap bg;
private Paint b = new Paint(1);

public GuideViewPager(Context context) {
super(context);
}

public GuideViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}

@Override
protected void dispatchDraw(Canvas canvas) {
if (this.bg != null) {
int width = this.bg.getWidth();
int height = this.bg.getHeight();
int count = getAdapter().getCount();
int x = getScrollX();
// 子View中背景图片需要显示的宽度，放大背景图或缩小背景图。
int n = height * getWidth() / getHeight();

/**
* (width - n) / (count - 1)表示除去显示第一个ViewPager页面用去的背景宽度，剩余的ViewPager需要显示的背景图片的宽度。
* getWidth()等于ViewPager一个页面的宽度，即手机屏幕宽度。在该计算中可以理解为滑动一个ViewPager页面需要滑动的像素值。
* ((width - n) / (count - 1)) /getWidth()也就表示ViewPager滑动一个像素时，背景图片滑动的宽度。
* x * ((width - n) / (count - 1)) /  getWidth()也就表示ViewPager滑动x个像素时，背景图片滑动的宽度。
* 背景图片滑动的宽度的宽度可以理解为背景图片滑动到达的位置。
*/
int w = x * ((width - n) / (count - 1)) / getWidth();
canvas.drawBitmap(this.bg, new Rect(w, 0, n + w, height), new Rect( x, 0, x + getWidth(), getHeight()), this.b);
}
super.dispatchDraw(canvas);
}

public void setBackGroud(Bitmap paramBitmap) {
this.bg = paramBitmap;
this.b.setFilterBitmap(true);
}
}

Fragment代码如下：

public abstract class GuideBaseFragment extends Fragment {
public abstract void  startAnimation();
public abstract void  stopAnimation();
}

public class WelcomeGuideFragment extends GuideBaseFragment implements View.OnClickListener {
private static final float ZOOM_MAX = 1.3f;
private static final  float ZOOM_MIN = 1.0f;

private ImageView imgView_immediate_experience;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
View rooView=inflater.inflate(R.layout.fragment_guide_welcome, null);
imgView_immediate_experience=(ImageView) rooView.findViewById(R.id.imgView_immediate_experience);
imgView_immediate_experience.setOnClickListener(this);
return rooView;
}

public void playHeartbeatAnimation(){
/**
* 放大动画
*/
AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(new ScaleAnimation(ZOOM_MIN, ZOOM_MAX, ZOOM_MIN, ZOOM_MAX, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f));
animationSet.addAnimation(new AlphaAnimation(1.0f, 0.8f));

animationSet.setDuration(500);
animationSet.setInterpolator(new AccelerateInterpolator());
animationSet.setFillAfter(true);

animationSet.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}

@Override
public void onAnimationRepeat(Animation animation) {
}

@Override
public void onAnimationEnd(Animation animation) {
/**
* 缩小动画
*/
AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(new ScaleAnimation(ZOOM_MAX, ZOOM_MIN, ZOOM_MAX,ZOOM_MIN, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f));
animationSet.addAnimation(new AlphaAnimation(0.8f, 1.0f));
animationSet.setDuration(600);
animationSet.setInterpolator(new DecelerateInterpolator());
animationSet.setFillAfter(false);
// 实现心跳的View
imgView_immediate_experience.startAnimation(animationSet);
}
});
// 实现心跳的View
imgView_immediate_experience.startAnimation(animationSet);
}

@Override
public void onClick(View v) {
Intent intent = new Intent();
intent.setClass(getActivity(),MainActivity.class);
startActivity(intent);
getActivity().finish();
}

@Override
public void startAnimation() {
playHeartbeatAnimation();
}

@Override
public void stopAnimation() {

}
}

FragmentActivity代码如下：

public class GuideActivity extends FragmentActivity {

private GuideViewPager guideViewPager;
private List<GuideBaseFragment> guideBaseFragmentArrayList = new ArrayList<GuideBaseFragment>();
private GuideFragmentPagerAdapter guideFragmentPagerAdapter;

private ImageView[] tips;//点点点指示
private int currentSelect;//记录当前选择页序列

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guide);

//初始化点点点控件
ViewGroup group = (ViewGroup)findViewById(R.id.viewGroup);
tips = new ImageView[3];
for (int i = 0; i < tips.length; i++) {
ImageView imageView = new ImageView(this);
imageView.setLayoutParams(new ViewGroup.LayoutParams(10, 10));
if (i == 0) {
imageView.setBackgroundResource(R.drawable.page_indicator_focused);
} else {
imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);
}
tips[i]=imageView;

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
layoutParams.leftMargin = 20;//设置点点点view的左边距
layoutParams.rightMargin = 20;//设置点点点view的右边距
group.addView(imageView,layoutParams);
}

//获取自定义viewpager 然后设置背景图片
guideViewPager = (GuideViewPager) findViewById(R.id.viewpager_launcher);
guideViewPager.setBackGroud(BitmapFactory.decodeResource(getResources(), R.drawable.bg_kaka_launcher));

/**
* 初始化三个fragment  并且添加到list中
*/
WelcomeGuideFragment rewardFragment = new WelcomeGuideFragment();
WelcomeGuideFragment privateFragment = new WelcomeGuideFragment();
WelcomeGuideFragment wFragement = new WelcomeGuideFragment();
guideBaseFragmentArrayList.add(wFragement);
guideBaseFragmentArrayList.add(rewardFragment);
guideBaseFragmentArrayList.add(privateFragment);

guideFragmentPagerAdapter = new GuideFragmentPagerAdapter(getSupportFragmentManager(), guideBaseFragmentArrayList);
guideViewPager.setAdapter(guideFragmentPagerAdapter);
guideViewPager.setOffscreenPageLimit(2);//viewPager缓存页面数量
guideViewPager.setCurrentItem(0);//滑屏速度
guideViewPager.setOnPageChangeListener(changeListener);
}

/**
* 监听viewpager的移动
*/
ViewPager.OnPageChangeListener changeListener=new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int index) {
setImageBackground(index);//改变点点点的切换效果
GuideBaseFragment fragment= guideBaseFragmentArrayList.get(index);

guideBaseFragmentArrayList.get(currentSelect).stopAnimation();//停止前一个页面的动画
fragment.startAnimation();//开启当前页面的动画

currentSelect=index;
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {}
@Override
public void onPageScrollStateChanged(int arg0) {}
};

/**
* 改变点点点的切换效果
* @param selectItems
*/
private void setImageBackground(int selectItems) {
for (int i = 0; i < tips.length; i++) {
if (i == selectItems) {
tips[i].setBackgroundResource(R.drawable.page_indicator_focused);
} else {
tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);
}
}
}
}