Android App在ViewPager中使用Fragment的實(shí)例講解

更新時(shí)間：2016年03月23日 16:16:47 作者：hzy3774

這篇文章主要介紹了Android App在ViewPager中使用Fragment的實(shí)例講解,ViewPager組件主要被用來(lái)制作滑動(dòng)切換效果,需要的朋友可以參考下

據(jù)說(shuō)Android最推薦的是在ViewPager中使用FragMent，即ViewPager中的頁(yè)面不像前面那樣用LayoutInflater直接從布局文件加載，而是一個(gè)個(gè)Fragment。注意這里的Fragment

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

使用v4包里的Fragment的Activity必須繼承自FragmentActivity。

其實(shí)使用Fragment與前面不使用Fragment非常類似：

第一步在主布局文件里放一個(gè)ViewPager組件

第二步為每個(gè)頁(yè)面建立布局文件，把界面寫(xiě)好

第三步為每個(gè)頁(yè)面新建Fragment類，并加載布局文件中的界面

第四部為ViewPager設(shè)定Adapter，只不過(guò)這里的Adapter不是PagerAdapter，而是換成

FragmentPagerAdapter,實(shí)現(xiàn)兩個(gè)方法：

getCount()：返回頁(yè)面數(shù)目

getItem(position)：返回position位置的Fragment。

下面來(lái)看一個(gè)ViewPager與Fragment實(shí)現(xiàn)頁(yè)面滑動(dòng)效果的例子:

首先繼承FragmentActivity,
為ViewPager提供展示所需的Fragment和FragmentPagerAdapter:
Fragment來(lái)指定頁(yè)面的布局以及功能

// 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有多少頁(yè)面以及那個(gè)位置需要顯示哪個(gè)頁(yè)面:

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

設(shè)置OnPageChangeListener,指定頁(yè)面改變時(shí)需要做什么其他操作:

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

代碼中通過(guò)實(shí)現(xiàn)OnPageChangeListener接口手動(dòng)設(shè)置了頁(yè)面指示條的位置。

您可能感興趣的文章: