使用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。