使用ViewPager和FragmentPagerAdapter实现Tab

前面我们分别利用ViewPager和Fragment实现了Tab效果。但是使用Fragment实现的Tab不能够左右滑动。如果我们既想使用Fragment又想让Tab能够滑动，那么怎么办呢？这就是今天的方法，利用ViewPager和FragmentPagerAdapter来实现Tab。

没看过前两篇文章的读者可以点击下面的地址：

http://www.cnblogs.com/fuly550871915/p/4850056.html

废话不多说了，效果还是之前的效果。由于有些代码我们已经写过了。我们复用《使用Fragment实现Tab》这篇文章里的代码，保留所有的东西，只需要修改两个地方即可。

一、修改主布局

只需要把activity_main.xml的布局中间的改为ViewPager即可。代码如下：

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     >
 7     
 8     <include layout="@layout/top"/>
 9 
10     <android.support.v4.view.ViewPager
11         android:id="@+id/id_vp"
12         android:layout_width="match_parent"
13         android:layout_height="0dp"
14         android:layout_weight="1">
15         
16     </android.support.v4.view.ViewPager>
17     
18     <include layout="@layout/bottum"/>"
19 
20 </LinearLayout>

二、修改MainAcitivty

其实方法跟第一篇文章《使用ViewPager实现Tab》类似，只不过是将适配器改为了FragmentPagerAdapter而已，那么相应的数据集里面的泛型也就应该是Fragment实例了。总结，如果前两篇文章你认真看了并做了，下面的代码还是挺简单的。具体如下：

  1 import java.util.ArrayList;
  2 import java.util.List;
  3 
  4 import android.os.Bundle;
  5 import android.app.Activity;
  6 import android.support.v4.app.Fragment;
  7 import android.support.v4.app.FragmentActivity;
  8 import android.support.v4.app.FragmentManager;
  9 import android.support.v4.app.FragmentPagerAdapter;
 10 import android.support.v4.view.ViewPager;
 11 import android.support.v4.view.ViewPager.OnPageChangeListener;
 12 import android.view.Menu;
 13 import android.view.View;
 14 import android.view.View.OnClickListener;
 15 import android.widget.ImageButton;
 16 import android.widget.LinearLayout;
 17 
 18 public class MainActivity extends FragmentActivity implements OnClickListener{
 19 
 20     private ImageButton himg;
 21     private ImageButton simg;
 22     private ImageButton uimg;
 23     private ImageButton yimg;
 24     
 25     
 26     private Fragment hfrag;
 27     private Fragment sfrag;
 28     private Fragment ufrag;
 29     private Fragment yfrag;
 30     
 31     private LinearLayout hlay;
 32     private LinearLayout slay;
 33     private LinearLayout ulay;
 34     private LinearLayout ylay;
 35     
 36     private ViewPager vp;
 37     private FragmentPagerAdapter mAdapter;//适配器
 38     private List<Fragment> mDatas = new ArrayList<Fragment>();
 39     
 40     
 41     protected void onCreate(Bundle savedInstanceState) {
 42         super.onCreate(savedInstanceState);
 43         setContentView(R.layout.activity_main);
 44         
 45         initView();//依旧是初始化
 46         
 47         initEvent();//初始化事件
 48     }
 49 
 50 
 51     private void initEvent() {
 52         //设定点击事件
 53         
 54         hlay.setOnClickListener(this);
 55         slay.setOnClickListener(this);
 56         ulay.setOnClickListener(this);
 57         ylay.setOnClickListener(this);
 58         
 59         vp.setOnPageChangeListener(new OnPageChangeListener() {
 60     
 61             public void onPageSelected(int arg0) {
 62                 
 63                 resetImg();
 64                 int i = vp.getCurrentItem();
 65                 
 66                 setTab(i);
 67                 
 68             }
 69             
 70             
 71             public void onPageScrolled(int arg0, float arg1, int arg2) {
 72                 
 73                 
 74             }
 75             
 76     
 77             public void onPageScrollStateChanged(int arg0) {
 78         
 79                 
 80             }
 81         });
 82         
 83     }
 84 
 85 
 86     private void initView() {
 87                 //获得按钮
 88                 himg = (ImageButton) findViewById(R.id.ibtn_hudie);
 89                 simg = (ImageButton) findViewById(R.id.ibtn_set);
 90                 uimg = (ImageButton) findViewById(R.id.ibtn_user);
 91                 yimg = (ImageButton) findViewById(R.id.ibtn_yang);
 92                 
 93                 //获得底部的线性布局
 94                 hlay = (LinearLayout) findViewById(R.id.lay_hudie);
 95                 slay = (LinearLayout) findViewById(R.id.lay_set);
 96                 ulay = (LinearLayout) findViewById(R.id.lay_user);
 97                 ylay = (LinearLayout) findViewById(R.id.lay_yang);
 98                 
 99                 //获取fragment
100                 hfrag = new HFragment();
101                 sfrag = new SFragment();
102                 ufrag = new UFragment();
103                 yfrag = new YFragment();
104                 
105                 //加入数据集
106                 mDatas.add(hfrag);
107                 mDatas.add(sfrag);
108                 mDatas.add(ufrag);
109                 mDatas.add(yfrag);
110                 
111                 vp = (ViewPager) findViewById(R.id.id_vp);
112                 
113                 mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
114                     
115                     public int getCount() {
116                         
117                         return mDatas.size();
118                     }
119                     
120                     public Fragment getItem(int position) {
121                         
122                         return mDatas.get(position);
123                     }
124                 };
125                 
126                 
127                 vp.setAdapter(mAdapter);
128         
129     }
130 
131     public void onClick(View v) {
132         
133     resetImg();//将按钮复位
134         
135         switch(v.getId()){
136         
137         case R.id.lay_hudie:
138             setSelected(0);
139             break;
140         case R.id.lay_set:
141             setSelected(1);
142             break;
143         case R.id.lay_user:
144             setSelected(2);
145             break;
146         case R.id.lay_yang:
147             setSelected(3);
148             break;
149         }    
150     }
151 
152     private void setSelected(int i) {
153         //需要将按钮变亮，且需要切换fragment的状体
154                 
155                 setTab(i);
156             vp.setCurrentItem(i);//设定当前的item    
157         
158     }
159 
160     //该方法用来设定按钮的高亮
161     private void setTab(int i){
162         switch(i){
163         case 0:
164             himg.setImageResource(R.drawable.hudie2);
165             break;
166         case 1:
167             simg.setImageResource(R.drawable.set2);
168             break;
169         case 2:
170             uimg.setImageResource(R.drawable.user2);
171             break;
172         case 3:
173             yimg.setImageResource(R.drawable.yang2);
174             break;
175         }
176     }
177 
178     private void resetImg() {
179         
180         himg.setImageResource(R.drawable.hudie);
181         simg.setImageResource(R.drawable.set);
182         uimg.setImageResource(R.drawable.user);
183         yimg.setImageResource(R.drawable.yang);
184         
185     }
186 }

好了，至此完成了所有的代码，快运行试试，是不是又可以左右滑动了。

三、总结

如果你的app中不要求具有左右滑动的功能，建议使用Fragment实现Tab。如果想有滑动效果的话，建议使用ViewPager和FragmenPagerAdapter来实现Tab。总之，使用Fragment可以大大提高我们的代码质量。

posted on 2015-09-30 18:36 fuly 阅读(2835) 评论(0) 编辑收藏举报