1. 程式人生 > >實現view跟著手指滑動的效果(實現方式一)

實現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"
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>
在view進行繪製的時候,會呼叫onLayout()方法來設定顯示的位置。所以我們可以通過修改view的left,top,right,bottom四個屬性來控制view的座標,所以每次回撥onTouchEvent的時候,我們都來獲取一下觸控點的座標,程式碼如下
int x = (int) event.getX();
int y = (int) event.getY();
接下來需要ACTION_DOWN事件中記錄觸控點的座標,程式碼如下:
case MotionEvent.ACTION_DOWN:
    //記錄觸控點的座標
lastX = x; lasty = y; break;
最後需要在ACTION_MOVE事件中計算偏移量,並將偏移量作用到Layout方法中,在目前Layout的left,top,right,bottom基礎上,增加計算出來的偏移量,程式碼如下:
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