本文實例講述了Android開發(fā)使用自定義view實現(xiàn)ListView下拉的視差特效功能。分享給大家供大家參考，具體如下：
一、概述：
現(xiàn)在流型的APP如微信朋友圈，QQ空間，微博個人展示都有視差特效的影子。
如圖：下拉圖片會產(chǎn)生圖片拉升的效果，放手后圖片有彈回到原處：
那我們?nèi)绾螌崿F(xiàn)呢？
1）重寫ListView控件：
2）重寫里面的overScrollBy方法
3）在松手后執(zhí)行值動畫
二、具體實現(xiàn)：
1.創(chuàng)建ParallaListView 自定義ListView
public class ParallaListView extends ListView { private static final String TAG = "tag"; public ParallaListView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public ParallaListView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public ParallaListView(Context context) { this(context, null); }}2）添加到布局里：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <com.android.imooc.paralla.ParallaListView android:id="@+id/lv_paralla" android:layout_width="match_parent" android:layout_height="match_parent" > </com.android.imooc.paralla.ParallaListView></LinearLayout>
3）生成主頁,填充數(shù)據(jù)：
public class ParallaActivity extends Activity { private ParallaListView mListView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_paralla); initViews(); } private void initViews() { mListView = (ParallaListView) findViewById(R.id.lv_paralla); mListView.setAdapter(new ArrayAdapter<String>(ParallaActivity.this, android.R.layout.simple_list_item_1, Cheeses.NAMES)); }}4）創(chuàng)建頭布局：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/iv_header" android:scaleType="centerCrop" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/parallax_img" /></LinearLayout>
圖片設(shè)成scaleType="centerCrop"模式
其它模式說明:
5）在主頁里找到頭布局并添加到listview里
View mHeader = LayoutInflater.from(this).inflate(R.layout.view_paralla_header, null);mListView = (ParallaListView) findViewById(R.id.lv_paralla);mListView.addHeaderView(mHeader);
三、功能實現(xiàn)：
1.現(xiàn)在基本能看到效果了，但我們必須要拖動圖片，這就要實現(xiàn)這個方法overScrollBy
因為拖動是Y軸方向，所以只要打印Y軸方向的各個參數(shù)就好了
@Overrideprotected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) { Logger.i(TAG, "deltaY="+deltaY + " scrollX="+scrollX+ " scrollRangeY="+scrollRangeY + " maxOverScrollY=" +maxOverScrollY + " isTouchEvent=" +isTouchEvent); return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);}得到數(shù)據(jù)下拉：deltaY=-3 scrollX=0 scrollRangeY=0 maxOverScrollY=0 isTouchEvent=true
得到數(shù)據(jù)上拉：deltaY=4 scrollX=0 scrollRangeY=0 maxOverScrollY=0 isTouchEvent=true
2.如果是下拉，我們把值賦給header,但我們?nèi)绾潍@得高度呢？
1)在主頁里初始化圖片，然后設(shè)置到parallaListView里
ImageView iv = (ImageView) findViewById(R.id.iv_head);mListView.setParallaImage(iv);
2)在parallaListView創(chuàng)建方法setParallaImage
public void setParallaImage(ImageView iv) { mImageView = iv; //在這個方法里獲得高度 int height = iv.getHeight(); int measureHeight = iv.getMeasuredHeight(); int instrinsicHeight = iv.getDrawable().getIntrinsicHeight(); Logger.i(TAG, "height="+height + " measureHeight="+measureHeight+ " instrinsicHeight="+instrinsicHeight );}得到結(jié)果：height=0 measureHeight=0 instrinsicHeight=732
為什么會如此：因為此時的圖片還沒有初始化
那我們?nèi)绾蔚玫礁叨饶兀?/p>
記得有個方法叫做iv.getViewTreeObserver()，那我們就在這個方法的監(jiān)聽事件里得到高度
iv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override public void onGlobalLayout() { //當(dāng)布局填充完成后，此方法會被調(diào)用 mListView.setParallaImage(iv); //移除監(jiān)聽 iv.getViewTreeObserver().removeGlobalOnLayoutListener(this); }});此時得到的高度height=240 measureHeight=240 instrinsicHeight=732
3）把值賦給圖片就能實現(xiàn)拉伸的效果了
if (isTouchEvent && deltaY < 0) { mHeight += Math.abs(deltaY); if (mHeight <= mBitmapHeight) { mImageView.getLayoutParams().height = mHeight; mImageView.requestLayout(); }}3.松手后圖片回彈，這個功能在onTouchEvent里實現(xiàn)：
@Overridepublic boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_UP: final int startHeight = mImageView.getHeight(); final int endHeight = mBitmapHeight; //值動畫 //valueAnim(startHeight, endHeight); //豎直移動動畫 ResetAnimation anim = new ResetAnimation(mImageView, startHeight, endHeight); anim.setInterpolator(new OvershootInterpolator()); startAnimation(anim); break; default: break; } return super.onTouchEvent(ev);}4、動畫實現(xiàn)：
/** * @描述 使用平移動畫實現(xiàn)下拉圖片后彈射回去 * @項目名稱 App_imooc * @包名 com.android.imooc.paralla * @類名 ResetAnimation * @author chenlin * @date 2016年5月29日 下午12:27:00 * @version 1.0 */public class ResetAnimation extends Animation { private ImageView mImageView; private int mStartHeight; private int mEndHeight; public ResetAnimation(ImageView imageView, int startHeight, int endHeight) { this.mImageView = imageView; this.mStartHeight = startHeight; this.mEndHeight = endHeight; setDuration(500); } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { int newHeight = (int) (ValueUtil.evalute(interpolatedTime, mStartHeight, mEndHeight) + 0.5f); mImageView.getLayoutParams().height = newHeight; mImageView.requestLayout(); super.applyTransformation(interpolatedTime, t); }}四、源碼下載：
完整實例代碼點擊此處本站下載。
更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《Android控件用法總結(jié)》、《Android開發(fā)入門與進階教程》、《Android視圖View技巧總結(jié)》、《Android編程之a(chǎn)ctivity操作技巧總結(jié)》、《Android數(shù)據(jù)庫操作技巧總結(jié)》及《Android資源操作技巧匯總》
希望本文所述對大家Android程序設(shè)計有所幫助。
新聞熱點
疑難解答
