仿QQ空间下拉头部缩放
来源:互联网 发布:linux服务器流量监控 编辑:程序博客网 时间:2024/05/17 04:36
Activity代码:
public class MainActivity extends Activity { private ParallaxListView pListView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_activity); View headerView = View.inflate(this, R.layout.header_view, null); ImageView ivBackground = (ImageView) headerView.findViewById(R.id.ivBackground); pListView = (ParallaxListView) findViewById(R.id.listView); pListView.addHeaderView(headerView); pListView.setParallaxImageView(ivBackground); ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, new String[] { "星期一 上班", "星期二 打豆豆","星期三 看星星", "星期四 学习", "星期五 放假", "星期六 拍拖", "星期天 看电影","...." }); pListView.setAdapter(adapter); }//在view加载完成时设定缩放级别 @Override public void onWindowFocusChanged(boolean hasWindowFocus) { super.onWindowFocusChanged(hasWindowFocus); if (hasWindowFocus) { pListView.setViewsBounds(2); } }}
主页面布局(main_activity.xml):
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" ><ke.qq.tzparallaxlistview.ParallaxListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout>
头部布局(header_view.xml):
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/ivBackground" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:contentDescription="@string/app_name" android:scaleType="centerCrop" android:src="@drawable/header" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginLeft="20dp" android:contentDescription="@string/app_name" android:paddingBottom="20dp" android:src="@drawable/lf" /></RelativeLayout>
关键部分->自定义ListView:ParallaxListView
public class ParallaxListView extends ListView { protected static final String TAG = ParallaxListView.class.getName(); private ImageView mImageView; // 定义ImageView的最大可拉伸的高度 private int mDrawableMaxHeight = -1; // 定义ImageView初始加载的高度 private int mImageViewHeight = -1; // 定义ImageView的默认高度 private int mDefaultImageViewHeight = 0; public ParallaxListView(Context context) { super(context); init(context); } public ParallaxListView(Context context, AttributeSet attrs) { super(context, attrs); init(context); } public ParallaxListView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context); } public void setParallaxImageView(ImageView iv) { mImageView = iv; mImageView.setScaleType(ScaleType.CENTER_CROP); } // 设置缩放级别---控制图片的最大拉伸高度 // 在界面加载完毕的时候调用 public void setViewsBounds(double zoomRatio) { // mDrawableMaxHeight=zoomRatio*mDefaultImageViewHeight; if (mDrawableMaxHeight == -1) { mImageViewHeight = mImageView.getHeight(); if (mImageViewHeight < 0) { mImageViewHeight = mDefaultImageViewHeight; } } } /** * 初始化 * * @param context */ private void init(Context context) { setVerticalScrollBarEnabled(false); mDefaultImageViewHeight = 449; } //内部滑动时调用 @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { // 监听listView的滑动 super.onScrollChanged(l, t, oldl, oldt); // 如何控制图片见效的高度?---监听listView的头部滑出去的距离 View header = (View) mImageView.getParent(); // 得到头部划出去的距离----<0 if (header.getTop() < 0 && mImageView.getHeight() > mImageViewHeight) { mImageView.getLayoutParams().height = Math.max( mImageView.getHeight() - Math.abs(header.getTop()), mDefaultImageViewHeight); header.layout(header.getLeft(), 0, header.getRight(), header.getHeight()); // 调整ImageView所在容器的高度 mImageView.requestLayout(); } } //在划出屏幕时调用 @Override protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) { // 当listView,ScrollView滑动过头的时候回调的方法 // 不断地控制ImageView的高度 boolean isCollapse = resizeOverScrollby(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent); return isCollapse ? true : super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent); } /** * 处理listView,ScrollView滑动过头 * @param deltaX * @param deltaY * @param scrollX * @param scrollY * @param scrollRangeX * @param scrollRangeY * @param maxOverScrollX * @param maxOverScrollY * @param isTouchEvent * @return */ private boolean resizeOverScrollby(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) { if (deltaY < 0) { mImageView.getLayoutParams().height = Math.max( mImageView.getHeight() + Math.abs(deltaY), mDefaultImageViewHeight); // 重新调整ImageView的宽高 mImageView.requestLayout(); } else { if (mImageView.getHeight() > mDefaultImageViewHeight) mImageView.getLayoutParams().height = mImageView.getHeight() - Math.abs(deltaY); // 重新调整ImageView的宽高 mImageView.requestLayout(); } return true; } @SuppressLint("ClickableViewAccessibility") @Override public boolean onTouchEvent(MotionEvent ev) { //松开手时,展示动画效果 if (ev.getAction() == MotionEvent.ACTION_UP) { ResetAnimation anim = new ResetAnimation(mImageView, mDefaultImageViewHeight); anim.setDuration(500); mImageView.startAnimation(anim); } return super.onTouchEvent(ev); } //自定义动画效果 public class ResetAnimation extends Animation { private ImageView mView; // private int targetHeight; private int originalHeith; private int extraHeight; public ResetAnimation(ImageView mView, int targetHeight) { // 图片动画地减小高度 this.mView = mView; // this.targetHeight = targetHeight; this.originalHeith = mView.getHeight(); extraHeight = originalHeith - targetHeight; } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { super.applyTransformation(interpolatedTime, t); //interpolatedTime的值为0.0~1.0f mView.getLayoutParams().height = (int) (originalHeith - extraHeight * interpolatedTime); mView.requestLayout(); } }}
demo链接
效果图:
0 0
- 仿QQ空间下拉头部缩放
- 仿QQ空间头部下拉放大控件
- 仿QQ空间标题效果 下拉刷新 动画缩放 标题渐隐
- 头部视觉视差(仿QQ控件下拉效果)
- 仿QQ头部下拉放大效果,类似PullToZoomListview效果!
- 仿QQ空间打造可拉伸头部组件
- 仿QQ空间之打造个性化可拉伸头部控件
- 仿QQ空间之打造个性化可拉伸头部控件
- Android 轻松实现仿QQ空间下拉刷新
- JS选中样式,仿QQ空间自定义空间头部选择样式(9元包邮)
- 仿QQ下拉菜单
- 仿QQ下拉列表
- iOS 类似QQ空间表视图下拉头部视图放大效果实现
- 仿微信朋友圈(QQ空间)下拉刷新(头部放大动画效果)
- Android仿QQ空间
- Android仿QQ空间
- Android仿QQ空间
- Android仿QQ好友详情页-下拉顶部图片缩放效果
- 图像处理常见方法
- jquery简单案例
- 网易数据挖掘试题
- LeetCode | Contains Duplicate II
- C语言堆和堆栈
- 仿QQ空间下拉头部缩放
- 大数据算法学习笔记(1):定义与特点
- 程序员必须知道的10大基础实用算法及其讲解
- myelipse 优化
- hdoj1421_搬寝室(dp)
- 欧拉函数代码实现
- ACCESS通过一个连接写入的数据,另一个连接却读取不出来
- 词法分析学习-手工构词
- oracle中的cdb和pdb概念