本文参考一位薄荷程序媛Kay Wu的博客
一.先看看初次模仿的UI效果图，整个练习的代码在github
二.通过这次简单的UI模仿练习可以学习到哪些技术点的简单使用
- 1.ViewPager
- 2.PagerSlidingTabStrip
- 3.SwipeRefreshLayout
三.先来看看项目的结构：
四.来看看这技术点的简单介绍
--ViewPager
ViewPager是v4包里提供的，可以通过PagerAdapter根据左右的滑动产生不同的page。PagerAdapter分为FragmentPagerAdapter, FragmentStatePagerAdapter。
如何选择PagerAdapter呢？FragmentPagerAdapter：在同级屏幕(sibling screen)只有少量的几个固定页面时， 使用这个最好。FragmentStatePagerAdapter：当根据对象集的数量来划分页面， 即一开始页面的数量未确定时， 使用这个最好。 当用户切换到其他页面时， fragment会被销毁来降低内存消耗。
ViewPager的使用方法类似ListView, 都是使用Adapter来提供内容。而ListView中getItem( )返回的是View对象, 而PagerAdapter中的getItem( )返回的是Fragment对象。
--PagerSlidingTabStrip
这是一个与ViewPager的各页面进行交互的指示器，github在这里
--SwipeRefreshLayout
SwipeRefreshLayout是在v4包里的，它提供了下拉刷新的功能以及对应的动画效果，使用起来非常简便。但是其中只能包含一个View，且该View必须是可滑动的（不可滑动的话动画显示有bug），如ListView。
五.制作这个简单UI的执行顺序
在MainActivity中搞一个ViewPager出来，然后在ViewPager中第一个page里面的Fragment中添加一个ListView，最后两页都是Fragment里面嵌套着一个TextView。在MainActivity中套上PagerSlidingTabStrip作为一个Tab。最后在ViewPager中第一个page里面的Fragment（带有一个ListView）套上SwipeRefreshLayout来做一个下拉刷新。
六.逐个模块来实现
- 1先在MainActivity弄个ViewPager：
MainActivity中的代码
private static int PAGE_NUM = 3;
private ViewPager mViewPager;
@Overrideprotected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.viewPager);
}
因为ViewPager需要PagerAdapter来做适配器，所以这步需要自定义一个PagerAdapter，上面说过了，FragmentPagerAdapter适合少量的几个固定页面，所以这里的PagerAdapter就选择继承FragmentPagerAdapter。
private class SlidePageAdapter extends FragmentPagerAdapter{
public SlidePageAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment;
switch (position){
case 0:
return fragment = new ListRefreshFragment();
case 1:
return fragment = new Fragment2();
case 2:
return fragment = new Fragment3();
default:
return new Fragment();
}
}
@Override
public int getCount() {
return PAGE_NUM;
}
}
于是乎就可以在onCreate( )中添加自定义的SlidePageAdapter了。
private ViewPager mViewPager;
@Overrideprotected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.viewPager);
mViewPager.setAdapter(new SlidePageAdapter(getSupportFragmentManager()));
}
- 2实现各个ViewPager页面上的Fragment
带有ListView功能并且带有下拉刷新的ListRefreshFragment
private ListView lv;
private TextView textView;
private SwipeRefreshLayout mRefreshLayout;
@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.list_fragment,container,false);
lv = (ListView) rootView.findViewById(R.id.lv);
lv.setAdapter(new ArrayAdapter<String>(getActivity(),android.R.layout.simple_list_item_1,initDatas()));
return rootView;
}
private List<String> initDatas() {
List<String> datas = new ArrayList<>();
for (int i = 0; i < 20; i++){
datas.add(" " + i);
}
return datas;
}
剩下的2个Fragment基本一样
public class Fragment2 extends Fragment {
private TextView textView;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment2,container,false);
textView = (TextView) rootView.findViewById(R.id.tv);
textView.setText("2");
return rootView;
}
}
- 3使用PagerSlidingTabStrip在MainActivity中添加头部的页面指示器，此时要复写FragmentPagerAdapter的getPageTitle( )方法，否则程序会崩溃
private PagerSlidingTabStrip tabs;
@Overrideprotected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.viewPager);
mViewPager.setAdapter(new SlidePageAdapter(getSupportFragmentManager()));
tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(mViewPager);
}
private class SlidePageAdapter extends FragmentPagerAdapter{
private final String[] TITLES = getResources().getStringArray(R.array.title_array);
public SlidePageAdapter(FragmentManager fm) {
super(fm);
}
@Override
public CharSequence getPageTitle(int position) {
return TITLES[position];
}
@Override
public Fragment getItem(int position) {
...........
}
@Override
public int getCount() {
return PAGE_NUM;
}
}
- 4使用SwipeRefreshLayout来为首页添加一个下拉刷新功能
private SwipeRefreshLayout mRefreshLayout;
private static final int REFRESH_TIME = 3000;
@Nullable
@Overridepublic
View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.list_fragment,container,false);
lv = (ListView) rootView.findViewById(R.id.lv);
lv.setAdapter(new ArrayAdapter<String>getActivity(),android.R.layout.simple_list_item_1,initDatas()));
mRefreshLayout = (SwipeRefreshLayout) (SwipeRefreshLayout) rootView.findViewById(R.id.refrsh_layout);
mRefreshLayout.setColorSchemeResources(
android.R.color.holo_blue_bright,
android.R.color.holo_green_light,
android.R.color.holo_red_light
);
mRefreshLayout.setOnRefreshListener(this);
return rootView;
}
@Override
public void onRefresh() {
mRefreshLayout.setRefreshing(true);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
mRefreshLayout.setRefreshing(false);
Toast.makeText(getContext(), "已完成刷新!", Toast.LENGTH_SHORT).show();
}
},REFRESH_TIME);
}
