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

本文目標：實現滑動切換頁面

首先，Tablayout控件就需要添加design library，在android studio中添加依賴 
compile ‘com.android.support:design:23.2.1’

或者直接：File-->Project structure-->app-->Dependencies中單擊加號添加

com.android.support:design:23.2.1

線性布局中布局文件為：

<android.support.design.widget.TabLayout
    　  android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
</android.support.v4.view.ViewPager>

需要Fragment的布局為：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical">

    <ListView
        android:id="@+id/fragment_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>

</LinearLayout>

Fragment01的代碼為：

public class Fragment01 extends Fragment {

    ListView mListView;
    public Fragment01() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) ｛
        View v = inflater.inflate(R.layout.fragment_fragment01, container, false);
        mListView = (ListView) v.findViewById(R.id.fragment_01_list);
        return v;
    }

以同樣的方式創建其余的Fragment。

 

接着定義ViewPager中的適配器:MyAdapter繼承自FragmentPagerAdapter:

適配器中有兩個集合，分別存放Fragment和tab的標題：

public class MyAdapter extends FragmentPagerAdapter {
    ArrayList<Fragment> lists;
    ArrayList<String> tabs;

    public CommunityPageAdapter(FragmentManager fm) {
        super(fm);
    }

    public void setData(ArrayList<Fragment> lists) {
        this.lists = lists;
    }

    public void setTabs(ArrayList<String> tabs) {
        this.tabs = tabs;
    }

    @Override
    public Fragment getItem(int position) {
        return lists == null ? null : lists.get(position);
    }

    @Override
    public int getCount() {
        return tabs == null ? 0 : tabs.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabs == null ? null : tabs.get(position);
    }
}

使用時需要添加兩個集合

代碼為：

MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager());

        ArrayList<Fragment> lists = new ArrayList<Fragment>();
        lists.add(new Fragment01());
        lists.add(new Fragment02());
        lists.add(new Fragment03());
        myAdapter.setData(lists);

        ArrayList<String> tabs = new ArrayList<String>();
        tabs.add("01");
        tabs.add("02");
        tabs.add("03");
        myAdapter.setTabs(tabs);

適配器和數據都有了，就可以放入viewpager並且和Tablayout進行關聯了：

TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.setAdapter(adapter);
        //關聯viewPager和TabLayout
        tabLayout.setupWithViewPager(viewPager);

到現在為止，已經實現了滑動切換頁面的效果。

注：viewPager會預加載下一頁，會占用較大的內存尤其是在listview中請求網絡圖片的時候（留下一個坑，以后補）。

      TabLayout中有許多的屬性，基本見名知意，通過app:來使用，例如：

<android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="#78ffffff"
        app:tabBackground="@color/colorPrimary"
        app:tabMinWidth="100dp"
        app:tabIndicatorHeight="2dp"
        app:tabIndicatorColor="#ffffff"
        app:tabGravity="center"
        app:tabMode="scrollable"
        app:tabMaxWidth="100dp"
        app:tabSelectedTextColor="#ffffff">
</android.support.design.widget.TabLayout>

想要知道更多的屬性，可以參考：http://www.jianshu.com/p/2b2bb6be83a8