Android开发之ViewPager实现多页面切换及动画效果(仿Android的Launcher效果)

http://www.cnblogs.com/JczmDeveloper/p/3792832.html


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;
        }
    }
复制代码

到此源码完毕。

下载地址1:http://download.csdn.net/detail/jczmdeveloper/7511223

下载地址2:http://download.csdn.net/detail/jczmdeveloper/7511147


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值