在前一期中，我们做了悬浮头部的两个tab切换和下拉刷新效果，后来项目中要求改成三个tab，当时就能估量了一下，如果从之前的改，也不是不可以，但是要互相记住的状态就太多了，很容易出现错误。就决定重新实现一下这个效果，为此先写了一个demo，这期间项目都已经又更新了两个版本了。demo还木有变成文章。
之前的版本中是采用了一个可以下拉刷新的listview，之后在listview中添加了两个头部，并且在该布局上的上面用了一个一模一样的切换tab，如果没有看过前面版本的，可以看看前一个版本，Listview多Tab上滑悬浮。
基于上述思路我们先来看看页面布局：main_activity
<&＃63;xml version="1.0" encoding="utf-8"&＃63;>
页面采用了两层，后面一层为Viewpager，前面为悬浮头与tab切换，在这大家应该都想到了会怎么样实现，Viewpager中添加已经fragment，每个fragment里面加入一个可下拉刷新的Listview，根据ListView的滑动来控制前一帧页面的位置。
来看看页面代码吧，MainAcitivity.java
public class MainActivity extends ActionBarActivity implements OnPageChangeListener, ScrollTabHolder {
private PagerSlidingTabStrip tabs;
private ViewPager viewPager;
private SlidingPagerAdapter adapter;
private LinearLayout header;
private int headerHeight;
private int headerTranslationDis;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
getHeaderHeight();
findViews();
setupPager();
setupTabs();
}
private void findViews() {
tabs = (PagerSlidingTabStrip) findViewById(R.id.show_tabs);
viewPager = (ViewPager) findViewById(R.id.pager);
header = (LinearLayout) findViewById(R.id.header);
}
private void getHeaderHeight() {
headerHeight = getResources().getDimensionPixelSize(R.dimen.max_header_height);
headerTranslatiOnDis= -getResources().getDimensionPixelSize(R.dimen.header_offset_dis);
}
private void setupPager() {
adapter = new SlidingPagerAdapter(getSupportFragmentManager(), this, viewPager);
adapter.setTabHolderScrollingListener(this);//控制页面上滑
viewPager.setOffscreenPageLimit(adapter.getCacheCount());
viewPager.setAdapter(adapter);
viewPager.setOnPageChangeListener(this);
}
private void setupTabs() {
tabs.setShouldExpand(true);
tabs.setIndicatorColorResource(R.color.color_purple_bd6aff);
tabs.setUnderlineColorResource(R.color.color_purple_bd6aff);
tabs.setCheckedTextColorResource(R.color.color_purple_bd6aff);
tabs.setViewPager(viewPager);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
tabs.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
@Override
public void onPageSelected(int position) {
tabs.onPageSelected(position);
reLocation = true;
SparseArrayCompat scrollTabHolders = adapter.getScrollTabHolders();
ScrollTabHolder currentHolder = scrollTabHolders.valueAt(position);
if (NEED_RELAYOUT) {
currentHolder.adjustScroll((int) (header.getHeight() + headerTop));// 修正滚出去的偏移量
} else {
currentHolder.adjustScroll((int) (header.getHeight() + ViewHelper.getTranslationY(header)));// 修正滚出去的偏移量
}
}
@Override
public void onPageScrollStateChanged(int state) {
tabs.onPageScrollStateChanged(state);
}
@Override
public void adjustScroll(int scrollHeight) {
}
private boolean reLocation = false;
private int headerScrollSize = 0;
public static final boolean NEED_RELAYOUT = Integer.valueOf(Build.VERSION.SDK).intValue()
public class Tab1ListFragment extends ScrollTabHolderFragment {
private PullToRefreshListView listView;
private View placeHolderView;
private ArrayAdapter adapter;
private ArrayList listItems;
private Handler handler;
public Tab1ListFragment() {
this.setFragmentId(PageAdapterTab.PAGE_TAB1.fragmentId);
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.page_tab_fragment_layout, container, false);
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
findViews();
initListView();
}
@SuppressLint("InflateParams")
private void findViews() {
handler = new Handler(Looper.getMainLooper());
listView = (PullToRefreshListView) getView().findViewById(R.id.page_tab_listview);
}
private void initListView() {
setListViewListener();
listViewAddHeader();
listViewLoadData();
}
private void setListViewListener() {
listView.setOnRefreshListener(new OnRefreshListener2() {
@Override
public void onPullDownToRefresh(PullToRefreshBase refreshView) {
loadNews();
}
@Override
public void onPullUpToRefresh(PullToRefreshBase refreshView) {
loadOlds();
}
});
listView.setOnScrollListener(new OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
if (scrollTabHolder != null) {
scrollTabHolder.onScroll(view, firstVisibleItem, visibleItemCount, totalItemCount, getFragmentId());
}
}
});
listView.setOnHeaderScrollListener(new OnHeaderScrollListener() {
@Override
public void onHeaderScroll(boolean isRefreashing, boolean istop, int value) {
if (scrollTabHolder != null && istop) {
scrollTabHolder.onHeaderScroll(isRefreashing, value, getFragmentId());
}
}
});
}
private void listViewAddHeader() {
placeHolderView = new LinearLayout(getActivity());
AbsListView.LayoutParams params = new LayoutParams(AbsListView.LayoutParams.MATCH_PARENT, getResources()
.getDimensionPixelSize(R.dimen.max_header_height));
placeHolderView.setLayoutParams(params);
listView.getRefreshableView().addHeaderView(placeHolderView);
}
protected void listViewLoadData() {
listItems = new ArrayList();
for (int i = 1; i <= 50; i++) {
listItems.add("currnet page: " + (getFragmentId() + 1) + " item --" + i);
}
adapter = new ArrayAdapter(getActivity(), R.layout.list_item, android.R.id.text1, listItems);
listView.setAdapter(adapter);
loadNews();
}
/**
* 下拉清空旧的数据
*/
private void loadNews() {
handler.postDelayed(new Runnable() {// 模拟远程获取数据
@Override
public void run() {
stopRefresh();
// listItems.clear();
// for (int i = 1; i <= 50; i++) {
// listItems.add("currnet page: " + (getFragmentId() +
// 1) + " item --" + i);
// }
// notifyAdpterdataChanged();
}
}, 300);
}
private void notifyAdpterdataChanged() {
if (adapter != null) {
adapter.notifyDataSetChanged();
}
}
protected void loadOlds() {
handler.postDelayed(new Runnable() {// 模拟远程获取数据
@Override
public void run() {
stopRefresh();
int size = listItems.size() + 1;
for (int i = size; i = 2) {
return;
}
//Log.d(getTag(), "scrollHeight:" + scrollHeight);
listView.getRefreshableView().setSelectionFromTop(2, scrollHeight);
// Log.d(getTag(), "getScrollY:" + getScrollY(listView.getRefreshableView()));
// handler.postDelayed(new Runnable() {
//
// @Override
// public void run() {
// Log.d(getTag(), "getScrollY:" + getScrollY(listView.getRefreshableView()));
// }
// }, 5000);
}
public int getScrollY(AbsListView view) {
View c = view.getChildAt(0);
if (c == null) {
return 0;
}
int top = c.getTop();
int firstVisiblePosition = view.getFirstVisiblePosition();
if (firstVisiblePosition == 0) {
return -top;
} else if (firstVisiblePosition == 1) {
return top;
} else {
return -top + (firstVisiblePosition - 2) * c.getHeight() + 683;
}
}
protected void updateListView() {
if (adapter != null) {
adapter.notifyDataSetChanged();
}
}
protected void stopRefresh() {
listView.onRefreshComplete();
}
}
上面代码中的界面就是xml中包含了一个PullToRefreshListView，比较简单这个地方就不贴出来了，我们看到在listViewAddHeader中，这个地方添加了一个与悬浮头等高的头部，这样就可以将内容区域给呈现出来，不会被悬浮头遮挡，其次在list的listener中我们将onScorll传到了主界面，这样Listview滚动，就可以将当前滚动的距离计算出来，修正悬浮头的距离。
我们再贴出上面剩下的代码ScrollTabHolderFragment.java与ScrollTabHolder.java
public abstract class ScrollTabHolderFragment extends Fragment implements ScrollTabHolder {
private int fragmentId;
protected ScrollTabHolder scrollTabHolder;
public void setScrollTabHolder(ScrollTabHolder scrollTabHolder) {
this.scrollTabHolder = scrollTabHolder;
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount,
int pagePosition) {
// nothing
}
@Override
public void onHeaderScroll(boolean isRefreashing, int value, int pagePosition) {
}
public int getFragmentId() {
return fragmentId;
}
public void setFragmentId(int fragmentId) {
this.fragmentId = fragmentId;
}
}
public interface ScrollTabHolder {
void adjustScroll(int scrollHeight);
void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount, int pagePosition);
void onHeaderScroll(boolean isRefreashing, int value, int pagePosition);
}
最后我们来看看adaper
public class SlidingPagerAdapter extends FragmentPagerAdapter {
protected final ScrollTabHolderFragment[] fragments;
protected final Context context;
private SparseArrayCompat mScrollTabHolders;
private ScrollTabHolder mListener;
public int getCacheCount() {
return PageAdapterTab.values().length;
}
public SlidingPagerAdapter(FragmentManager fm, Context context, ViewPager pager) {
super(fm);
fragments = new ScrollTabHolderFragment[PageAdapterTab.values().length];
this.cOntext= context;
mScrollTabHolders = new SparseArrayCompat();
init(fm);
}
private void init(FragmentManager fm) {
for (PageAdapterTab tab : PageAdapterTab.values()) {
try {
ScrollTabHolderFragment fragment = null;
List fs = fm.getFragments();
if (fs != null) {
for (Fragment f : fs) {
if (f.getClass() == tab.clazz) {
fragment = (ScrollTabHolderFragment) f;
break;
}
}
}
if (fragment == null) {
fragment = (ScrollTabHolderFragment) tab.clazz.newInstance();
}
fragments[tab.tabIndex] = fragment;
} catch (InstantiationException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
}
public void setTabHolderScrollingListener(ScrollTabHolder listener) {
mListener = listener;
}
@Override
public ScrollTabHolderFragment getItem(int pos) {
ScrollTabHolderFragment fragment = fragments[pos];
mScrollTabHolders.put(pos, fragment);
if (mListener != null) {
fragment.setScrollTabHolder(mListener);
}
return fragment;
}
public SparseArrayCompat getScrollTabHolders() {
return mScrollTabHolders;
}
@Override
public int getCount() {
return PageAdapterTab.values().length;
}
@Override
public CharSequence getPageTitle(int position) {
PageAdapterTab tab = PageAdapterTab.fromTabIndex(position);
int resId = tab != null &＃63; tab.resId : 0;
return resId != 0 &＃63; context.getText(resId) : "";
}
}
SlidingPagerAdapter 继承自FragmentPagerAdapter，从主界面传递了一个callback，将在callback传递给每个fragment，这样就将fragment与activity联系起来了。其实还有很多种方式，比如在fragment的attach中获取activity中的回调。上面代码中还有一个PageAdapterTab，它又是干什么的呐？来看看代码
public enum PageAdapterTab {
PAGE_TAB1(0, Tab1ListFragment.class, R.string.page_tab1),
PAGE_TAB2(1, Tab2ListFragment.class, R.string.page_tab2),
PAGE_TAB3(2, Tab3ListFragment.class, R.string.page_tab3),
;
public final int tabIndex;
public final Class<&＃63; extends Fragment> clazz;
public final int resId;
public final int fragmentId;
private PageAdapterTab(int index, Class<&＃63; extends Fragment> clazz, int resId) {
this.tabIndex = index;
this.clazz = clazz;
this.resId = resId;
this.fragmentId = index;
}
public static final PageAdapterTab fromTabIndex(int tabIndex) {
for (PageAdapterTab value : PageAdapterTab.values()) {
if (value.tabIndex == tabIndex) {
return value;
}
}
return null;
}
}
就是一个枚举类，配置了当前要显示的fragment，这样以后就要增加就可以只修改改枚举就ok了
到此整个工程就结束了，我们截几张图看看效果：
最后在回顾一下，布局为两层，厚一层为一个Viewpager，里面包含了多个fragment，前一层为一个悬浮头与切换tab，当滑动listview时将当前显示的位置传递到主界面，同时更改主界面的位置。
代码地址如下：https://github.com/FreeSunny/RefreashTabView
以上就是本文的全部内容，希望对大家的学习有所帮助。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 