Android开发中经常会有引导页或者切换页面等效果,本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果。源码地址在文章最后给出下载。
效果图如下:
1.Viewpager是个Android自带的View视图控件,要使用它,必须导入这个附加包android-support-v4.jar,如何导入到家必应搜索一下就知道了。
2.界面设计:
其实很简单就是一个简单页面,里面放一个ViewPager,
<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" tools:context=".MainActivity" > <android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" > <android.support.v4.view.PagerTabStrip
android:id="@+id/pagertab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#8B00FF"
android:textColor="#FFF" />
</android.support.v4.view.ViewPager> <RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" > <LinearLayout
android:id="@+id/viewGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:gravity="center_horizontal"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout> </FrameLayout>
其次就是 5个页面,放在ViewPager里的,这里就随便举例一个页面源码:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/guide02"
android:gravity="center_horizontal"
android:orientation="horizontal" > <ImageView
android:id="@+id/translate1"
android:layout_gravity="center"
android:layout_width="96dp"
android:layout_height="192dp"
android:src="@drawable/translate1" />
<ImageView
android:id="@+id/translate2"
android:layout_gravity="center"
android:layout_width="96dp"
android:layout_height="192dp"
android:layout_marginLeft="5dp"
android:src="@drawable/scale"
android:visibility="gone" />
<ImageView
android:id="@+id/translate3"
android:layout_gravity="center"
android:layout_width="96dp"
android:layout_height="192dp"
android:layout_marginLeft="5dp"
android:src="@drawable/translate2"
android:visibility="gone" />
</LinearLayout>
该页面里的三个图片所对应的动画效果代码如下:
<translate
android:duration="800"
android:fromXDelta="-100%p" /> <translate
android:duration="800"
android:fromYDelta="-100%p"
android:interpolator="@android:anim/bounce_interpolator" /> <translate
android:duration="800"
android:fromXDelta="100%p" />
3.Java代码设计与实现:
(1)View等相关变量定义:
ViewPager viewPager;
ArrayList<View> listViews;
ViewGroup main, group;
ImageView imageView;
ImageView[] imageViews;
ImageView imgv;
Animation[] animations;
Animation animTranslate2;
Animation animTranslate3;
List<String> listTitles ;
(2)变量初始化工作:
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
LayoutInflater inflater = getLayoutInflater();
listViews = new ArrayList<View>();
listViews.add(inflater.inflate(R.layout.item1, null));
listViews.add(inflater.inflate(R.layout.item2, null));
listViews.add(inflater.inflate(R.layout.item3, null));
listViews.add(inflater.inflate(R.layout.item4, null));
listViews.add(inflater.inflate(R.layout.item5, null)); imageViews = new ImageView[listViews.size()];
ViewGroup main = (ViewGroup) inflater.inflate(R.layout.main, null);
// group是R.layou.main中的负责包裹小圆点的LinearLayout.
ViewGroup group = (ViewGroup) main.findViewById(R.id.viewGroup); viewPager = (ViewPager) main.findViewById(R.id.viewPager); for (int i = 0; i < listViews.size(); i++) {
imageView = new ImageView(MainActivity.this);
imageView.setLayoutParams(new LayoutParams(60, 60));
imageView.setPadding(10, 0, 10, 0);
imageViews[i] = imageView;
if (i == 0) {
// 默认进入程序后第一张图片被选中;
imageViews[i].setImageResource(R.drawable.guide_dot_white);
} else {
imageViews[i].setImageResource(R.drawable.guide_dot_black);
}
group.addView(imageView);
} listTitles = new ArrayList<String>();
listTitles.add("页面1");
listTitles.add("页面2");
listTitles.add("页面3");
listTitles.add("页面4");
listTitles.add("页面5"); setContentView(main); viewPager.setAdapter(new MyAdapter(listTitles));
viewPager.setOnPageChangeListener(new MyListener());
(3)动画初始化以及监听器设定:
animations = new Animation[listViews.size()];
animations[0]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
animations[1]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate1);
animations[2]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
animations[3]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.demo); animTranslate2=AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate2);
animTranslate3=AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate3);
animations[1].setAnimationListener(new AnimationListener() { @Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
listViews.get(1).findViewById(R.id.translate2).setVisibility(View.INVISIBLE);
listViews.get(1).findViewById(R.id.translate3).setVisibility(View.INVISIBLE);
} @Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub } @Override
public void onAnimationEnd(Animation arg0) {
// TODO Auto-generated method stub listViews.get(1).findViewById(R.id.translate2).setVisibility(View.VISIBLE);
listViews.get(1).findViewById(R.id.translate2).startAnimation(animTranslate2);
}
});
animTranslate2.setAnimationListener(new AnimationListener() { @Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
//list.get(1).findViewById(R.id.translate3).setVisibility(View.INVISIBLE);
} @Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub } @Override
public void onAnimationEnd(Animation arg0) {
// TODO Auto-generated method stub listViews.get(1).findViewById(R.id.translate3).setVisibility(View.VISIBLE);
listViews.get(1).findViewById(R.id.translate3).startAnimation(animTranslate3);
}
});
(4)ViewPager的自定义适配器:
animations = new Animation[listViews.size()];
animations[0]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
animations[1]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate1);
animations[2]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
animations[3]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.demo); animTranslate2=AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate2);
animTranslate3=AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate3);
animations[1].setAnimationListener(new AnimationListener() { @Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
listViews.get(1).findViewById(R.id.translate2).setVisibility(View.INVISIBLE);
listViews.get(1).findViewById(R.id.translate3).setVisibility(View.INVISIBLE);
} @Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub } @Override
public void onAnimationEnd(Animation arg0) {
// TODO Auto-generated method stub listViews.get(1).findViewById(R.id.translate2).setVisibility(View.VISIBLE);
listViews.get(1).findViewById(R.id.translate2).startAnimation(animTranslate2);
}
});
animTranslate2.setAnimationListener(new AnimationListener() { @Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
//list.get(1).findViewById(R.id.translate3).setVisibility(View.INVISIBLE);
} @Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub } @Override
public void onAnimationEnd(Animation arg0) {
// TODO Auto-generated method stub listViews.get(1).findViewById(R.id.translate3).setVisibility(View.VISIBLE);
listViews.get(1).findViewById(R.id.translate3).startAnimation(animTranslate3);
}
});
(5)实现页面切换动作监听:
class MyListener implements OnPageChangeListener { @Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
/*list.get(1).findViewById(R.id.translate1).setVisibility(View.INVISIBLE);
list.get(1).findViewById(R.id.translate2).setVisibility(View.INVISIBLE);
list.get(1).findViewById(R.id.translate3).setVisibility(View.INVISIBLE);*/
} @Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub } @Override
public void onPageSelected(int arg0) {
Toast.makeText(MainActivity.this, ""+(arg0+1), Toast.LENGTH_SHORT).show(); for (int i = 0; i < imageViews.length; i++) {
imageViews[arg0].setImageResource(R.drawable.guide_dot_white);
if (arg0 != i) {
imageViews[i].setImageResource(R.drawable.guide_dot_black);
} }
Log.v("viewpager", ""+arg0+1);
if(arg0 != 4)
playAnim(arg0);
} } private void playAnim(final int n){
switch(n){
case 0:
listViews.get(n).findViewById(R.id.scale).startAnimation(animations[n]);
break;
case 1: listViews.get(n).findViewById(R.id.translate1).startAnimation(animations[n]); break;
case 2:
listViews.get(n).findViewById(R.id.rotate).startAnimation(animations[n]);
break;
case 3:
listViews.get(n).findViewById(R.id.demo).startAnimation(animations[n]);
break;
}
}
到此源码完毕。