正文

Android中ViewPager组件的基本用法及实现图片切换的示例

︶ㄣSDDLL学院 メ
SDDLL学院V管理员 / 阅读
0710
这篇文章主要介绍了Android中ViewPager组件的基本用法及实现图片切换的示例,ViewPager主要被用来实现滑动切换效果,需要的朋友可以参考下

这篇文章主要介绍了Android中ViewPager组件的基本用法及实现图片切换的示例,ViewPager主要被用来实现滑动切换效果,需要的朋友可以参考下

viewpager是android-support-v4.jar包里的组件。在布局文件里标签需要连包名一起

写全称<android.support.v4.view.viewpager />

基本用法

viewpager的基本用法我概括为三步

第一步 在主布局文件里放一个viewpager组件

第二步 为每个页面建立布局文件，把界面写好

第三步 在主activity里获取viewpager组件，并为它设定adapter。

adapter详细讲讲，viewpager对应的adapter继承自pageradapter，

也是android.support.v4.view包里的，继承类需要实现四个方法：

  • int getcount():返回页面数目
  • object instantiateitem(viewgroup,int position):创建position位置的页面视图，加入到viewgroup中，并返回该视图的key。key可以是该视图，也可以是其他唯一与该视图对应的对象：
  • boolean isviewfromobject(view,object)：判断object所代表的key是否对应指定的view。
  • void destroyitem(viewgroup,int position,object)：从viewgroup里删除position位置的view。

我们先用layoutinflater将前面为每个页面建立的界面加载进来，并放在一个arraylist之类的容器里面。然后在pageradapter的这四个方法里，我们操作的，就是与这些页面对应的view。

使用viewpager组件实现图片切换
上面说的这些步骤可能听起来挺空洞的，下面我们来看这个使用viewpager组件实现图片切换的实例：
在很多app中，尤其是第一次安装启动后，都会出现几个图片进行一些app的介绍和说明，图片可以随着滑动而切换。

我们这里利用 viewpager组件来演示如何实现这一点。

1、创建一个app工程，默认创建一个主 activity

2、设置该activity的布局文件activity_main.xml内容如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0" encoding="utf-8"?>
<framelayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >
   
  <android.support.v4.view.viewpager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
     
  <relativelayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
  
    <linearlayout
      android:id="@+id/tagview"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignparentbottom="true"
      android:layout_marginbottom="20dp"
      android:gravity="center_horizontal"
      android:orientation="horizontal" >
    </linearlayout>
  </relativelayout>
 
</framelayout>

因为我们希望再切换图片上，能有一些点点形状的图标（或者数字）显示当前图片。所以这里的activity采用了framelayout布局（可以实现view重叠放置）。

第一个控件就是viewpager （注意viewpager 是在support.v4包中的，新的andorid中并没有移植该组件）。

第二个控件是放置一个relativelayout，其中放置一个linearlayout（位于屏幕的底部位置），该linearlayout采用水平布局，用来放置小的图标。

3、准备图片

准备5张用于切换显示的图片，如 pic1.jpg、pic2.jpg、pic3.jpg、pic4.jpg、pic5.jpg，再准备两个小图标图片page_current.png、page_not_current.png。

将这些图片放到drawable-hdpi目录下（或相应尺寸的drawable目录下）。

4、编写activity的代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
package com.example.showviewpager;
 
import java.util.arraylist;
 
import android.app.activity;
import android.os.bundle;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.support.v4.view.viewpager.onpagechangelistener;
import android.view.menu;
import android.view.menuitem;
import android.view.view;
import android.view.viewgroup;
import android.widget.imageview;
import android.widget.imageview.scaletype;
import android.widget.linearlayout;
import android.widget.linearlayout.layoutparams;
 
public class mainactivity extends activity {
 
