使用PagerSlidingTabStrip ViewPager SwipeRefreshLayout打造豆瓣App的效果

打造效果

先简单介绍下三个所使用的开源库。

ViewPager

ViewPager是v4包里提供的，可以通过PagerAdapter根据左右的滑动产生不同的page。
PagerAdapter分为FragmentPagerAdapter, FragmentStatePagerAdapter。
唯一的区别是在对不再需要的fragment时所采用的处理方法不同。
前者选择detach，后者选择remove并保存状态。
ViewPager的使用方法类似ListView, 都是使用Adapter来提供内容。而ListView中getItem返回的是View, 而ViewPager返回的是Fragment。

使用方法

ViewPager pager = (ViewPager)findViewById(R.id.pager);
pager.setAdapter(new PagerAdapter(getSupportFragmentManager()));

// 继承PagerAdapter 必须实现的方法有getCount, 返回列表的总数。 getItem，即根据position返回对应的fragment。
class PagerAdapter extends FragmentPagerAdapter {
    public Fragment getItem(int position) {
        return new Fragment();
    }

    public int getCount(){
        return NUM_OF_PAGES;
    }
}

PagerSlidingTabStrip

github地址
作用是根据ViewPager生成对应的tab 在页面切换时有相应的动画效果
其中TestAdapter是FragmentPagerAdapter或FragmentStatePagerAdapter的子类。

使用方法

// Initialize the ViewPager and set an adapter
 ViewPager pager = (ViewPager) findViewById(R.id.pager);
 pager.setAdapter(new TestAdapter(getSupportFragmentManager()));

 // Bind the tabs to the ViewPager
 PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
 tabs.setViewPager(pager);

SwipeRefreshLayout

SwipeRefreshLayout同样是v4包里的，它提供了下拉刷新的功能以及对应的动画效果，使用起来非常简便。但是其中只能包含一个View，且该View必须是可滑动的（不可滑动的话动画显示有bug），如ListView。

使用方法

在xml文件中添加android.support.v4.widget.SwipeRefreshLayout

<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/refresh_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</android.support.v4.widget.SwipeRefreshLayout>

下拉时若要触发事件， 需实现SwipeRefreshLayout.OnRefreshListener，重写onRefresh方法。

打造豆瓣App效果

整个项目UI有三个文件，为MainActivity, ListRefreshFragment, PagerFragment。

PagerFragment

PagerFragment为其中最简单的，仅含有一个TextView。
在最初创建的时候，会从getArguments()取出参数填充TextView。
arguments会在configuration changes后被自动保存，可参考该问题。

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View pager = inflater.inflate(R.layout.pager_fragment, container, false);
        tv = (TextView) pager.findViewById(R.id.tv);
        Bundle bundle = getArguments();
        pageNum = bundle.getInt("page_num");
        tv.setText("" + pageNum);

        return pager;
    }

ListRefreshFragment

ListRefreshFragment布局文件

<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/refresh_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.kay.douban.ListRefreshFragment">

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

</android.support.v4.widget.SwipeRefreshLayout>

对SwipeRefreshLayout进行配置

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    mRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.refresh_layout);
    // fragment implements SwipeRefreshLayout.OnRefreshListener
    mRefreshLayout.setOnRefreshListener(this);
    // 设置动画颜色
    mRefreshLayout.setColorSchemeResources(
        android.R.color.holo_blue_bright,
        android.R.color.holo_green_light,
        android.R.color.holo_orange_light,
        android.R.color.holo_red_light);
}

// 下拉时显示动画3秒
// 一般在onRefresh()里面执行更新操作
public void onRefresh() {
   mRefreshLayout.setRefreshing(true);
   new Handler().postDelayed(new Runnable() {
       public void run() {
           // 通过setRefreshing(false)使动画停止
            mRefreshLayout.setRefreshing(false);
       }
    }, 3000);
}

MainActivity

布局文件

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

    // 配置tab的颜色 字体大小等样式
    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/pager_tabs"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:textColor="#ff8f8f8f"
        android:textSize = "18sp"
        android:background="#ff2d2d2d"
        app:pstsShouldExpand="true"
        app:pstsIndicatorHeight="4dp"
        app:pstsIndicatorColor="#ff00cd79"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

在Activity中主要是配置PagerSlidingTabStrip以及FragmentPagerAdapter。

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        pagerTab = (PagerSlidingTabStrip) findViewById(R.id.pager_tabs);
        pager = (ViewPager) findViewById(R.id.pager);
        pager.setOffscreenPageLimit(3);
        pager.setAdapter(new PagerAdapter(getSupportFragmentManager()));
        pagerTab.setViewPager(pager);
}

 private class PagerAdapter extends FragmentPagerAdapter {

        private final String[] TITLES = getResources().getStringArray(R.array.pager_name);

        private PagerAdapter(FragmentManager fm) {
            super(fm);
        }

        // 使tab可以显示对应fragment的title
        @Override
        public CharSequence getPageTitle(int position) {
            return TITLES[position];
        }

        // 返回对应position的fragment 设置pagerFragment的arguments使得该fragment可以在TextView中显示
        @Override
        public Fragment getItem(int position) {
            Bundle bundle = new Bundle();
            Fragment pagerFragment;
            if (position == 0) {
                pagerFragment = new ListRefreshFragment();
            } else {
                pagerFragment = new PagerFragment();
            }
            bundle.putInt("page_num", position);
            pagerFragment.setArguments(bundle);
            return pagerFragment;

        }

        @Override
        public int getCount() {
            return NUM_PAGES;
        }
 }

github地址
关于各种开源库的导入，使用gradle。可参考build.gradle里的dependencies。