1. 程式人生 > >TabLayou+fragment+viewpager實現滑動切換頁面

TabLayou+fragment+viewpager實現滑動切換頁面

在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();
    }
}

效果圖

這裡寫圖片描述