Skip to content

Latest commit

 

History

History
90 lines (72 loc) · 3.69 KB

Android跟随手指移动的view.md

File metadata and controls

90 lines (72 loc) · 3.69 KB

实现一个跟随手指移动的view其实是特别容易实现的,不过有的时候还是挺有用的,最近做的视频互动软件就有这样的需求,大概几十行代码就可以搞定,然后记录一下吧。

实现的主要思想,就是利用onTouchListener,然后判断出手指按下的点,同时监听移动的事件,然后稍微计算一下就可以求出来view最终应该呈现的位置了,然后通过改变LayoutParams的值就可以是实现view的跟随手指拖拽的效果了,当然还可以优化,例如通过计算如果移到屏幕边缘就停下来之类的,或者哪里是不能移到地方。

public class TestActivity extends AppCompatActivity implements View.OnTouchListener {

    private ImageView imageView;
    private RelativeLayout relativeLayout;

    private int lastX, lastY;    //保存手指点下的点的坐标
    final static int IMAGE_SIZE = 150;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);

        imageView = (ImageView) findViewById(R.id.image);
        relativeLayout = (RelativeLayout) findViewById(R.id.layout);
        //初始设置一个layoutParams
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(IMAGE_SIZE,IMAGE_SIZE);
        imageView.setLayoutParams(layoutParams);
        //设置屏幕触摸事件
        imageView.setOnTouchListener(this);
    }


    public boolean onTouch(View view, MotionEvent event) {
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                //将点下的点的坐标保存
                lastX = (int) event.getRawX();
                lastY = (int) event.getRawY();
                break;

            case MotionEvent.ACTION_MOVE:
                //计算出需要移动的距离
                int dx = (int) event.getRawX() - lastX;
                int dy = (int) event.getRawY() - lastY;
                //将移动距离加上,现在本身距离边框的位置
                int left = view.getLeft() + dx;
                int top = view.getTop() + dy;
                //获取到layoutParams然后改变属性,在设置回去
                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view
                        .getLayoutParams();
                layoutParams.height = IMAGE_SIZE;
                layoutParams.width = IMAGE_SIZE;
                layoutParams.leftMargin = left;
                layoutParams.topMargin = top;
                view.setLayoutParams(layoutParams);
                //记录最后一次移动的位置
                lastX = (int) event.getRawX();
                lastY = (int) event.getRawY();
                break;
        }
        //刷新界面
        relativeLayout.invalidate();
        return true;
    }
}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:id="@+id/layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@mipmap/ic_launcher"
        />


</RelativeLayout>

以上便是这个简单的view啦,思路还是很清晰的,当然能够改造的地方有很多,例如加一个惯性的效果啊,或者弄一个加速度的效果啊,都是可以的