正文

Android App在ViewPager中使用Fragment的实例讲解

︶ㄣSDDLL学院 メ
SDDLL学院V管理员 / 阅读
0710
这篇文章主要介绍了Android App在ViewPager中使用Fragment的实例讲解,ViewPager组件主要被用来制作滑动切换效果,需要的朋友可以参考下

这篇文章主要介绍了Android App在ViewPager中使用Fragment的实例讲解,ViewPager组件主要被用来制作滑动切换效果,需要的朋友可以参考下

据说android最推荐的是在viewpager中使用fragment，即viewpager中的页面不像前面那样用layoutinflater直接从布局文件加载，而是一个个fragment。注意这里的fragment

是android.support.v4.view包里的fragment,而不是android.app包里的fragment。

使用v4包里的fragment的activity必须继承自fragmentactivity。

其实使用fragment与前面不使用fragment非常类似：

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

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

第三步 为每个页面新建fragment类，并加载布局文件中的界面

第四部 为viewpager设定adapter，只不过这里的adapter不是pageradapter，而是换成

fragmentpageradapter,实现两个方法：

getcount()：返回页面数目

getitem(position)：返回position位置的fragment。

下面来看一个viewpager与fragment实现页面滑动效果的例子:

Android App在ViewPager中使用Fragment的实例讲解

首先继承fragmentactivity,
为viewpager提供展示所需的fragment和fragmentpageradapter:
fragment来指定页面的布局以及功能

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// fragment
private class myfragment extends fragment {
 
  private string text;
  private int color;
 
  public myfragment(string text, int color) {
    this.text = text;
    this.color = color;
  }
 
  @override
  public view oncreateview(layoutinflater inflater, @nullable viewgroup container, @nullable bundle savedinstancestate) {
    textview tv = new textview(mainactivity.this);
    tv.setbackgroundcolor(color);
    tv.settext(text);
    return tv;
  }
}

adapter指定该viewpager有多少页面以及那个位置需要显示哪个页面:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// adapter
  private class myadapter extends fragmentpageradapter {
    public myadapter(fragmentmanager fm) {
      super(fm);
    }
 
    @override
    public int getcount() {
      return pages.size();
    }
 
    @override
    public fragment getitem(int arg0) {
      return pages.get(arg0);
    }
  }

设置onpagechangelistener,指定页面改变时需要做什么其他操作:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@override
public void onpagescrollstatechanged(int arg0) {
 
}
 
@override
public void onpagescrolled(int arg0, float arg1, int arg2) {
  linearlayout.layoutparams lp = (android.widget.linearlayout.layoutparams) tabline.getlayoutparams();
  lp.leftmargin = (int) ((arg0 + arg1) * mtablinewidth);
  tabline.setlayoutparams(lp);
}
 
@override
public void onpageselected(int arg0) {
  // set titles
  for (int i = 0; i < titles.size(); i++) {
    if (arg0 == i) {
      titles.get(i).setselected(true);
    } else {
      titles.get(i).setselected(false);
    }
  }
}

完整的代码:

?
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
package com.hzy.myviewpager;
 
import java.util.arraylist;
 
import android.graphics.color;
import android.os.bundle;
import android.support.annotation.nullable;
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentactivity;
import android.support.v4.app.fragmentmanager;
import android.support.v4.app.fragmentpageradapter;
import android.support.v4.view.viewpager;
import android.support.v4.view.viewpager.onpagechangelistener;
import android.util.displaymetrics;
import android.view.display;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
import android.view.view.onclicklistener;
import android.view.viewgroup.layoutparams;
import android.widget.linearlayout;
import android.widget.textview;
 
import com.hzy.myviewpager.r.id;
 
public class mainactivity extends fragmentactivity implements onpagechangelistener, onclicklistener {
 
  viewpager pager = null;
  view tabline = null;
  private int mtablinewidth;
 
  // titles
  textview title1 = null;
  textview title2 = null;
  textview title3 = null;
 
  arraylist<textview> titles = null;
  arraylist<fragment> pages = null;
 
  @override
  protected void oncreate(bundle arg0) {
    super.oncreate(arg0);
    initview();
    inittabline();
  }
 
  private void initview() {
    setcontentview(r.layout.activity_main);
    pages = new arraylist<fragment>();
    titles = new arraylist<textview>();
 
    pager = (viewpager) findviewbyid(id.main_viewpager);
    title1 = (textview) findviewbyid(id.main_tab1);
    title2 = (textview) findviewbyid(id.main_tab2);
    title3 = (textview) findviewbyid(id.main_tab3);
 
    title1.setonclicklistener(this);
    title2.setonclicklistener(this);
    title3.setonclicklistener(this);
 
    titles.add(title1);
    titles.add(title2);
    titles.add(title3);
 
    // create new fragments
    pages.add(new myfragment("tab1", color.blue));
    pages.add(new myfragment("tab2", color.red));
    pages.add(new myfragment("tab3", color.cyan));
 
    // set adapter
    pager.setadapter(new myadapter(getsupportfragmentmanager()));
    pager.setonpagechangelistener(this);
    pager.setcurrentitem(0);
    titles.get(0).setselected(true);
  }
 
  // tablines
  private void inittabline() {
    tabline = findviewbyid(id.main_tab_line);
    display display = getwindow().getwindowmanager().getdefaultdisplay();
    displaymetrics outmetrics = new displaymetrics();
    display.getmetrics(outmetrics);
    mtablinewidth = outmetrics.widthpixels / 3;
    layoutparams lp = tabline.getlayoutparams();
    lp.width = mtablinewidth;
    tabline.setlayoutparams(lp);
  }
 
  @override
  public void onclick(view v) {
    switch (v.getid()) {
    case id.main_tab1:
      pager.setcurrentitem(0, true);
      break;
    case id.main_tab2:
      pager.setcurrentitem(1, true);
      break;
    case id.main_tab3:
      pager.setcurrentitem(2, true);
      break;
    default:
      break;
    }
  }
 
  @override
  public void onpagescrollstatechanged(int arg0) {
 
  }
 
  @override
  public void onpagescrolled(int arg0, float arg1, int arg2) {
    linearlayout.layoutparams lp = (android.widget.linearlayout.layoutparams) tabline.getlayoutparams();
    lp.leftmargin = (int) ((arg0 + arg1) * mtablinewidth);
    tabline.setlayoutparams(lp);
  }
 
  @override
  public void onpageselected(int arg0) {
    // set titles
    for (int i = 0; i < titles.size(); i++) {
      if (arg0 == i) {
        titles.get(i).setselected(true);
      } else {
        titles.get(i).setselected(false);
      }
    }
  }
 
  // fragment
  private class myfragment extends fragment {
 
    private string text;
    private int color;
 
    public myfragment(string text, int color) {
      this.text = text;
      this.color = color;
    }
 
    @override
    public view oncreateview(layoutinflater inflater, @nullable viewgroup container, @nullable bundle savedinstancestate) {
      textview tv = new textview(mainactivity.this);
      tv.setbackgroundcolor(color);
      tv.settext(text);
      return tv;
    }
  }
 
  // adapter
  private class myadapter extends fragmentpageradapter {
    public myadapter(fragmentmanager fm) {
      super(fm);
    }
 
    @override
    public int getcount() {
      return pages.size();
    }
 
    @override
    public fragment getitem(int arg0) {
      return pages.get(arg0);
    }
  }
}

代码中通过实现onpagechangelistener接口手动设置了页面指示条的位置。