Android弹性ScrollView,类似于下拉刷新时的View延时拖动,这个效果我们在app中很常见,目的是使控件在下拉或者上滑时看似流畅不再生硬,使我们的界面更加的美观。
下面我们来看一下运行的效果:
我们 自定义类 继承自ScrollView,这样使得我们的ScrollView具有弹性。该类的代码如下:
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;
/**
* 弹性ScrollView 的写法
* Created by wenpengli on 2017/1/21.
*/
public class TanXingScrollView extends ScrollView{
private static final String TAG = "TanXingScrollView";
//移动因子, 是一个百分比, 比如手指移动了100px, 那么View就只移动50px
//目的是达到一个延迟的效果
private static final float MOVE_FACTOR = 0.3f;
//松开手指后, 界面回到正常位置需要的动画时间
private static final int ANIM_TIME = 40;
//ScrollView的子View, 也是ScrollView的唯一一个子View
private View contentView;
//手指按下时的Y值, 用于在移动时计算移动距离
//如果按下时不能上拉和下拉, 会在手指移动时更新为当前手指的Y值
private float startY;
//用于记录正常的布局位置
private Rect originalRect = new Rect();
//手指按下时记录是否可以继续下拉
private boolean canPullDown = false;
//手指按下时记录是否可以继续上拉
private boolean canPullUp = false;
//在手指滑动的过程中记录是否移动了布局
private boolean isMoved = false;
public TanXingScrollView(Context context) {
super(context);
}
public TanXingScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@SuppressLint("MissingSuperCall")
@Override
protected void onFinishInflate() {
if (getChildCount() > 0) {
contentView = getChildAt(0);
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if(contentView == null) return;
//ScrollView中的唯一子控件的位置信息, 这个位置信息在整个控件的生命周期中保持不变
originalRect.set(contentView.getLeft(), contentView.getTop(), contentView
.getRight(), contentView.getBottom());
}
/**
* 在触摸事件中, 处理上拉和下拉的逻辑
*/
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if (contentView == null) {
return super.dispatchTouchEvent(ev);
}
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
//判断是否可以上拉和下拉
canPullDown = isCanPullDown();
canPullUp = isCanPullUp();
//记录按下时的Y值
startY = ev.getY();
break;
case MotionEvent.ACTION_UP:
if(!isMoved) break; //如果没有移动布局, 则跳过执行
// 开启动画
TranslateAnimation anim = new TranslateAnimation(0, 0, 0,
originalRect.top);
anim.setDuration(ANIM_TIME);
contentView.startAnimation(anim);
// 设置回到正常的布局位置
contentView.layout(originalRect.left, originalRect.top,
originalRect.right, originalRect.bottom);
//将标志位设回false
canPullDown = false;
canPullUp = false;
isMoved = false;
break;
case MotionEvent.ACTION_MOVE:
//在移动的过程中, 既没有滚动到可以上拉的程度, 也没有滚动到可以下拉的程度
if(!canPullDown && !canPullUp) {
startY = ev.getY();
canPullDown = isCanPullDown();
canPullUp = isCanPullUp();
break;
}
//计算手指移动的距离
float nowY = ev.getY();
int deltaY = (int) (nowY - startY);
//是否应该移动布局
boolean shouldMove =
(canPullDown && deltaY > 0) //可以下拉, 并且手指向下移动
|| (canPullUp && deltaY< 0) //可以上拉, 并且手指向上移动
|| (canPullUp && canPullDown); //既可以上拉也可以下拉(这种情况出现在ScrollView包裹的控件比ScrollView还小)
if(shouldMove){
//计算偏移量
int offset = (int)(deltaY * MOVE_FACTOR);
//随着手指的移动而移动布局
contentView.layout(originalRect.left, originalRect.top + offset,
originalRect.right, originalRect.bottom + offset);
isMoved = true; //记录移动了布局
}
break;
default:
break;
}
return super.dispatchTouchEvent(ev);
}
/**
* 判断是否滚动到顶部
*/
private boolean isCanPullDown() {
return getScrollY() == 0 ||
contentView.getHeight() < getHeight() + getScrollY();
}
/**
* 判断是否滚动到底部
*/
private boolean isCanPullUp() {
return contentView.getHeight() <= getHeight() + getScrollY();
}
}
然后就是 demo activity的界面 代码,老手就没有必要看了 自己去写一个就行。
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import com.xyliwp.dayday.R;
/**
* 个人资料页面
* Created by wenpengli on 2017/1/21.
*/
public class ActivityPersonl extends Activity{
private LinearLayout linearLayout_personal_back;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_personl);
initID();
initOnClick();
}
/**
* 点击事件的初始化
*/
private void initOnClick() {
linearLayout_personal_back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
/**
* 控件的绑定
*/
private void initID() {
linearLayout_personal_back = (LinearLayout)findViewById(R.id.linearLayout_persnol_back);
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="49dp"
android:background="@color/dibu"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/linearLayout_persnol_back"
android:layout_width="49dp"
android:layout_height="49dp"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="29dp"
android:layout_height="29dp"
android:layout_gravity="center"
android:background="@mipmap/fanhui" />
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_weight="1"
android:background="@drawable/layoutsharp"
android:gravity="center"
android:text="个人资料"
android:textSize="22sp"
android:textColor="@color/myfragment_heald">
</TextView>
<TextView
android:layout_width="49dp"
android:layout_height="49dp"
android:gravity="center"/>
</LinearLayout>
<com.xyliwp.dayday.persnoldata.TanXingScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@mipmap/menubg">
<LinearLayout
android:id="@+id/linearlayout_id"
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginLeft="20dp">
<com.xyliwp.dayday.sideslipmenu.CircleImageView
android:id="@+id/circleIamgeView_sildmenu"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/touxiangimage"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_marginLeft="10dp"
android:id="@+id/textview_sildmenu_id"
android:text="id"
android:textColor="@color/myfragment_heald"
android:textSize="35sp"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="20dp"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="等级表示"
android:gravity="left|center"
android:textSize="18sp"/>
</LinearLayout>
</LinearLayout>
</com.xyliwp.dayday.persnoldata.TanXingScrollView>
</LinearLayout>