首页 > 代码库 > 使用LinearLayout和PullRefreshView实现上下翻页

使用LinearLayout和PullRefreshView实现上下翻页

2024-10-27 12:21:39   208人阅读

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">之前看过网易云阅读客户端，里面的文章可以实现上下拉动实现上下翻页的效果，感觉体验效果很不错。</span>

公司新版本项目的开发中也要求实现类似的效果，不过还好项目需求里面可以提前知道需要实现上下拉动翻页的总的页数。如果像网易那种不提前知道总的页数感觉控制好LinearLayout里面的childView应该也可以达到效果。

好记性不如烂笔头，先写下我提前知道总页数实现上下拉翻页的问题吧！


首先布局仅仅是一个简单的LinearLayout包裹着

<LinearLayout android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/fenleiPullContentLayout"
            android:orientation="vertical">
        </LinearLayout>

然后通过一个for循环把PullRefreshView包裹进来

pullContentLayout.removeAllViews();
		pullViews.clear();
		for(int i=0;i<leftEntityData.size();i++){
			PullToRefreshProView pullview = (PullToRefreshProView) inflater.inflate(R.layout.fenleipro_item, null);
			LayoutParams param = new LayoutParams(LayoutParams.MATCH_PARENT, scrollHeight);
			pullview.setLayoutParams(param);
			LinearLayout pullayout = (LinearLayout) pullview.findViewById(R.id.fenleirightlayout);
			RightAdapter adapter = new RightAdapter(rightEntityList.get(i));
			pullayout.removeAllViews();
			for(int k=0;k<adapter.getCount();k++){
				View view = adapter.getView(k, null, null);
				pullayout.addView(view,k);
			}
			pullViews.add(pullview);
			pullContentLayout.addView(pullview, i);
			if(i==0){
				pullview.setHeaderRefresh(false);
				pullview.setOnFooterRefreshListener(new MyOnRefreshListener(i));
			}else if(i==leftEntityData.size()-1){
				pullview.setFooterRefresh(false);
				pullview.setOnHeaderRefreshListener(new MyOnRefreshListener(i));
			}else{
				pullview.setOnHeaderRefreshListener(new MyOnRefreshListener(i));
				pullview.setOnFooterRefreshListener(new MyOnRefreshListener(i));
			}
		}

代码说明下：这里的PullToRefreshProView就是一个开源的下拉刷新控件，继承的是一个LinearLayout实现的。网上有源码；然后RightAdapter是一个BaseAdapter，通过这个adapter的getview得到每个view，然后把view添加到inflater出的PullToRefreshProView的子Linearlayoyut里面。然后给每个PullToRefreshProView设置上啦下拉的回调接口，第一个没有上啦，最后个没下拉。这里的MyOnRefreshListener是自己定义的下拉接口

private class MyOnRefreshListener implements OnHeaderRefreshListener,OnFooterRefreshListener{
@Override
		public void onFooterRefresh(PullToRefreshProView view) {
}

@Override
		public void onHeaderRefresh(PullToRefreshProView view) {
}

}

然后再onFooter和onHeader里面写下拉上拉逻辑。

这里关键是在动画效果交互的实现。

上代码，上拉的动画

public class PullToRefreshUpAnimation extends Animation{

	private View view1,view2;
	private int delt;
	private int topMarginView1 = 0;
	
	public PullToRefreshUpAnimation(Context context,View v1,View v2,int from,int to){
		super();
		view1 = v1;
		view2 = v2;
		delt = to - from;
		topMarginView1 = view1.getMeasuredHeight();
		setDuration(450);
		setFillAfter(true);
		setInterpolator(new DecelerateInterpolator());
	}
	
	public PullToRefreshUpAnimation(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		setDuration(450);
		setFillAfter(true);
		setInterpolator(new DecelerateInterpolator());
	}

	@Override
	protected void applyTransformation(float interpolatedTime, Transformation t) {
		android.widget.LinearLayout.LayoutParams param = (android.widget.LinearLayout.LayoutParams)view2.getLayoutParams();
		param.topMargin = (int) (interpolatedTime*delt);
		param.height = Math.abs(delt);
		android.widget.LinearLayout.LayoutParams param1 = (android.widget.LinearLayout.LayoutParams) view1.getLayoutParams();
		param1.topMargin = (int) (topMarginView1*(interpolatedTime-1));
		param1.height = topMarginView1;
		view1.setLayoutParams(param1);
		view2.setLayoutParams(param);
		
	}
	
	@Override
	public boolean willChangeBounds() {
		// TODO Auto-generated method stub
		return true;
	}
}

下拉动画

public class PullToRefreshAnimation extends Animation{

	private View view;
	private int delt;
	
	public PullToRefreshAnimation(Context context,View v,int from,int to){
		super();
		view = v;
		delt = to - from;
		setDuration(450);
		setFillAfter(true);
		setInterpolator(new DecelerateInterpolator());
	}
	
	public PullToRefreshAnimation(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		setDuration(450);
		setFillAfter(true);
		setInterpolator(new DecelerateInterpolator());
	}

	@Override
	protected void applyTransformation(float interpolatedTime, Transformation t) {
		android.widget.LinearLayout.LayoutParams param = (android.widget.LinearLayout.LayoutParams)view.getLayoutParams();
		param.topMargin = (int) (interpolatedTime*delt);
		param.height = Math.abs(delt);
		param.width = android.widget.LinearLayout.LayoutParams.MATCH_PARENT;
		view.setLayoutParams(param);
	}
	
	@Override
	public boolean willChangeBounds() {
		// TODO Auto-generated method stub
		return true;
	}
}

这两个动画的后果是导致最后最外层的LinearLayout包裹的每个子LinearLayout改变了自己的height和topMargin，

所以需要给这个动画设置animationListener，然后每次需要上啦下拉动画前把LinearLayout的height和topMargin重新设置过来，具体怎么实现看具体情况。

总体的程序设计思路就是这个样子，如果还有人能够有更简便的实现方式可以留言交流，谢谢！


PS：这里的核心实现方式其实就是控制好Linearlayout子LinearLayout的height和topMargin





使用LinearLayout和PullRefreshView实现上下翻页


联系
我们