TabLayou+fragment+viewpager實現滑動切換頁面
阿新 • • 發佈:2019-02-18
在android studio中新增依賴
com.android.support:design:23.2.1
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);
}
ViewPager與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();
}
}