打造豆瓣App

使用 ViewPager, PagerSlidingTabStrip, SwipeRefreshLayout打造豆瓣App的效果。
最终效果

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

ViewPager

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

###使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
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的子类。

使用方法

1
2
3
4
5
6
7
// 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

1
2
3
4
5
6
7
8
9
10
11
12
<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后被自动保存,可参考该问题

1
2
3
4
5
6
7
8
9
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布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
<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进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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

布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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。