《Android View滚动、拉伸到顶/底部弹性回弹复位》
我在上一篇文章介绍了如何实现一个Android ListView拉到顶/底部后,像橡皮筋一样弹性回弹复位(《Android ListView拉到顶/底部,像橡皮筋一样弹性回弹复位》,文章链接地址: http://blog.csdn.net/zhangphil/article/details/47311155 )。事实上,Android凡是由ScrollView包裹的控件,均可实现滚动到顶/底部,弹性回弹复位的交互设计效果。关键点是重写Android原生ScrollView的overScrollBy()方法。
现给出实现代码和步骤:
(1)首先需要写一个View继承自ScrollView,然后重写关键的方法:overScrollBy()。假设该view就叫做ZhangPhilScrollView:
- package zhangphil.view;
- import android.annotation.SuppressLint;
- import android.content.Context;
- import android.util.AttributeSet;
- import android.util.DisplayMetrics;
- import android.widget.ScrollView;
- public class ZhangPhilScrollView extends ScrollView{
- // 这个值控制可以把ScrollView包裹的控件拉出偏离顶部或底部的距离。
- private static final int MAX_OVERSCROLL_Y = 200;
- private Context mContext;
- private int newMaxOverScrollY;
- public ZhangPhilScrollView(Context context) {
- super(context);
- init(context);
- }
- public ZhangPhilScrollView(Context context, AttributeSet attrs) {
- super(context, attrs);
- init(context);
- }
- /*
- * public ZhangPhilListView(Context context, AttributeSet attrs, int
- * defStyle) { super(context, attrs, defStyle); this.mContext = context;
- * init(); }
- */
- @SuppressLint("NewApi")
- private void init(Context context) {
- this.mContext = context;
- DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();
- float density = metrics.density;
- newMaxOverScrollY = (int) (density * MAX_OVERSCROLL_Y);
- //false:隐藏ScrollView的滚动条。
- this.setVerticalScrollBarEnabled(false);
- //不管装载的控件填充的数据是否满屏,都允许橡皮筋一样的弹性回弹。
- this.setOverScrollMode(ScrollView.OVER_SCROLL_ALWAYS);
- }
- // 最关键的地方。
- //支持到SDK8需要增加@SuppressLint("NewApi")。
- @SuppressLint("NewApi")
- @Override
- protected boolean overScrollBy(int deltaX, int deltaY, int scrollX,
- int scrollY, int scrollRangeX, int scrollRangeY,
- int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
- return super.overScrollBy(deltaX, deltaY, scrollX, scrollY,
- scrollRangeX, scrollRangeY, maxOverScrollX, newMaxOverScrollY,
- isTouchEvent);
- }
- }
package zhangphil.view;
import android.annotation.SuppressLint;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.widget.ScrollView;
public class ZhangPhilScrollView extends ScrollView{
// 这个值控制可以把ScrollView包裹的控件拉出偏离顶部或底部的距离。
private static final int MAX_OVERSCROLL_Y = 200;
private Context mContext;
private int newMaxOverScrollY;
public ZhangPhilScrollView(Context context) {
super(context);
init(context);
}
public ZhangPhilScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
/*
* public ZhangPhilListView(Context context, AttributeSet attrs, int
* defStyle) { super(context, attrs, defStyle); this.mContext = context;
* init(); }
*/
@SuppressLint("NewApi")
private void init(Context context) {
this.mContext = context;
DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();
float density = metrics.density;
newMaxOverScrollY = (int) (density * MAX_OVERSCROLL_Y);
//false:隐藏ScrollView的滚动条。
this.setVerticalScrollBarEnabled(false);
//不管装载的控件填充的数据是否满屏,都允许橡皮筋一样的弹性回弹。
this.setOverScrollMode(ScrollView.OVER_SCROLL_ALWAYS);
}
// 最关键的地方。
//支持到SDK8需要增加@SuppressLint("NewApi")。
@SuppressLint("NewApi")
@Override
protected boolean overScrollBy(int deltaX, int deltaY, int scrollX,
int scrollY, int scrollRangeX, int scrollRangeY,
int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
return super.overScrollBy(deltaX, deltaY, scrollX, scrollY,
scrollRangeX, scrollRangeY, maxOverScrollX, newMaxOverScrollY,
isTouchEvent);
}
}
(2)然后在布局文件代码中像使用Android原生的ScrollView一样使用ZhangPhilScrollView包裹需要实现弹性回弹交互设计的组件,在我的这个例子中,出于简单的目的,假设ZhangPhilScrollView包裹的只是一个TextView:
- <zhangphil.view.ZhangPhilScrollView xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent" >
- <TextView
- android:id="@+id/text"
- android:layout_width="match_parent"
- android:layout_height="wrap_content" />
- </zhangphil.view.ZhangPhilScrollView>
<zhangphil.view.ZhangPhilScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</zhangphil.view.ZhangPhilScrollView>
测试:
- package zhangphil.view;
- import zhangphil.view.R;
- import android.support.v7.app.ActionBarActivity;
- import android.widget.TextView;
- import android.graphics.Color;
- import android.os.Bundle;
- public class MainActivity extends ActionBarActivity {
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- TextView text = (TextView) findViewById(R.id.text);
- // 测试数据集。
- String s = "";
- for (int i = 0; i < 10; i++) {
- s += i + "\n";
- }
- text.setText(s);
- // 设置TextView的背景颜色,更容易观察出弹性回弹效果。
- text.setBackgroundColor(Color.RED);
- }