Android自定義控件——有彈性的ListView，ScrollView

時間  2019-12-05
標籤 android 自定義 控件 有彈性 listview scrollview 欄目 Android 简体版
原文   原文鏈接

上一次咱們試驗了有彈性的ScrollView。詳情html

這一次，咱們來試驗有彈性的ScrollView。java

國際慣例，效果圖：android



主要代碼：ide

[java]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
  1. import android.content.Context;  
  2. import android.graphics.Rect;  
  3. import android.util.AttributeSet;  
  4. import android.view.MotionEvent;  
  5. import android.view.animation.Animation;  
  6. import android.view.animation.Animation.AnimationListener;  
  7. import android.view.animation.TranslateAnimation;  
  8. import android.widget.AbsListView;  
  9. import android.widget.ListView;  
  10.   
  11. /** 
  12.  * ElasticScrollView有彈性的ListView 
  13.  */  
  14. public class ElasticListView extends ListView {  
  15.     private float y;  
  16.     private Rect normal = new Rect();  
  17.     private boolean animationFinish = true;  
  18.   
  19.     public ElasticListView(Context context) {  
  20.         super(context);  
  21.         init();  
  22.     }  
  23.   
  24.     public ElasticListView(Context context, AttributeSet attrs) {  
  25.         super(context, attrs);  
  26.         init();  
  27.     }  
  28.   
  29.     protected void onScrollChanged(int l, int t, int oldl, int oldt) {  
  30.   
  31.     }  
  32.   
  33.     boolean overScrolled = false;  
  34.     private void init() {  
  35.         setOnScrollListener(new OnScrollListener() {  
  36.             @Override  
  37.             public void onScrollStateChanged(AbsListView view, int scrollState) {  
  38.             }  
  39.   
  40.             @Override  
  41.             public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {  
  42.                 overScrolled = false;  
  43.             }  
  44.         });  
  45.     }  
  46.       
  47.     @Override  
  48.     protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {  
  49.         overScrolled = true;  
  50.     }  
  51.   
  52.     @Override  
  53.     public boolean onTouchEvent(MotionEvent ev) {  
  54.         commOnTouchEvent(ev);  
  55.         return super.onTouchEvent(ev);  
  56.     }  
  57.   
  58.     public void commOnTouchEvent(MotionEvent ev) {  
  59.         if (animationFinish) {  
  60.             int action = ev.getAction();  
  61.             switch (action) {  
  62.             case MotionEvent.ACTION_DOWN:  
  63.                 y = ev.getY();  
  64.                 break;  
  65.             case MotionEvent.ACTION_UP:  
  66.                 y = 0;  
  67.                 if (isNeedAnimation()) {  
  68.                     animation();  
  69.                 }  
  70.                 break;  
  71.             case MotionEvent.ACTION_MOVE:  
  72.                 final float preY = y == 0 ? ev.getY() : y;  
  73.                 float nowY = ev.getY();  
  74.                 int deltaY = (int) (preY - nowY);  
  75.   
  76.                 y = nowY;  
  77.                 // 當滾動到最上或者最下時就不會再滾動，這時移動佈局  
  78.                 if (isNeedMove(deltaY)) {  
  79.                     if (normal.isEmpty()) {  
  80.                         // 保存正常的佈局位置  
  81.                         normal.set(getLeft(), getTop(), getRight(), getBottom());  
  82.                     }  
  83.                     // 移動佈局  
  84.                     layout(getLeft(), getTop() - deltaY / 2, getRight(), getBottom() - deltaY / 2);  
  85.                 }  
  86.                 break;  
  87.             default:  
  88.                 break;  
  89.             }  
  90.         }  
  91.     }  
  92.   
  93.     // 開啓動畫移動  
  94.     public void animation() {  
  95.         // 開啓移動動畫  
  96.         TranslateAnimation ta = new TranslateAnimation(0, 0, 0, normal.top - getTop());  
  97.         ta.setDuration(200);  
  98.         ta.setAnimationListener(new AnimationListener() {  
  99.             @Override  
  100.             public void onAnimationStart(Animation animation) {  
  101.                 animationFinish = false;  
  102.   
  103.             }  
  104.   
  105.             @Override  
  106.             public void onAnimationRepeat(Animation animation) {  
  107.   
  108.             }  
  109.   
  110.             @Override  
  111.             public void onAnimationEnd(Animation animation) {  
  112.                 clearAnimation();  
  113.                 // 設置回到正常的佈局位置  
  114.                 layout(normal.left, normal.top, normal.right, normal.bottom);  
  115.                 normal.setEmpty();  
  116.                 animationFinish = true;  
  117.             }  
  118.         });  
  119.         startAnimation(ta);  
  120.     }  
  121.   
  122.     // 是否須要開啓動畫  
  123.     public boolean isNeedAnimation() {  
  124.         return !normal.isEmpty();  
  125.     }  
  126.   
  127.     // 是否須要移動佈局  
  128.     public boolean isNeedMove(float deltaY) {  
  129.         if (overScrolled && getChildCount() > 0) {  
  130.             if (getLastVisiblePosition() == getCount() - 1 && deltaY > 0) {  
  131.                 return true;  
  132.             }  
  133.             if (getFirstVisiblePosition() == 0 && deltaY < 0) {  
  134.                 return true;  
  135.             }  
  136.         }  
  137.         return false;  
  138.     }  
  139. }  

測試代碼：

