實現view跟著手指滑動的效果(實現方式一)
實現該效果的基本思想是:當觸控view時,系統記下當前觸控點的座標,當手指移動時,系統記下移動後的觸控點座標,從而獲取到相對於前一次座標點的偏移量,並通過偏移量來修改view的座標,這樣不斷重複,從而實現滑動的效果。
首先我們需要自定義一個view,並置於一個LinearLayout中,程式碼如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"在view進行繪製的時候,會呼叫onLayout()方法來設定顯示的位置。所以我們可以通過修改view的left,top,right,bottom四個屬性來控制view的座標,所以每次回撥onTouchEvent的時候,我們都來獲取一下觸控點的座標,程式碼如下:android:id="@+id/activity_chat" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.example.sweet_xue.listviewdemo.chat.DragView android:layout_width="100dp" android:layout_height="100dp" android:background="@color/colorAccent" android:id="@+id/id_dragview"/> </LinearLayout>
int x = (int) event.getX(); int y = (int) event.getY();接下來需要ACTION_DOWN事件中記錄觸控點的座標,程式碼如下:
case MotionEvent.ACTION_DOWN: //記錄觸控點的座標最後需要在ACTION_MOVE事件中計算偏移量,並將偏移量作用到Layout方法中,在目前Layout的left,top,right,bottom基礎上,增加計算出來的偏移量,程式碼如下:lastX = x; lasty = y; break;
case MotionEvent.ACTION_MOVE: //計算偏移量 int offsetX = x - lastX; int offsetY = y - lasty; //在當前left,top,right,bottom的基礎上加上便宜量 layout(getLeft() + offsetX, getTop() + offsetY, getRight() + offsetX, getBottom() + offsetY); break;
這樣每次移動後,view都會呼叫Layout方法對自己重新佈局,從而達到移動view的效果
完整程式碼如下:
public class DragView extends TextView { private int lastX; private int lasty; public DragView(Context context) { super(context); initView(); } public DragView(Context context, AttributeSet attrs) { super(context, attrs); initView(); } private void initView() { setBackgroundColor(Color.BLUE); } @Override public boolean onTouchEvent(MotionEvent event) { 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: //計算偏移量 int offsetX = x - lastX; int offsetY = y - lasty; //在當前left,top,right,bottom的基礎上加上便宜量 layout(getLeft() + offsetX, getTop() + offsetY, getRight() + offsetX, getBottom() + offsetY); break; case MotionEvent.ACTION_UP: break; } return true; } }
補充:
view提供的獲取座標的方法
getTop()獲取到的是view自身的頂邊到其父佈局頂邊的距離
getLeft()獲取到的是view自身的左邊到其父佈局左邊的距離
getRight()獲取到的是view自身的右邊到父佈局右邊的距離
getBottom()獲取到的是view自身底邊到其父佈局地邊的距離
MotionEvent提供的方法
getX()獲取點選事件距離控制元件左邊的距離,即試圖座標
getY()獲取點選事件距離控制元件頂邊的距離,即試圖座標
getRawX()獲取點選事件距離整個螢幕左邊的距離,即絕對座標
getRawY()獲取點選事件距離整個螢幕頂邊的距離,即絕對座標
相關推薦
實現view跟著手指滑動的效果(實現方式一)
實現該效果的基本思想是:當觸控view時,系統記下當前觸控點的座標,當手指移動時,系統記下移動後的觸控點座標,從而獲取到相對於前一次座標點的偏移量,並通過偏移量來修改view的座標,這樣不斷重複,從而實現滑動的效果。 首先我們需要自定義一個view,並置於一個LinearL
實現view跟著手指滑動的效果(實現方式二)
方式二的這個方法相當於系統提供的一個對左右、上下移動的API的封裝。當計算出偏移量後,只需要使用如下程式碼就可以完成view的重新佈局,效果於使用layout方法一樣,程式碼如下: //同時對left和right進行偏移 offsetLeftAndRight(offset
實現view跟著手指滑動的效果(實現方式三)
第三種方式就是通過改變LayoutParams的方式實現該效果(這種方法是整個父佈局跟著一起動) 我們都知道LayoutParams儲存了一個view的佈局引數。因此可以在程式中,通過改變LayoutParams來動態的修改一個佈局的位置引數,從而達到改變view的位置的效
1、js原生實現移動端手指滑動輪播圖效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width
【IOS】實現IOS版的抽屜效果(點選,拖拽滑動)
原文連結:http://blog.csdn.net/toss156/article/details/7400065 好像最近,看到好多Android上的抽屜效果,也忍不住想要自己寫一個。在Android裡面可以用SlidingDrawer,很方便的實現。IOS上面就只有自
js原生實現移動端手指滑動輪播圖效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
實現一個隨著手指滑動的View
1、android View 主要6種滑動方法,分別是 layout()offsetLeftAndRight()和offsetTopAndBottom()LayoutParamsscrollBy()和
ANDROID GridView 分頁平滑滑動 效果的實現(基於android TV遙控器操作)
1.android 使用GridView 實現載入大量的資料顯示。未顯示出來的資料可以滑動螢幕讓底部的資料顯示出來,但是原生態的GridView 並沒有很美觀平滑的一個動畫來滾動資料,因此,我們可以稍做修改就可以實現 類似VST全聚合裡面 視訊載入也那樣的翻頁動畫效果了。
利用css3的animation實現點點點loading動畫效果(二)
設置 str ack rdp 提交 ssi frame spin color box-shadow實現的打點效果 簡介 box-shadow理論上可以生成任意的圖形效果,當然也就可以實現點點點的loading效果了。 實現原理 html代碼,首先需要寫如下html代
vue 實現 ios 原生picker 效果(實現思路分析)
sta 效果 cursor touchend orm dex tex sub alt 以前最早實現了一個類似的時間選擇插件,但是適用範圍太窄,索性最近要把這個實現方式發布出來,就重寫了一個高復用的vue組件。 支持安卓4.0以上,safari 7以上 效果預覽 gitHu
- 前端vue - tab欄帶滑動效果的實現
在vue過渡動效transition的基礎上實現主頁tab切換 app.vue 內 <template> <div id="app"> <div class="tab"> <router-lin
小程式的scroll-view元件的點選自動滑動效果(類似於微信流量充值中滑塊的效果)
廢話不多說,直接上圖吧!我的目的是想要達到滑鼠點選每項時,滑塊會自動滑動,具體可開啟微信流量充值體驗體驗。但是小程式scroll-view元件並不能達到這個效果,必須手動拖動,才能滑動,網上找了許久沒有找到相關的程式碼片段,最終發現zanUI有這個元件,參照這個元件的tab元件來完成的。zanU
安卓觸控手勢事件實現圖片跟著手指移動和圖片縮放
效果如下: 佈局程式碼: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
微信小程式實現slideUp、slideDown滑動效果及點選空白隱藏功能示例
本文例項講述了微信小程式實現slideUp、slideDown滑動效果及點選空白隱藏功能。分享給大家供大家參考,具體如下: 怎樣實現jq中的slideUp或者slideDown這種動畫效果呢,我的思路是用css3的transform: translateY() 屬性,給需要動畫的元素新增上一個動畫
相關子查詢——用子查詢實現類似遍歷的效果(部門工資前三高的員工)
在leetcode上看到了一道sql題目,但是不太會,看了題解以後感覺還是雲裡霧裡的,經過一番搜尋終於感覺明白了點 原來子查詢還有兩種 一種叫相關子查詢,一種叫巢狀(非相關)子查詢,區別就是子查詢是否和外部查詢相關 非相關:不多說,學過sql基礎的都會,執行過程也
詳細實現微信輸入框效果(textView自適應文字高度)
前言 最近會不斷推出一些輪子,這次寫了一個控制元件,類似微信輸入框,評論View,隨著文字增加,textView自增長高度, 如果喜歡我的文章,可以關注我微博:吖了個崢,也可以來小碼哥,瞭解下我們的iOS培訓課程。後續還會更新更多內容,有任何問題,歡迎簡書留言崢吖。。。 Dem
使用Scroller實現View的彈性滑動
View有scrollTo、scrollBy方法,但是滑動是瞬時的,比較僵硬。可以通過Scroller來實現View的彈性滑動。 ScrollView就有smoothScrollTo和smoothScrollBy方法,這兩個方法實現的就是彈性滑動的效果,它們內部實際也是用
詳解vue2.0 使用動態元件實現 Tab 標籤頁切換效果(vue-cli)
在 vue 中,實現 Tab 切換主要有三種方式:使用動態元件,使用 vue-router 路由,使用第三方外掛。因為這次完成的功能只是簡單切換元件,再則覺得使用路由切換需要改變地址略微麻煩,所以使用的是動態元件實現,如果是在大型應用上,可能使用 vue-router 會方便
Android ViewPager和Fragment實現頂部導航介面滑動效果、標籤下的tab位置
在專案中,我們常常需要實現介面滑動切換的效果。例如,微信介面的左右滑動切換效果。那這種效果是怎麼實現的?今天我就帶大家簡單瞭解ViewPager,並通過例項來實現該效果。 一. ViewP
gridview 實現橫向分頁滑動效果的兩種實現方案
方案一: 樓主在網上找的,能夠實現橫向滑動,但並沒有分頁的效果,樓主覺得簡單實用就一併貼出來了,下面看程式碼: DisplayMetrics dm; private void setValue() { int count = gridAdapte