最近想做个仿QQ空间的效果（向下拉动图片伸缩的效果），也可以说是阻尼效果，查看了一些资料，我们先参考下（包括下拉图片伸缩，上下拉动伸缩）：
http://blog.csdn.net/jj120522/article/details/8938308
http://www.2cto.com/kf/201610/553393.html
http://www.haolizi.net/example/view_799.html
http://blog.csdn.net/dong_junshuai/article/details/54575818
http://www.jb51.net/article/108543.htm
http://blog.csdn.net/kokjuis/article/details/62046834
我这里实现的是上下拉动阻尼效果，看下效果图：
通过自定义ScrollView 实现上下拉动阻尼效果。
PersonalScrollView2.java
/**
* 2017/7/26.
* ScrollView 上下阻尼效果
*/
public class PersonalScrollView2 extends ScrollView {
private static final String TAG = "BounceScrollView";
//----头部收缩属性--------
// 记录首次按下位置
private float mFirstPosition = 0;
// 头部图片是否正在放大
private Boolean mScaling = false;
private View dropZoomView;//需要被放大的view
private int dropZoomViewWidth;
private int dropZoomViewHeight;
//----头部收缩属性end--------
//------尾部收缩属性--------
private View inner;// 子View
private float y;// 点击时y坐标
private Rect normal = new Rect();// 矩形(这里只是个形式，只是用于判断是否需要动画.)
private boolean isCount = false;// 是否开始计算
//最后的坐标
private float lastX = 0;
private float lastY = 0;
//当前坐标
private float currentX = 0;
private float currentY = 0;
//移动的坐标量
private float distanceX = 0;
private float distanceY = 0;
private boolean upDownSlide = false; //判断上下滑动的flag
//------尾部收缩属性end--------
public PersonalScrollView2(Context context, AttributeSet attrs) {
super(context, attrs);
}
//初始化
private void init() {
setOverScrollMode(OVER_SCROLL_NEVER);
if (getChildAt(0) != null) {
inner = getChildAt(0);//这个是底部收缩的view
//头部收缩的
ViewGroup vg = (ViewGroup) getChildAt(0);
if (vg.getChildAt(0) != null) {
dropZoomView = vg.getChildAt(0);
}
}
}
/***
* 生成视图工作完成.该函数在生成视图的最后调用，在所有子视图添加完之后. 即使子类覆盖了 onFinishInflate
* 方法，也应该调用父类的方法，使该方法得以执行.
*/
@Override
protected void onFinishInflate() {
//初始化
init();
super.onFinishInflate();
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
//这里只是计算尾部坐标
currentX = ev.getX();
currentY = ev.getY();
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
distanceX = currentX - lastX;
distanceY = currentY - lastY;
if (Math.abs(distanceX) < Math.abs(distanceY) && Math.abs(distanceY) > 12) {
upDownSlide = true;
}
break;
}
lastX = currentX;
lastY = currentY;
if (upDownSlide && inner != null) commOnTouchEvent(ev);
return super.dispatchTouchEvent(ev);
}
/***
* 触摸事件
*
* @param ev
*/
public void commOnTouchEvent(MotionEvent ev) {
//头部缩放计算
if (dropZoomViewWidth <= 0 || dropZoomViewHeight <= 0) {
dropZoomViewWidth = dropZoomView.getMeasuredWidth();
dropZoomViewHeight = dropZoomView.getMeasuredHeight();
}
switch (ev.getAction()) {
case MotionEvent.ACTION_UP:
//手指离开后头部恢复图片
mScaling = false;
replyImage();
// 手指松开尾部恢复
if (isNeedAnimation()) {
animation();
isCount = false;
}
clear0();
break;
//这里头尾分开处理，互不干扰
case MotionEvent.ACTION_MOVE:
//尾部处理
final float preY = y;// 按下时的y坐标
float nowY = ev.getY();// 时时y坐标
int deltaY = (int) (preY - nowY);// 滑动距离
if (!isCount) {
deltaY = 0; // 在这里要归0.
}
y = nowY;
// 当滚动到最上或者最下时就不会再滚动，这时移动布局
if (isNeedMove()) {
// 初始化头部矩形
if (normal.isEmpty()) {
// 保存正常的布局位置
normal.set(inner.getLeft(), inner.getTop(),
inner.getRight(), inner.getBottom());
}
// 移动布局
inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2,
inner.getRight(), inner.getBottom() - deltaY / 2);
}
isCount = true;
//尾部处理end
//头部处理
if (!mScaling) {
if (getScrollY() == 0) {
mFirstPosition = ev.getY();// 滚动到顶部时记录位置，否则正常返回
} else {
break;
}
}
int distance = (int) ((ev.getY() - mFirstPosition) * 0.6); // 滚动距离乘以一个系数
if (distance < 0) { // 当前位置比记录位置要小，正常返回
break;
}
// 处理放大
mScaling = true;
setZoom(1 + distance);
//头部处理end
break;
}
}
/***
* 回缩动画,尾部往下缩动画
*/
public void animation() {
// 开启移动动画
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();
}
// 是否需要开启动画
public boolean isNeedAnimation() {
return !normal.isEmpty();
}
// 回弹动画，header往上缩动画 (使用了属性动画)
public void replyImage() {
final float distance = dropZoomView.getMeasuredWidth() - dropZoomViewWidth;
// 设置动画
ValueAnimator anim = ObjectAnimator.ofFloat(0.0F, 1.0F).setDuration((long) (distance * 0.7));
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float cVal = (Float) animation.getAnimatedValue();
setZoom(distance - ((distance) * cVal));
}
});
anim.start();
}
//头部缩放
public void setZoom(float s) {
if (dropZoomViewHeight <= 0 || dropZoomViewWidth <= 0) {
return;
}
ViewGroup.LayoutParams lp = dropZoomView.getLayoutParams();
lp.width = (int) (dropZoomViewWidth + s);
lp.height = (int) (dropZoomViewHeight * ((dropZoomViewWidth + s) / dropZoomViewWidth));
dropZoomView.setLayoutParams(lp);
}
/***
* 是否需要移动布局 inner.getMeasuredHeight():获取的是控件的总高度
*
* getHeight()：获取的是屏幕的高度
*
* @return
*/
public boolean isNeedMove() {
int offset = inner.getMeasuredHeight() - getHeight();
int scrollY = getScrollY();
// 0是顶部，后面那个是底部
if (scrollY == 0 || scrollY == offset) {
return true;
}
return false;
}
//清理尾部属性值
private void clear0() {
lastX = 0;
lastY = 0;
distanceX = 0;
distanceY = 0;
upDownSlide = false;
}
}
<?xml version="1.0" encoding="utf-8"?>
<包名.view.PersonalScrollView2 xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="170dp"
android:layout_gravity="center_horizontal">
<ImageView
android:id="@+id/iv_personinfo_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/personinfo_bg" />
<ImageView
android:id="@+id/iv_my_setting"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_alignParentRight="true"
android:layout_marginRight="18dp"
android:layout_marginTop="18dp"
android:src="@drawable/iv_setting" />
<包名.view.CircleImageView
android:id="@+id/civ_head"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="@drawable/default_head" />
<TextView
android:id="@+id/tv_login"
android:layout_width="85dp"
android:layout_height="38dp"
android:layout_below="@+id/civ_head"
android:layout_centerHorizontal="true"
android:layout_marginTop="12dp"
android:background="@drawable/shape_login"
android:gravity="center"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="登陆/注册"
android:textColor="@color/white"
android:textSize="14sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/my_income" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="我的收益"
android:textColor="@color/tv_56"
android:textSize="14sp" />
</LinearLayout>
<View
android:layout_width="1dp"
android:layout_height="80dp"
android:background="@color/tv_f3" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/funds_detaik" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="资金明细"
android:textColor="@color/tv_56"
android:textSize="14sp" />
</LinearLayout>
<View
android:layout_width="1dp"
android:layout_height="80dp"
android:background="@color/tv_f3" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/my_store" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="我的店铺"
android:textColor="@color/tv_56"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="8dp"
android:background="@color/tv_f3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="15dp"
android:text="我的报价"
android:textColor="@color/tv_22"
android:textSize="16sp" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/tv_f3" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="75dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:background="@drawable/shape_login"
android:text="暂时没有已报价任务哦~"
android:textColor="@color/tv_86"
android:textSize="14sp" />
<TextView
android:layout_width="90dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_marginRight="15dp"
android:background="@drawable/shape_blue"
android:gravity="center"
android:text="立即报价"
android:textColor="@color/white"
android:textSize="14sp" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="8dp"
android:background="@color/tv_f3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="15dp"
android:text="我的内容"
android:textColor="@color/tv_22"
android:textSize="16sp" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/tv_f3" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/service_type" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="服务类型"
android:textColor="@color/tv_56"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/service_cases" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="服务案例"
android:textColor="@color/tv_56"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/personal_recommend" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="个人推荐"
android:textColor="@color/tv_56"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_my_qr_code"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/my_qr_code" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="我的二维码"
android:textColor="@color/tv_56"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="8dp"
android:background="@color/tv_f3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="15dp"
android:text="我的客服"
android:textColor="@color/tv_22"
android:textSize="16sp" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/tv_f3" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/feed_back" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="意见反馈"
android:textColor="@color/tv_56"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/complaints_record" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="投诉记录"
android:textColor="@color/tv_56"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/help_information" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="帮助信息"
android:textColor="@color/tv_56"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</包名.view.PersonalScrollView2>
扫一扫
826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
