Android實(shí)現(xiàn)View滑動(dòng)效果的6種方法
本文實(shí)例為大家分享了Android實(shí)現(xiàn)View滑動(dòng)效果的具體代碼,供大家參考,具體內(nèi)容如下
一、View的滑動(dòng)簡(jiǎn)介View的滑動(dòng)是Android實(shí)現(xiàn)自定義控件的基礎(chǔ),同時(shí)在開(kāi)發(fā)中我們也難免會(huì)遇到View的滑動(dòng)的處理。其實(shí)不管是那種滑動(dòng)的方式基本思想都是類(lèi)似的:當(dāng)觸摸事件傳到View時(shí),系統(tǒng)記下觸摸點(diǎn)的坐標(biāo),手指移動(dòng)時(shí)系統(tǒng)記下移動(dòng)后的觸摸的坐標(biāo)并算出偏移量,并通過(guò)偏移量來(lái)修改View的坐標(biāo)。
實(shí)現(xiàn)View滑動(dòng)有很多種方法,這篇文章主要講解六種滑動(dòng)的方法,分別是:layout()、offsetLeftAndRight()與offsetTopAndBottom()、LayoutParams、動(dòng)畫(huà)、scollTo與scollBy和Scroller;在下一篇文章我們會(huì)詳細(xì)介紹屬性動(dòng)畫(huà)。
二、實(shí)現(xiàn)View滑動(dòng)的六種方法2.1 layout()
view進(jìn)行繪制的時(shí)候會(huì)調(diào)用onLayout()方法來(lái)設(shè)置顯示的位置,因此我們同樣也可以通過(guò)修改View的left、top、right、bottom這四種屬性來(lái)控制View的坐標(biāo)。首先我們要自定義一個(gè)View,在onTouchEvent()方法中獲取觸摸點(diǎn)的坐標(biāo):
public boolean onTouchEvent(MotionEvent event) { //獲取到手指處的橫坐標(biāo)和縱坐標(biāo) int x = (int) event.getX(); int y = (int) event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: lastX = x; lastY = y; break;
接下來(lái)我們?cè)贏CTION_MOVE事件中計(jì)算偏移量,再調(diào)用layout()方法重新放置這個(gè)自定義View的位置就好了:
case MotionEvent.ACTION_MOVE: //計(jì)算移動(dòng)的距離 int offsetX = x - lastX; int offsetY = y - lastY; //調(diào)用layout方法來(lái)重新放置它的位置 layout(getLeft()+offsetX, getTop()+offsetY, getRight()+offsetX , getBottom()+offsetY); break;
當(dāng)我們每次移動(dòng)時(shí)都會(huì)調(diào)用layout()方法來(lái)對(duì)自己重新布局,從而達(dá)到移動(dòng)View的效果。
自定義View的全部代碼(CustomView.java):
package com.example.liuwangshu.moonviewslide;import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;public class CustomView extends View { private int lastX; private int lastY; public CustomView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public CustomView(Context context, AttributeSet attrs) { super(context, attrs); } public CustomView(Context context) { super(context); } public boolean onTouchEvent(MotionEvent event) { //獲取到手指處的橫坐標(biāo)和縱坐標(biāo) int x = (int) event.getX(); int y = (int) event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: lastX = x; lastY = y; break; case MotionEvent.ACTION_MOVE: //計(jì)算移動(dòng)的距離 int offsetX = x - lastX; int offsetY = y - lastY; //調(diào)用layout方法來(lái)重新放置它的位置 layout(getLeft()+offsetX, getTop()+offsetY, getRight()+offsetX , getBottom()+offsetY); break; } return true; }}
布局中引用自定義View:
<?xml version='1.0' encoding='utf-8'?><LinearLayout xmlns:android='http://schemas.android.com/apk/res/android' xmlns:tools='http://schemas.android.com/tools' android:layout_width='match_parent' android:layout_height='match_parent' android:orientation='vertical'> <com.example.liuwangshu.moonviewslide.CustomView android: android:layout_width='80dp' android:layout_height='80dp' android:layout_margin='50dp' android:background='@android:color/holo_red_light' /></LinearLayout>
2.2 offsetLeftAndRight()與offsetTopAndBottom()
這兩種方法和layout()方法效果方法差不多,使用也差不多,我們將ACTION_MOVE中的代碼替換成如下代碼:
case MotionEvent.ACTION_MOVE: //計(jì)算移動(dòng)的距離 int offsetX = x - lastX; int offsetY = y - lastY; //對(duì)left和right進(jìn)行偏移 offsetLeftAndRight(offsetX); //對(duì)top和bottom進(jìn)行偏移 offsetTopAndBottom(offsetY); break;
2.3 LayoutParams(改變布局參數(shù))
LayoutParams主要保存了一個(gè)View的布局參數(shù),因此我們可以通過(guò)LayoutParams來(lái)改變View的布局的參數(shù)從而達(dá)到了改變View的位置的效果。同樣的我們將ACTION_MOVE中的代碼替換成如下代碼:
LinearLayout.LayoutParams layoutParams= (LinearLayout.LayoutParams) getLayoutParams(); layoutParams.leftMargin = getLeft() + offsetX; layoutParams.topMargin = getTop() + offsetY; setLayoutParams(layoutParams);
因?yàn)楦缚丶荓inearLayout,所以我們用了LinearLayout.LayoutParams,如果父控件是RelativeLayout則要使用RelativeLayout.LayoutParams。除了使用布局的LayoutParams外,我們還可以用ViewGroup.MarginLayoutParams來(lái)實(shí)現(xiàn):
ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) getLayoutParams();layoutParams.leftMargin = getLeft() + offsetX;layoutParams.topMargin = getTop() + offsetY;setLayoutParams(layoutParams);
2.4 動(dòng)畫(huà)
可以采用View動(dòng)畫(huà)來(lái)移動(dòng),在res目錄新建anim文件夾并創(chuàng)建translate.xml:
<?xml version='1.0' encoding='utf-8'?><set xmlns:android='http://schemas.android.com/apk/res/android'> <translate android:fromXDelta='0' android:toXDelta='300' android:duration='1000'/></set>
在Java代碼中引用:
mCustomView.setAnimation(AnimationUtils.loadAnimation(this, R.anim.translate));
當(dāng)然使用屬性動(dòng)畫(huà)移動(dòng)那就更簡(jiǎn)單了,我們讓CustomView在1000毫秒內(nèi)沿著X軸像右平移300像素:
ObjectAnimator.ofFloat(mCustomView,'translationX',0,300).setDuration(1000).start();
2.5 scollTo與scollBy
scollTo(x,y)表示移動(dòng)到一個(gè)具體的坐標(biāo)點(diǎn),而scollBy(dx,dy)則表示移動(dòng)的增量為dx、dy。其中scollBy最終也是要調(diào)用scollTo的。scollTo、scollBy移動(dòng)的是View的內(nèi)容,如果在ViewGroup中使用則是移動(dòng)他所有的子View。我們將ACTION_MOVE中的代碼替換成如下代碼:
((View)getParent()).scrollBy(-offsetX,-offsetY);
這里要實(shí)現(xiàn)CustomView隨著我們手指移動(dòng)的效果的話(huà),我們就需要將偏移量設(shè)置為負(fù)值。
2.6 Scroller
我們用scollTo/scollBy方法來(lái)進(jìn)行滑動(dòng)時(shí),這個(gè)過(guò)程是瞬間完成的,所以用戶(hù)體驗(yàn)不大好。這里我們可以使用Scroller來(lái)實(shí)現(xiàn)有過(guò)度效果的滑動(dòng),這個(gè)過(guò)程不是瞬間完成的,而是在一定的時(shí)間間隔完成的。Scroller本身是不能實(shí)現(xiàn)View的滑動(dòng)的,它需要配合View的computeScroll()方法才能彈性滑動(dòng)的效果。在這里我們實(shí)現(xiàn)CustomView平滑的向右移動(dòng)。
首先我們要初始化Scroller:
public CustomView(Context context, AttributeSet attrs) { super(context, attrs); mScroller = new Scroller(context); }
接下來(lái)重寫(xiě)computeScroll()方法,系統(tǒng)會(huì)在繪制View的時(shí)候在draw()方法中調(diào)用該方法,這個(gè)方法中我們調(diào)用父類(lèi)的scrollTo()方法并通過(guò)Scroller來(lái)不斷獲取當(dāng)前的滾動(dòng)值,每滑動(dòng)一小段距離我們就調(diào)用invalidate()方法不斷的進(jìn)行重繪,重繪就會(huì)調(diào)用computeScroll()方法,這樣我們就通過(guò)不斷的移動(dòng)一個(gè)小的距離并連貫起來(lái)就實(shí)現(xiàn)了平滑移動(dòng)的效果:
@Overridepublic void computeScroll() { super.computeScroll(); if(mScroller.computeScrollOffset()){ ((View) getParent()).scrollTo(mScroller.getCurrX(),mScroller.getCurrY()); //通過(guò)不斷的重繪不斷的調(diào)用computeScroll方法 invalidate(); } }
調(diào)用Scroller.startScroll()方法。我們?cè)贑ustomView中寫(xiě)一個(gè)smoothScrollTo()方法,調(diào)用Scroller.startScroll()方法,在2000毫秒內(nèi)沿X軸平移delta像素:
public void smoothScrollTo(int destX,int destY){ int scrollX=getScrollX(); int delta=destX-scrollX; //1000秒內(nèi)滑向destX mScroller.startScroll(scrollX,0,delta,0,2000); invalidate(); }
最后我們?cè)赩iewSlideActivity.java中調(diào)用CustomView的smoothScrollTo()方法
//使用Scroll來(lái)進(jìn)行平滑移動(dòng)mCustomView.smoothScrollTo(-400,0);
這里我們是設(shè)定CustomView沿著X軸向右平移400像素。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 利用CSS3新特性創(chuàng)建透明邊框三角2. JavaScrip簡(jiǎn)單數(shù)據(jù)類(lèi)型隱式轉(zhuǎn)換的實(shí)現(xiàn)3. 利用FastReport傳遞圖片參數(shù)在報(bào)表上展示簽名信息的實(shí)現(xiàn)方法4. ASP.NET Core實(shí)現(xiàn)中間件的幾種方式5. PHP設(shè)計(jì)模式中工廠(chǎng)模式深入詳解6. phpstorm斷點(diǎn)調(diào)試方法圖文詳解7. 在JSP中使用formatNumber控制要顯示的小數(shù)位數(shù)方法8. XML解析錯(cuò)誤:未組織好 的解決辦法9. ASP基礎(chǔ)入門(mén)第八篇(ASP內(nèi)建對(duì)象Application和Session)10. jsp實(shí)現(xiàn)textarea中的文字保存換行空格存到數(shù)據(jù)庫(kù)的方法