[java]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
  1. public class MainActivity extends Activity {  
  2.     ElasticListView listView;  
  3.     @Override  
  4.     protected void onCreate(Bundle savedInstanceState) {  
  5.         super.onCreate(savedInstanceState);  
  6.         setContentView(R.layout.activity_main);  
  7.           
  8.         listView = (ElasticListView) findViewById(R.id.listview);  
  9.           
  10.         String[] listValues = new String[20];  
  11.         for (int i=0;i<listValues.length;i++) {  
  12.             listValues[i] = "TextView" + i;  
  13.         }  
  14.         listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, listValues));  
  15.     }  
  16. }  

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
  1. public class MainActivity extends Activity {  
  2.     ElasticListView listView;  
  3.     @Override  
  4.     protected void onCreate(Bundle savedInstanceState) {  
  5.         super.onCreate(savedInstanceState);  
  6.         setContentView(R.layout.activity_main);  
  7.           
  8.         listView = (ElasticListView) findViewById(R.id.listview);  
  9.           
  10.         String[] listValues = new String[20];  
  11.         for (int i=0;i<listValues.length;i++) {  
  12.             listValues[i] = "TextView" + i;  
  13.         }  
  14.         listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, listValues));  
  15.     }  
  16. }  
public class FlexibleScrollView extends ScrollView {  
  
    private Context mContext;  
    private static int mMaxOverDistance = 50;  
  
    public FlexibleScrollView(Context context, AttributeSet attrs,  
            int defStyleAttr) {  
        super(context, attrs, defStyleAttr);  
        this.mContext = context;  
        initView();  
    }  
  
    public FlexibleScrollView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        this.mContext = context;  
        initView();  
    }  
  
    public FlexibleScrollView(Context context) {  
        super(context);  
        this.mContext = context;  
        initView();  
    }  
  
    private void initView() {  
        DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();  
        float density = metrics.density;  
        mMaxOverDistance = (int) (density * mMaxOverDistance);  
    }  
  
    @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, mMaxOverDistance,  
                isTouchEvent);  
    }  
}
經過上面這個類也能夠實現彈性效果

2、仿朋友圈背景圖片下拉佈局

public class ScrollDampView extends ScrollView {
	/** 該屬性具體參數 怎麼控制 未解！！！！ */
	private static final int LEN = 0xc8;
	/** 回彈時所用的時間 */
	private static final int DURATION = 200;
	/** 最大Y座標 其值通常設定爲Scroller對應控件的高度 */
	private static final int MAX_DY = 200;

	private Scroller mScroller;
	/** 阻尼係數 */
	private static final float OFFSET_RADIO = 2.5f;

	private float startY;
	private int imageViewH;

	private ImageView imageView;
	private boolean scrollerType;

	public ScrollDampView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

	}

	public ScrollDampView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mScroller = new Scroller(context);
	}

	public ScrollDampView(Context context) {
		super(context);

	}

	public void setImageView(ImageView imageView) {
		this.imageView = imageView;
	}

	float curY;

	@Override
	public boolean dispatchTouchEvent(MotionEvent event) {
		int action = event.getAction();
		if (!mScroller.isFinished()) {
			return super.onTouchEvent(event);
		}
		switch (action) {
		case MotionEvent.ACTION_DOWN:// 變量賦初始值
			imageViewH = imageView.getHeight();
			startY = event.getY();
			break;
		case MotionEvent.ACTION_MOVE:
			if (imageView.isShown()) {
				float deltaY = (event.getY() - startY ) / OFFSET_RADIO;
				Log.i("syso", "deltaY: "+deltaY+" imageTop: "+imageView.getTop());
				//往下拉
				if (deltaY > 0 && deltaY <= imageView.getBottom() + LEN) {
					android.view.ViewGroup.LayoutParams params = imageView.getLayoutParams();
					params.height = (int) (imageViewH + deltaY);// 改變高度
					imageView.setLayoutParams(params);
				}
				scrollerType = false;
			}
			break;
		case MotionEvent.ACTION_UP:
			scrollerType = true;
			// 開始一個動畫控制，由(startX , startY)在duration時間內前進(dx,dy)個單位
			// ，即到達座標爲(startX+dx , startY+dy)處
			mScroller.startScroll(imageView.getLeft(), imageView.getBottom(),
					0 - imageView.getLeft(),
					imageViewH - imageView.getBottom(), DURATION);
			invalidate();
			break;
		}

		return super.dispatchTouchEvent(event);
	}

	// //該mScroller針對於imageView的變化
	// 被父視圖調用，用於必要時候對其子視圖的值（mScrollX和mScrollY）
	// 進行更新。典型的狀況如：父視圖中某個子視圖使用一個Scroller對象來實現滾動操做，會使得此方法被調用。
	@Override
	public void computeScroll() {
		if (mScroller.computeScrollOffset()) {
			int x = mScroller.getCurrX();
			int y = mScroller.getCurrY();// ImageView的當前Y座標
			imageView.layout(0, 0, x + imageView.getWidth(), y);// 使imageView自己作相應變化
			invalidate();
			// 滑動還未完成時，手指擡起時，當前y座標大於其實imageView的高度時
			// 設定imageView的佈局參數 做用：使除imageView以外的控件作相應變化
			if (!mScroller.isFinished() && scrollerType && y > MAX_DY) {
				android.view.ViewGroup.LayoutParams params = imageView
						.getLayoutParams();
				params.height = y;
				imageView.setLayoutParams(params);
			}
		}
	}

}

佈局文件： 

<com.example.dampview.ScrollDampView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dampview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <!--此處必須設置imageview的scaleType爲centerCrop,固然在代碼中設置也能夠-->
        <ImageView
            android:id="@+id/img"
            android:layout_width="match_parent"
            android:layout_height="160dp"
            android:scaleType="centerCrop"
            android:src="@drawable/image" />

        <ImageView
            android:id="@+id/iv_photo"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginTop="-32dp"
            android:src="@drawable/ic_launcher" 
            />

    </LinearLayout>

</com.example.dampview.ScrollDampView>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程