标签:scrollview
玩过新浪微博,qq空间等手机客户端的童鞋,都应该清楚,在主界面向下滑动时,会有一个阻尼回弹效果,看起来挺不错,接下来我们就来实现一下这种效果,下拉后回弹刷新界面,先看效果图:
这个是编辑器里面的界面效果,不言自明:
运行效果:
正常界面下:
下拉:
下拉结束:
实现代码:
主要部分就是重写的ScrollView:
package com.byl.scollower; import android.content.Context; import android.graphics.Rect; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.View; import android.view.animation.TranslateAnimation; import android.widget.ImageView; import android.widget.ScrollView; /** * @author baiyuliang 白玉梁 * @date 2014年5月14日 * @description 具有阻尼效果的ScrollView * */ public class MyScrollView extends ScrollView { private View inner;// 子View private float y;// 点击时y坐标 private float y1;// 点击时y坐标 private float y2;// 抬起时y坐标 private Rect normal = new Rect();// 矩形(这里只是个形式,只是用于判断是否需要动画.) private boolean isCount = false;// 是否开始计算 private boolean isMoveing = false;// 是否开始移动. private ImageView imageView; private int initTop, initbottom;// 初始高度 private int top, bottom;// 拖动时时高度。 public void setImageView(ImageView imageView) { this.imageView = imageView; } public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); } private OnHeaderRefreshListener mOnHeaderRefreshListener; /*** * 根据 XML 生成视图工作完成.该函数在生成视图的最后调用,在所有子视图添加完之后. 即使子类覆盖了 onFinishInflate * 方法,也应该调用父类的方法,使该方法得以执行. */ @Override protected void onFinishInflate() { if (getChildCount() > 0) { inner = getChildAt(0); } } /** touch 事件处理 **/ @Override public boolean onTouchEvent(MotionEvent ev) { if (inner != null) { commOnTouchEvent(ev); } return super.onTouchEvent(ev); } /*** * 触摸事件 * * @param ev */ public void commOnTouchEvent(MotionEvent ev) { int action = ev.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: y1 = ev.getY(); top = initTop = imageView.getTop(); bottom = initbottom = imageView.getBottom(); break; case MotionEvent.ACTION_UP: y2 = ev.getY(); //y2-y1>0表示下拉动作 if (isMoveing&&(y2-y1>0)){ Log.e("jj", "下拉结束" ); mOnHeaderRefreshListener.onHeaderRefresh(this); } isMoveing = false; // 手指松开. if (isNeedAnimation()) { animation(); } break; /*** * 排除出第一次移动计算,因为第一次无法得知y坐标, 在MotionEvent.ACTION_DOWN中获取不到, * 因为此时是MyScrollView的touch事件传递到到了LIstView的孩子item上面.所以从第二次计算开始. * 然而我们也要进行初始化,就是第一次移动的时候让滑动距离归0. 之后记录准确了就正常执行. */ case MotionEvent.ACTION_MOVE: final float preY = y;// 按下时的y坐标 float nowY = ev.getY();// 时时y坐标 int deltaY = (int) (nowY - preY);// 滑动距离 if (!isCount) { deltaY = 0; // 在这里要归0. } if (deltaY < 0 && top <= initTop) return; // 当滚动到最上或者最下时就不会再滚动,这时移动布局 isNeedMove(); if (isMoveing) { // 初始化头部矩形 if (normal.isEmpty()) { // 保存正常的布局位置 normal.set(inner.getLeft(), inner.getTop(),inner.getRight(), inner.getBottom()); } // 移动布局 inner.layout(inner.getLeft(), inner.getTop() + deltaY / 3,inner.getRight(), inner.getBottom() + deltaY / 3); top += (deltaY / 6); bottom += (deltaY / 6); imageView.layout(imageView.getLeft(), top,imageView.getRight(), bottom); } isCount = true; y = nowY; break; default: break; } } /*** * 回缩动画 */ public void animation() { TranslateAnimation taa = new TranslateAnimation(0, 0, top + 200, initTop + 200); taa.setDuration(200); imageView.startAnimation(taa); imageView.layout(imageView.getLeft(), initTop, imageView.getRight(), initbottom); // 开启移动动画 TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop(), normal.top); ta.setDuration(200); inner.startAnimation(ta); // 设置回到正常的布局位置 inner.layout(normal.left, normal.top, normal.right, normal.bottom); normal.setEmpty(); isCount = false; y = 0;// 手指松开要归0. } // 是否需要开启动画 public boolean isNeedAnimation() { return !normal.isEmpty(); } /*** * 是否需要移动布局 inner.getMeasuredHeight():获取的是控件的总高度 * * getHeight():获取的是屏幕的高度 * * @return */ public void isNeedMove() { int offset = inner.getMeasuredHeight() - getHeight(); int scrollY = getScrollY(); // 0是顶部,后面那个是底部 // if (scrollY == 0 || scrollY == offset) { // isMoveing = true; // } if (scrollY == 0) { isMoveing = true; } } public interface OnHeaderRefreshListener { public void onHeaderRefresh(MyScrollView view); } public void setOnHeaderRefreshListener(OnHeaderRefreshListener headerRefreshListener) { mOnHeaderRefreshListener = headerRefreshListener; } }
package com.byl.scollower; import com.byl.scollower.MyScrollView.OnHeaderRefreshListener; import android.os.Bundle; import android.app.Activity; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.ImageView; import android.widget.Toast; public class MainActivity extends Activity implements OnHeaderRefreshListener{ private ImageView mBackgroundImageView = null; private Button mLoginButton = null; private MyScrollView mScrollView = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mBackgroundImageView = (ImageView) findViewById(R.id.personal_background_image); mLoginButton = (Button) findViewById(R.id.personal_login_button); mLoginButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { Toast.makeText(getApplicationContext(), "登录", 1).show(); } }); mScrollView = (MyScrollView) findViewById(R.id.personal_scrollView); mScrollView.setImageView(mBackgroundImageView); mScrollView.setOnHeaderRefreshListener(this); } @Override public void onHeaderRefresh(MyScrollView view) { Toast.makeText(getApplicationContext(), "刷新", 1).show(); } }
<?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" android:background="#ffffff" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/personal_background_image" android:layout_width="match_parent" android:layout_height="320dp" android:layout_alignParentTop="true" android:layout_marginTop="-100dp" android:background="@drawable/bg" /> <com.byl.scollower.MyScrollView android:id="@+id/personal_scrollView" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#00000000" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="150dp" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="20dp" android:text="欢迎来到白玉梁的博客专栏" android:textColor="#ffffff" android:textSize="20sp" /> <Button android:id="@+id/personal_login_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:gravity="center" android:text="登录" android:textStyle="bold" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/android_layout_bg" android:orientation="vertical" > </LinearLayout> </LinearLayout> </com.byl.scollower.MyScrollView> </RelativeLayout> </RelativeLayout>
ScrollView的阻尼回弹效果实现(仿qq空间),布布扣,bubuko.com
标签:scrollview
原文地址:http://blog.csdn.net/baiyuliang2013/article/details/25815407