Android使用TabLayou+fragment+viewpager實現滑動切換頁面效果

2019-12-12 02:52:54

字體：大中小

來源：轉載

供稿：網友

TabLayou 主要實現的是標題頭的滑動這個控件類似于 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>

以下是代碼的實現

//定義一個方法  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數據  listtitle = new ArrayList<>();  listtitle .add("頭條");  listtitle .add("社會");  listtitle .add("國內");  listtitle .add("國際");  listtitle .add("明星");  listtitle .add("娛樂");  listtitle .add("軍事");  listtitle .add("財經");  listtitle .add("時尚");  listtitle .add("八卦");  //遍歷 listtitle 集合 將title 添加經 TabLayou z中  for (int i = 0; i <listtitle.size() ; i++) {   mTabLayout.addTab(mTabLayout.newTab().setText(listtitle.get(i)));  }  //創建集合 循環添加創建的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關聯起來。  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(); }}

這里寫圖片描述