Android重寫ScrollView實現上拉下拉回彈,下拉頭部放大功能
阿新 • • 發佈:2019-01-04
效果圖:
自定義ScrollView:
public class MyScrollView extends ScrollView {
//----頭部收縮屬性--------
// 記錄首次按下位置
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 MyScrollView(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.5); // 滾動距離乘以一個係數
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;
final float distance = dropZoomView.getMeasuredHeight() - dropZoomViewHeight;
// 設定動畫
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/2);
lp.width = (int) (dropZoomViewWidth);
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;
}
}
佈局:
最外層 是MyScrollView,接著是你將要寫佈局的線性佈局或者是相對佈局,再是你要拉昇的Viewgroup,第三層才是有拉昇效果的
效果圖第一張的佈局:
<sosee.mytext30.MyScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="sosee.mytext30.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="vertical">
<ImageView
android:src="@mipmap/ic_launcher"
android:layout_width="match_parent"
android:layout_height="200dp" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="@mipmap/ic_launcher" />
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="@mipmap/ic_launcher" />
<ImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="@mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>
</sosee.mytext30.MyScrollView>
<sosee.mytext30.MyScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="sosee.mytext30.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorAccent" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" /> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="200dp" android:src="@mipmap/ic_launcher" /> <ImageView android:layout_width="match_parent" android:layout_height="200dp" android:src="@mipmap/ic_launcher" /> <ImageView android:id="@+id/iv" android:layout_width="match_parent" android:layout_height="200dp" android:src="@mipmap/ic_launcher" /> </LinearLayout> </LinearLayout> </sosee.mytext30.MyScrollView>