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

据说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实现页面滑动效果的例子:

首先继承FragmentActivity,
为ViewPager提供展示所需的Fragment和FragmentPagerAdapter:
Fragment来指定页面的布局以及功能

// 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有多少页面以及那个位置需要显示哪个页面:

// 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,指定页面改变时需要做什么其他操作:

@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); 
    } 
  } 
} 

完整的代码:

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接口手动设置了页面指示条的位置。

您可能感兴趣的文章:android 中viewpager+fragment仿微信底部TAG完美渐变Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果Android App中使用ViewPager+Fragment实现滑动切换效果Android App中ViewPager与Fragment结合的一些问题解决Android中ViewPager获取当前显示的FragmentAndroid基于ViewPager Fragment实现选项卡Android中ViewPager实现滑动指示条及与Fragment的配合Android实现Tab布局的4种方式（Fragment+TabpageIndicator+ViewPager）Android中ViewPager和Fragment的使用Android仿微信Viewpager-Fragment惰性加载（lazy-loading）