最近有研究了QQ空間可拉伸頭部控制元件的listView。如何去做呢？這裡使用了自定義listView的方法。先看效果圖吧：
究竟如何去做呢？
可以用的方法有：
- 1.繼承 extends ViewGrop
- 2.RecycleView +Behavior+CoordinateLayout
- 3.ViewGroup 組合控制元件
- 4.ListView + headView
這次我們主要用原生的自定義listView去做。
- 1.extends 繼承 ListView
- 2.監聽過度監聽，在縮放頭部圖片重寫overScrollBy方法
- 重寫onScrollChanged方法監聽度放大時，執行縮小圖片
- 重寫onTouchEvent方法，執行觸控時釋放事件的處理
/**
* 類功能描述：</br>
* 仿QQ空間之打造個性化可拉伸頭部控制元件</br>
* @author yuyahao
* @version 1.0 </p> 修改時間：</br> 修改備註：</br>
*/
public class CustomerScrollZoomListView extends ListView{
private ImageView imageView;
private int mMeasureWeight;
public CustomerScrollZoomListView(Context context, AttributeSet attrs) {
super(context, attrs);
mMeasureWeight = context.getResources().getDimensionPixelSize(R.dimen.dp200);
}
public CustomerScrollZoomListView(Context context) {
super(context);
}
public void setZoomImageView(ImageView iView ){
imageView = iView;
}
@Override
protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
if(deltaY < 0){//下拉過度 對圖片進行放大
imageView.getLayoutParams().height = imageView.getHeight() - deltaY;
imageView.requestLayout();
}else{//上拉過度時
imageView.getLayoutParams().height = imageView.getHeight() - deltaY;
imageView.requestLayout();
}
LogUtil.i("yuyahao","deltaY: "+deltaY);
return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
//只有當imageView過度放大時，這裡才會去執行縮小
View view = (View) imageView.getParent();
int detalY = view.getTop();//此時 detay 為負值
if(imageView.getHeight() > mMeasureWeight){//如果當前圖片的高度 > 初始高度
imageView.getLayoutParams().height = imageView.getHeight() + detalY;
imageView.requestLayout();
}
LogUtil.i("yuyahao","---- deltaY: "+detalY);
super.onScrollChanged(l, t, oldl, oldt);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()){
case MotionEvent.ACTION_UP://鬆手釋放時
MyCustomserAnimation myCustomserAnimation = new MyCustomserAnimation(mMeasureWeight);
myCustomserAnimation.setDuration(300);
myCustomserAnimation.setInterpolator(new BounceInterpolator());
imageView.startAnimation(myCustomserAnimation);
break;
}
return super.onTouchEvent(ev);
}
public class MyCustomserAnimation extends Animation{
private int delay ;//高度差
private int currentHeight ; //當前的高度
public MyCustomserAnimation( int targetHeight){
//this.delay = delay;
delay = imageView.getHeight() - targetHeight;
currentHeight = imageView.getHeight();
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
imageView.getLayoutParams().height = (int) (currentHeight - delay * interpolatedTime);
imageView.requestLayout();
super.applyTransformation(interpolatedTime, t);
}
}
}複製程式碼這裡重寫了overScrollBy方法
這裡原始碼是怎麼說的呢？
/**
* This is called in response to an internal scroll in this view (i.e., the
* view scrolled its own contents). This is typically as a result of
* {@link #scrollBy(int, int)} or {@link #scrollTo(int, int)} having been
* called.
*
* @param l Current horizontal scroll origin.
* @param t Current vertical scroll origin.
* @param oldl Previous horizontal scroll origin.
* @param oldt Previous vertical scroll origin.
*/
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
notifySubtreeAccessibilityStateChangedIfNeeded();
if (AccessibilityManager.getInstance(mContext).isEnabled()) {
postSendViewScrolledAccessibilityEventCallback();
}
mBackgroundSizeChanged = true;
if (mForegroundInfo != null) {
mForegroundInfo.mBoundsChanged = true;
}
final AttachInfo ai = mAttachInfo;
if (ai != null) {
ai.mViewScrollChanged = true;
}
if (mListenerInfo != null && mListenerInfo.mOnScrollChangeListener != null) {
mListenerInfo.mOnScrollChangeListener.onScrollChange(this, l, t, oldl, oldt);
}
}複製程式碼大致意思我們都可以看得出來.大致意思是響應於該檢視中的內部滾動而呼叫的（即檢視滾動其自己的內容）比如：eltaY < 0的時候下拉過度 對圖片進行放大。 小於0時，上拉過度。
日前google上搜尋“android overscroll”，對此效果的介紹很多，但關於其具體使用方式和實現，則很少涉及，偶有提及，也經常答非所問或似是而非，反而誤導了別人。於是我查閱了android相關原始碼，並做了一些測試，在此講講我的理解。
首先是overscroll功能本身。
- 在最頂層的View類提供了支援，可通過setOverScrollMode函式控制其出現條件。但其實View中並沒有實現overscroll功能，
- 提供了一個輔助函式overScrollBy，該函式根據overScrollMode和內容是否需要滾動控制最大滾動範圍。
- 最後將計算結果傳給onOverScrolled實現具體的overscroll功能
- 但此函式在View類中是全空的
overscroll功能真正的實現分別在ScrollView、AbsListView、HorizontalScrollView和WebView中各有一份，程式碼基本一樣。 - 以ScrollView為例，它在處理筆點移動訊息時呼叫overScrollBy來滾動檢視，然後過載了overScrollBy函式來實現具體功能，其位置計算通過OverScroller類實現。
- OverScroller作為一個計算引擎，應該是一個獨立的模組，具體滾動效果和範圍都不可能通過它來設定，我覺得沒有必要細看。但滾動位置最終是它給出的，那相關資料肯定要傳遞給它。
- 回頭看overScrollBy函式，它有兩個控制overScroll出界範圍的引數，幾個實現裡面都是取自ViewConfiguration.getScaledOverscrollDistance，而這個引數的值在我的原始碼中都是0，而且我沒找到任何可以影響其結果的設定。
Activity中的程式碼：
/**
* 類功能描述：</br>
* 仿QQ空間之打造個性化可拉伸頭部控制元件</br>
* @author yuyahao
* @version 1.0 </p> 修改時間：</br> 修改備註：</br>
*/
public class CustomerScrollZoomListViewActivity extends BaseActivity{
@Bind(R.id.lv_customser_zoomscroll)
CustomerScrollZoomListView lv_customser_zoomscroll;
private List<Student> list = new ArrayList<>();
private ZoomScrollListViewAdapter zoomScrollListViewAdapter;
private View headView;
@Override
protected void initData() {
setContentView(R.layout.activity_customerscrollzoomlistview);
ButterKnife.bind(this);
list.addAll(ServiceData.getStudentList());
zoomScrollListViewAdapter = new ZoomScrollListViewAdapter(CustomerScrollZoomListViewActivity.this,list,R.layout.item_xzoomscrollview);
headView = LayoutInflater.from(CustomerScrollZoomListViewActivity.this).inflate(R.layout.zoom_headview,null);
ImageView iamgeView = (ImageView) headView.findViewById(R.id.iv_zoom_head);
lv_customser_zoomscroll.setZoomImageView(iamgeView);
lv_customser_zoomscroll.addHeaderView(headView);
lv_customser_zoomscroll.setAdapter(zoomScrollListViewAdapter);
}
}複製程式碼xml佈局
<?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">
<com.yolo.myapplication.activity.view.CustomerScrollZoomListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/lv_customser_zoomscroll"
/>
</LinearLayout>複製程式碼adapter介面卡
public class ZoomScrollListViewAdapter extends CommonAdapter<Student> {
private Context context;
public ZoomScrollListViewAdapter(Context context, List<Student> listDatas, int layoutId) {
super(context, listDatas, layoutId);
this.context = context;
}
@Override
protected void fillData(ViewHolder holder, int position) {
TextView actNum = holder.getView(R.id.team_item_active_num);
TextView time = holder.getView(R.id.team_item_time);
TextView title = holder.getView(R.id.team_item_title);
ImageView icon = holder.getView(R.id.team_item_icon);
Student item = listDatas.get(position);
actNum.setText(String.valueOf(item.getList().size()) + "");
time.setText(String.valueOf(item.getList().get(0).getPerListenceName()) + "");
title.setText(item.getName());
}
}複製程式碼adapter介面卡請參考：
教你打造一個萬能的介面卡
item：佈局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:gravity="center_vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="@dimen/dp80"
android:layout_height="@dimen/dp80"
android:background="@drawable/img2"
android:scaleType="fitXY"
android:id="@+id/team_item_icon"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginLeft="@dimen/dp10"
android:orientation="vertical"
android:layout_height="@dimen/dp80">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/team_item_title"
android:gravity="center_vertical"
android:layout_weight="1"
android:text="卡卡羅特"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="天不排名"
android:id="@+id/team_item_time"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp20"
android:text="戰鬥值： "
android:id="@+id/team_item_active_num"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>複製程式碼專案原始碼地址：MyZoomListView.rar
如果你覺得此文對您有所幫助，歡迎入群 QQ交流群 ：232203809
微信公眾號：終端研發部
（歡迎關注學習和交流）