ParallaxListView

最新推荐文章于 2025-08-10 12:00:48 发布

Ltp_zy

最新推荐文章于 2025-08-10 12:00:48 发布

阅读量332

点赞数

CC 4.0 BY-SA版权

分类专栏： android 自定义控件文章标签： android

本文链接：https://blog.youkuaiyun.com/Ltp_zy/article/details/72082394

android 自定义控件专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Android应用中实现ListView头部下拉时图片放大的效果。通过自定义ParallaxListView组件并利用NineOldAndroids库来增强用户体验。文章提供了完整的代码示例，包括如何设置ListView和处理触摸事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义实现ListView头部下拉放大功能在Activity中添加header


import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;

public class MainActivity extends Activity {
	private ParallaxListView listview;
	private String[] indexArr = { "A", "B", "C", "D", "E", "F", "G", "H",
			"I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U",
			"V", "W", "X", "Y", "Z" };
    @SuppressLint("NewApi") @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
		listview = (ParallaxListView) findViewById(R.id.listview);
		
		//listview.setOverScrollMode(ListView.OVER_SCROLL_NEVER);//永远不显示蓝色阴影
		//listview.setOverScrollMode(ListView.OVER_SCROLL_NEVER);
		//添加header
		View headerView = View.inflate(this,R.layout.layout_header, null);
		ImageView imageView = (ImageView) headerView.findViewById(R.id.imageView);
		listview.setParallaxImageView(imageView);
		
		listview.addHeaderView(headerView);
		
		listview.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, indexArr));
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
}

import com.nineoldandroids.animation.ValueAnimator;import com.nineoldandroids.animation.ValueAnimator.AnimatorUpdateListener;import com.nineoldandroids.view.ViewPropertyAnimator;import android.annotation.SuppressLint;import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.animation.OvershootInterpolator;import android.widget.ImageView;import android.widget.ListView;public class ParallaxListView extends ListView {private ImageView iv;/** * ImageView原始高度 */private int originalHeight;/** * header可移动的最大距离 */private int maxHeight;public ParallaxListView(Context context) {super(context);// TODO Auto-generated constructor stub}public ParallaxListView(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stub}public ParallaxListView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);// TODO Auto-generated constructor stub}public void setParallaxImageView(final ImageView iv){this.iv = iv; iv.post(new Runnable(){@Overridepublic void run() {originalHeight = iv.getHeight();int drawableHeight = iv.getDrawable().getIntrinsicHeight();//获取图片高度/* * 当ImageView设置的高度小于图片高度，则可移动的最大高度为图片高度 * 否则设定为ImgeView高度的两倍 */maxHeight = originalHeight>drawableHeight ?originalHeight*2 :drawableHeight;}});}/*listview滑动到头是否可以继续移动 * deltaX 水平方向移动的距离 * deltaY竖直方向移动距离为正则是底部滑到头继续滑动的距离，为负则是顶部 * isTouchEvent true是触摸滑动，false是惯性滑动 */@SuppressLint("NewApi") @Overrideprotected boolean overScrollBy(int deltaX, int deltaY, int scrollX,int scrollY, int scrollRangeX, int scrollRangeY,int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {System.out.println("...........deltaX : "+deltaX+" deltaY"+deltaY);//System.out.println("...........TOUCH : "+isTouchEvent+" scroll "+scrollY);if(deltaY<0 && isTouchEvent && iv!=null){//当触摸滑动顶部/* * 让ImageView的高度随着用户向下滑动的距离的二分之一，再加原来高度 * 达到一种吃力拉动效果，如果大于最大高度，则设置成最大高度，否则则是新的高度 */int newHeight = iv.getHeight()-deltaY/2 >maxHeight ? maxHeight :iv.getHeight()-deltaY/2;iv.getLayoutParams().height = newHeight;iv.requestLayout();//重新布局}return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX,scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);}@Overridepublic boolean onTouchEvent(MotionEvent ev) {/* * 让ImageVie在用户抬起时，恢复原来高度 */if(ev.getAction()==MotionEvent.ACTION_UP && iv!=null){ValueAnimator animator = ValueAnimator.ofInt(iv.getHeight(),originalHeight);animator.addUpdateListener(new AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator arg0) {int newHeight = (Integer) arg0.getAnimatedValue();iv.getLayoutParams().height = newHeight;iv.requestLayout();//重绘}});animator.setDuration(500);animator.setInterpolator(new OvershootInterpolator());animator.start();}return super.onTouchEvent(ev);}}