  private static final int view_num = 5;
  private viewpager viewpager;
  private imageview[] tagimageviews = new imageview[view_num];
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    addtagimage();
    initviewpager();
  }
 
  private void addtagimage() {
    linearlayout layout = (linearlayout)findviewbyid(r.id.tagview);
    linearlayout.layoutparams params = new linearlayout.layoutparams(
     linearlayout.layoutparams.wrap_content, linearlayout.layoutparams.wrap_content);
    params.setmargins(15, 0, 0, 0);
    for (int i = 0; i < view_num; i++) {
      imageview tagimageview = new imageview(this);
      tagimageview.setlayoutparams(params);
      tagimageviews[i] = tagimageview;
      if (i == 0) {
        tagimageview.setbackgroundresource(r.drawable.page_current);
      } else {
        tagimageview.setbackgroundresource(r.drawable.page_not_current);
      }
 
      layout.addview(tagimageview);
    }
  }
   
  private void initviewpager() {
    viewpager = (viewpager) findviewbyid(r.id.viewpager);
    viewpager.setadapter(new myadapter());
    viewpager.setonpagechangelistener(new onpagechangelistener() {
      @override
      public void onpageselected(int arg0) {
        for (int i = 0; i < tagimageviews.length; i++) {
          if (i == arg0 % view_num) {
            tagimageviews[i].setbackgroundresource(r.drawable.page_current);
          } else {
            tagimageviews[i].setbackgroundresource(r.drawable.page_not_current);
          }
        }
      }
       
      @override
      public void onpagescrolled(int arg0, float arg1, int arg2) {
         
      }
       
      @override
      public void onpagescrollstatechanged(int arg0) {
         
      }
    });
    viewpager.setcurrentitem(0);
  }
   
  class myadapter extends pageradapter{
    private arraylist<view> viewlist;
    public myadapter(){
      viewlist = new arraylist<view>();
      viewlist.add(createpagerimageview(r.drawable.pic1));
      viewlist.add(createpagerimageview(r.drawable.pic2));
      viewlist.add(createpagerimageview(r.drawable.pic3));
      viewlist.add(createpagerimageview(r.drawable.pic4));
      viewlist.add(createpagerimageview(r.drawable.pic5));
    }
     
    private view createpagerimageview(int resid){
      layoutparams params = new layoutparams(layoutparams.match_parent, layoutparams.match_parent);
      linearlayout layout = new linearlayout(mainactivity.this);
      layout.setlayoutparams(params);
      layout.setorientation(linearlayout.vertical);
      imageview imageview = new imageview(mainactivity.this);
      imageview.setlayoutparams(params);
      imageview.setscaletype(scaletype.center_crop);
      imageview.setimageresource(resid);
      layout.addview(imageview);
      return layout;
    }
     
    @override
    public int getcount() {
      return integer.max_value;
    }
 
    @override
    public boolean isviewfromobject(view arg0, object arg1) {
      return arg0 == arg1;
    }
     
    @override
    public object instantiateitem(viewgroup container, int position) {
      ((viewpager) container).addview(viewlist.get(position % view_num),0);
      return viewlist.get(position % view_num);
    }
 
    @override
    public void destroyitem(view container, int position, object object) {
      ((viewpager) container).removeview(viewlist
          .get(position % view_num));
    }
     
  }
 
  @override
  public boolean oncreateoptionsmenu(menu menu) {
    getmenuinflater().inflate(r.menu.main, menu);
    return true;
  }
 
  @override
  public boolean onoptionsitemselected(menuitem item) {
    int id = item.getitemid();
    if (id == r.id.action_settings) {
      return true;
    }
    return super.onoptionsitemselected(item);
  }
}

5、如果需要不显示activity的标题栏，可修改manifest中的activity中的配置,设置样式为：

?
1
android:theme="@android:style/theme.black.notitlebar"
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.example.showviewpager"
  android:versioncode="1"
  android:versionname="1.0" >
 
  <uses-sdk
    android:minsdkversion="16"
    android:targetsdkversion="21" />
 
  <application
    android:allowbackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/apptheme" >
    <activity
      android:name=".mainactivity"
      android:label="@string/app_name"
      android:theme="@android:style/theme.black.notitlebar" >
      <intent-filter>
        <action android:name="android.intent.action.main" />
        <category android:name="android.intent.category.launcher" />
      </intent-filter>
    </activity>
  </application>
 
</manifest>

　　

其它配置文件、代码等都是采用eclipse创建的默认设置。