viewpager实现进入程序之前的欢迎界面效果

用viewpager实现该效果大致需要5步

1,用support.v4包下的ViewPager。xml布局如下:

1  <android.support.v4.view.ViewPager
2         android:id="@+id/viewPager"
3         android:layout_width="match_parent"
4         android:layout_height="match_parent" />

2,定义一个List<View> list集合,用于盛装viewpager所需的资源(因为viewpager里面可以放图片也可以放置view视图,同样可以实现左右滑动加载布局的效果,所以List的泛型用view表示。)。设置ImageView的图片,并将imageview添加到list集合中。

list = new ArrayList<View>();
  //定义一个for循环,设置imageview的背景图片,并将其放在list集合中
  for (int i = 0; i < images.length; i++) {
   imageView = new ImageView(context);
   imageView.setBackgroundResource(images[i]);
   list.add(imageView);
}

3,再定义一个List<ImageView> imPoint集合,用于盛装随图片滑动的‘小点’的Imageview,同样需要add到List集合中。

image1 = (ImageView) findViewById(R.id.imageView1);
        image2 = (ImageView) findViewById(R.id.imageView2);
        image3 = (ImageView) findViewById(R.id.imageView3);
        image4 = (ImageView) findViewById(R.id.imageView4);
        imPoint = new ArrayList<ImageView>();
        imPoint.add(image1);
        imPoint.add(image2);
        imPoint.add(image3);
        imPoint.add(image4);

4,设置监听,实现方法。viewPager.setOnPageChangeListener(new MyPagerListener());
5,设置viewpager的适配器,需要重写isViewFromObject(),getCount(),isViewFromObject(),destroyItem()等方法。

 整体实现方法如下:

首先是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"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
    
    <!-- 用于显示随图片滑动的底部或上部的小点图片 -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:src="@drawable/qz_icon_point_sitecover" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:src="@drawable/qz_icon_point_sitecover" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:src="@drawable/qz_icon_point_sitecover" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:src="@drawable/qz_icon_point_sitecover" />
    </LinearLayout>

</FrameLayout>
View Code

接下来是主界面

 1 package com.dj.viewpagerdemo;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 import android.app.Activity;
 7 import android.os.Bundle;
 8 import android.support.v4.view.ViewPager;
 9 import android.support.v4.view.ViewPager.OnPageChangeListener;
10 import android.widget.ImageView;
11 
12 public class MainActivity extends Activity {
13     private ViewPager viewPager;
14 
15     // 定义一个集合盛装带点的图片
16     private List<ImageView> imPoint;
17     private ImageView image1, image2, image3, image4;
18 
19     @Override
20     protected void onCreate(Bundle savedInstanceState) {
21         super.onCreate(savedInstanceState);
22         setContentView(R.layout.activity_main);
23         
24         viewPager = (ViewPager) findViewById(R.id.viewPager);
25         viewPager.setOnPageChangeListener(new MyPagerListener());
26         viewPager.setAdapter(new MyViewPagerAdapter(this));
27 
28         image1 = (ImageView) findViewById(R.id.imageView1);
29         image2 = (ImageView) findViewById(R.id.imageView2);
30         image3 = (ImageView) findViewById(R.id.imageView3);
31         image4 = (ImageView) findViewById(R.id.imageView4);
32         imPoint = new ArrayList<ImageView>();
33         imPoint.add(image1);
34         imPoint.add(image2);
35         imPoint.add(image3);
36         imPoint.add(image4);
37 
38         // 设置默认第一个点为蓝色
39         imageViewSelect(0);
40     }
41 
42     // 此方法是设置小点的图片,正常情况下为白色,当在图片的position位置是设置为蓝色
43     public void imageViewSelect(int position) {
44         // 一般情况下小点是白色的
45         for (int i = 0; i < imPoint.size(); i++) {
46             imPoint.get(i).setImageResource(R.drawable.qz_icon_point_sitecover);
47         }
48         // viewpager有四张图片,当获得图片的位置的时候小点设置为蓝色。
49         imPoint.get(position).setImageResource(
50                 R.drawable.qz_icon_point_sitecover_blue);
51     }
52 
53     public class MyPagerListener implements OnPageChangeListener {
54 
55         @Override
56         public void onPageScrollStateChanged(int arg0) {
57         }
58         @Override
59         public void onPageScrolled(int arg0, float arg1, int arg2) {
60         }
61         // 当新的页面被选中时调用
62         @Override
63         public void onPageSelected(int position) {
64             imageViewSelect(position);
65         }
66 
67     }
68 }

最后是viewpager的适配器,在此适配器中设置viewpager需要的图片资源。

 1 package com.dj.viewpagerdemo;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 import android.content.Context;
 7 import android.support.v4.view.PagerAdapter;
 8 import android.support.v4.view.ViewPager;
 9 import android.view.View;
10 import android.widget.ImageView;
11 
12 public class MyViewPagerAdapter extends PagerAdapter {
13     //用于盛装Imageview的集合
14     private List<View> list;
15     //用于显示页面的图片
16     private int[] images = { R.drawable.a, R.drawable.b, R.drawable.c,
17             R.drawable.d };
18     private ImageView imageView;
19     /**在构造函数中写for循环,设置背景,便于在主界面传参数的时候将其传入*/
20     public MyViewPagerAdapter(Context context) {
21         list = new ArrayList<View>();
22         //定义一个for循环,设置imageview的背景图片,并将其放在list集合中
23         for (int i = 0; i < images.length; i++) {
24             imageView = new ImageView(context);
25             imageView.setBackgroundResource(images[i]);
26             list.add(imageView);
27         }
28     }
29 
30     // 获得页面数
31     @Override
32     public int getCount() {
33         return list.size();
34     }
35 
36     // 判断是否由对象生成界面
37     @Override
38     public boolean isViewFromObject(View arg0, Object arg1) {
39 
40         return arg0 == arg1;
41     }
42 
43     // 初始化position位置的界面
44     @Override
45     public Object instantiateItem(View container, int position) {
46         ((ViewPager) container).addView(list.get(position));
47         return list.get(position);
48     }
49 
50     // 当前页面滑动时调用,移除此页面,方便让下/上一个页面呈现。
51     @Override
52     public void destroyItem(View container, int position, Object object) {
53         ((ViewPager) container).removeView(list.get(position));
54     }
55 
56 }


以上是用viewpager实现左右滑动显示图片的效果,viewpager非常实用,也可以用它来实现左右滑动显示布局的效果。

原文地址:https://www.cnblogs.com/dj168/p/ViewPager.html