正文

Android应用中利用ViewPager实现多页面滑动切换效果示例

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0710

这篇文章主要介绍了Android应用中利用ViewPager实现多页面滑动切换效果示例,配合了Fragment和PagerTabStrip,需要的朋友可以参考下

1、添加android support包
因为上面的几个类都是在android support包中才提供，我们先添加包。
在eclipse->window->android sdk manager，选择列表中extras->android support library进行安装。下载完后在android-sdk\extras\android\support目录下，这里我们选择v4版本，进入v4目录，拷贝其中的android-support-v4.jar文件到工程的libs目录(若没有新建)下即可，编译时adt会自动将其导入项目中。

2、新建viewpager的layout，内容如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<linearlayout 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="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" >
    <android.support.v4.view.pagertabstrip 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="top" />
  </android.support.v4.view.viewpager>
</linearlayout>

viewpager用来管理layout并可以左右滑动显示各个页面数据，pagertabstrip用来显示页面title，android:layout_gravity="top"表示title在顶部，可设置bottom等。

 

3、新建fragmentactivity页面
fragmentactivity页面含有viewpager元素，可以用来显示fragment，定义如下：

?
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
public class viewpagerdemo extends fragmentactivity {
 
  /** 页面list **/
  list<fragment> fragmentlist = new arraylist<fragment>();
  /** 页面title list **/
  list<string>  titlelist  = new arraylist<string>();
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.view_pager_demo);
 
    viewpager vp = (viewpager)findviewbyid(r.id.viewpager);
    fragmentlist.add(new viewpagerfragment1("页面1"));
    fragmentlist.add(new viewpagerfragment1("页面2"));
    fragmentlist.add(new viewpagerfragment1("页面3"));
    titlelist.add("title 1 ");
    titlelist.add("title 2 ");
    titlelist.add("title 3 ");
    vp.setadapter(new mypageradapter(getsupportfragmentmanager(), fragmentlist, titlelist));
  }
 
  /**
   * 定义适配器
   */
  class mypageradapter extends fragmentpageradapter {
 
    private list<fragment> fragmentlist;
    private list<string>  titlelist;
 
    public mypageradapter(fragmentmanager fm, list<fragment> fragmentlist, list<string> titlelist){
      super(fm);
      this.fragmentlist = fragmentlist;
      this.titlelist = titlelist;
    }
 
    /**
     * 得到每个页面
     */
    @override
    public fragment getitem(int arg0) {
      return (fragmentlist == null || fragmentlist.size() == 0) ? null : fragmentlist.get(arg0);
    }
 
    /**
     * 每个页面的title
     */
    @override
    public charsequence getpagetitle(int position) {
      return (titlelist.size() > position) ? titlelist.get(position) : "";
    }
 
    /**
     * 页面的总个数
     */
    @override
    public int getcount() {
      return fragmentlist == null ? 0 : fragmentlist.size();
    }
  }
}

其中的mypageradapter集成自ragmentpageradapter，为viewpager提供数据源。

oncreate函数得到viewpager实例并设置数据源，getsupportfragmentmanager表示得到fragment管理器。viewpagerfragment1表示具体的页面，见下面介绍。

4、新建fragment页面
fragment页面即为左右滑动需要显示的页面，新建类集成fragment，并重写oncreateview函数即可。oncreateview函数相当于activity的oncreate函数。如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public class viewpagerfragment1 extends fragment {
 
  private string  text;
  private textview tv = null;
 
  public viewpagerfragment1(string text){
    super();
    this.text = text;
  }
 
  /**
   * 覆盖此函数，先通过inflater inflate函数得到view最后返回
   */
  @override
  public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) {
    view v = inflater.inflate(r.layout.view_pager_fragment_demo1, container, false);
    tv = (textview)v.findviewbyid(r.id.viewpagertext);
    tv.settext(text);
    return v;
  }
}

5、示例工程代码：

?
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
package cn.trinea.android.demo;
 
import java.util.arraylist;
import java.util.list;
 
import android.os.bundle;
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentmanager;
import android.support.v4.app.fragmentpageradapter;
import android.support.v4.view.viewpager;
 
public class viewpagerdemo extends basefragmentactivity {
 
  private static int total_count = 3;
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate, r.layout.view_pager_demo);
 
    viewpager vp = (viewpager)findviewbyid(r.id.view_pager);
    list<fragment> fragmentlist = new arraylist<fragment>();
    list<string> titlelist = new arraylist<string>();
    for (int i = 0; i < total_count; i++) {
      viewpagerfragment viewpagerfragment1 = new viewpagerfragment();
      bundle bundle = new bundle();
      bundle.putint("upimageid", 0);
      bundle.putstring("text", "page " + i);
      viewpagerfragment1.setarguments(bundle);
      titlelist.add("title " + i);
      fragmentlist.add(viewpagerfragment1);
    }
 
    vp.setadapter(new mypageradapter(getsupportfragmentmanager(), fragmentlist, titlelist));
 
  }
 
  class mypageradapter extends fragmentpageradapter {
 
    private list<fragment> fragmentlist;
    private list<string>  titlelist;
 
    public mypageradapter(fragmentmanager fm, list<fragment> fragmentlist, list<string> titlelist) {
      super(fm);
      this.fragmentlist = fragmentlist;
      this.titlelist = titlelist;
    }
 
    @override
    public fragment getitem(int arg0) {
      return (fragmentlist == null || fragmentlist.size() == 0) ? null : fragmentlist.get(arg0);
    }
 
    @override
    public charsequence getpagetitle(int position) {
      return (titlelist.size() > position) ? titlelist.get(position) : "";
    }
 
    @override
    public int getcount() {
      return fragmentlist == null ? 0 : fragmentlist.size();
    }
  }
}

简单效果如下：

Android应用中利用ViewPager实现多页面滑动切换效果示例