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