Android使用TabLayou+fragment+viewpager實現(xiàn)滑動切換頁面效果

更新時間：2017年05月17日 09:50:18 作者：正在奮斗中的菜鳥

這篇文章主要介紹了Android使用TabLayou+fragment+viewpager實現(xiàn)滑動切換頁面效果,需要的朋友可以參考下

TabLayou 主要實現(xiàn)的是標題頭的滑動這個控件類似于 ScrollView

XML中的布局

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  >
  <android.support.design.widget.TabLayout
   android:id="@+id/homefragment_tablelayouts"
   android:layout_width="0dp"
   android:layout_height="30dp"
   app:tabIndicatorHeight="2dp"
   android:layout_weight="1"
   app:tabIndicatorColor="@color/colorred"
   app:tabSelectedTextColor="#000000"
   app:tabMode="scrollable"
   >
  </android.support.design.widget.TabLayout>
  <ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/add_channel_titlbar_new"
   />
 </LinearLayout>
 <android.support.v4.view.ViewPager
  android:layout_weight="1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:id="@+id/homefragment_vp"
  ></android.support.v4.view.ViewPager>

以下是代碼的實現(xiàn)

//定義一個方法 
 public void getVpTitleData() {
 // 找到 TabLayou 控件
  TabLayout mTabLayout= (TabLayout) getView().findViewById(R.id.homefragment_tablelayouts);
  // 找到 ViewPager 控件
  ViewPager mViewPager= (ViewPager) getView().findViewById(R.id.homefragment_vp);
  //定義 title 集合 來存儲 解析的data數(shù)據(jù)
  listtitle = new ArrayList<>();
  listtitle .add("頭條");
  listtitle .add("社會");
  listtitle .add("國內(nèi)");
  listtitle .add("國際");
  listtitle .add("明星");
  listtitle .add("娛樂");
  listtitle .add("軍事");
  listtitle .add("財經(jīng)");
  listtitle .add("時尚");
  listtitle .add("八卦");
  //遍歷 listtitle 集合 將title 添加經(jīng) TabLayou z中
  for (int i = 0; i <listtitle.size() ; i++) {
   mTabLayout.addTab(mTabLayout.newTab().setText(listtitle.get(i)));
  }
  //創(chuàng)建集合 循環(huán)添加創(chuàng)建的Fragment
  listfragment = new ArrayList<>();
  for (int i = 0; i <date.size() ; i++) {
   BeiJingFragment mjingFragment = new BeiJingFragment();
   listfragment.add(mjingFragment);
  }
  HomeFragmentVPFragmentAdapter mAdapter = new HomeFragmentVPFragmentAdapter(getFragmentManager(),listfragment,listtitle);
  //給ViewPager設置適配器
  mViewPager.setAdapter(mAdapter);
  //將TabLayout和ViewPager關聯(lián)起來。
  mTabLayout.setupWithViewPager(mViewPager);
  //給TabLayout設置適配器
  mTabLayout.setTabsFromPagerAdapter(mAdapter);
 }

ViewPafer與Fragment的適配器

public class HomeFragmentVPFragmentAdapter extends FragmentStatePagerAdapter {
 List<Fragment> listfragment;
 List<String> listtitle;
 public HomeFragmentVPFragmentAdapter(FragmentManager fm, List<Fragment> listfragment, List<String> listtitle) {
  super(fm);
  this.listfragment = listfragment;
  this.listtitle = listtitle;
 }
 @Override
 public CharSequence getPageTitle(int position) {
  return listtitle.get(position);
 }
 @Override
 public Fragment getItem(int position) {
  return listfragment.get(position);
 }
 @Override
 public int getCount() {
  return listfragment.size();
 }
}

這里寫圖片描述