Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> android 滾動條下拉反彈的效果(類似微信朋友圈)

android 滾動條下拉反彈的效果(類似微信朋友圈)

編輯:關於android開發

android 滾動條下拉反彈的效果(類似微信朋友圈)


微信朋友圈上面的圖片封面,QQ空間說說上面的圖片封面都有下拉反彈的效果,這些都是使用滾動條實現的。下拉,當松開時候,反彈至原來的位置。下拉時候能看到背景圖片。那麼這裡簡單介紹一下這種效果的實現。

本文源碼下載:點擊

1、效果圖

\

 

這部手機顯示的分辨率有限,很老的手機調試。

2、具有反彈效果BounceScrollView

 

package com.org.scroll;

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反彈效果的實現
 */
public class BounceScrollView extends ScrollView {
	private View inner;// 孩子View

	private float y;// 點擊時y坐標
	// 矩形(這裡只是個形式,只是用於判斷是否需要動畫.)
	private Rect normal = new Rect();

	private boolean isCount = false;// 是否開始計算

	public BounceScrollView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	/***
	 * 根據 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:
			break;
		case MotionEvent.ACTION_UP:
			// 手指松開.
			if (isNeedAnimation()) {
				animation();
				isCount = false;
			}
			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) (preY - nowY);// 滑動距離
			if (!isCount) {
				deltaY = 0; // 在這裡要歸0.
			}

			y = nowY;
			// 當滾動到最上或者最下時就不會再滾動,這時移動布局
			if (isNeedMove()) {
				// 初始化頭部矩形
				if (normal.isEmpty()) {
					// 保存正常的布局位置
					normal.set(inner.getLeft(), inner.getTop(),
							inner.getRight(), inner.getBottom());
				}
//				Log.e(jj, 矩形: + inner.getLeft() + , + inner.getTop()
//						+ , + inner.getRight() + , + inner.getBottom());
				// 移動布局
				inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2,
						inner.getRight(), inner.getBottom() - deltaY / 2);
			}
			isCount = true;
			break;

		default:
			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);

//		Log.e(jj, 回歸: + normal.left + , + normal.top + , + normal.right
//				+ , + normal.bottom);

		normal.setEmpty();

	}

	// 是否需要開啟動畫
	public boolean isNeedAnimation() {
		return !normal.isEmpty();
	}

	/***
	 * 是否需要移動布局 inner.getMeasuredHeight():獲取的是控件的總高度
	 * 
	 * getHeight():獲取的是屏幕的高度
	 * 
	 * @return
	 */
	public boolean isNeedMove() {
		int offset = inner.getMeasuredHeight() - getHeight();
		int scrollY = getScrollY();
//		Log.e(jj, scrolly= + scrollY);
		// 0是頂部,後面那個是底部
		if (scrollY == 0 || scrollY == offset) {
			return true;
		}
		return false;
	}

}

 

3、MainActivity

 

 

package com.org.activity;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}

}
這個沒做什麼,主要看布局,以及BounceScrollView類。

 

 

4、activity_main布局

 


                

                

                    

                        
                    
                
            
        
    


松開向上彈時候,還可以設置一下,具體用的時候再調試設置一下吧!

 

 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved