Android中ConstraintLayout内Button随手指移动的问题求助

问题分析 #

你当前的代码存在两个核心问题导致偏移异常：

1. 坐标未转换：getRawX()/getRawY()获取的是屏幕全局坐标，没有转换为ConstraintLayout内部的相对坐标，父布局可能存在状态栏、导航栏偏移，或者自身的margin/padding。
2. Bias计算未考虑按钮自身尺寸：ConstraintLayout的bias是基于按钮的约束空间（父布局尺寸 - 按钮自身尺寸）的比例，直接用手指坐标除以父布局宽度/高度会导致锚点错误。

解决方案一：修正Bias计算逻辑 #

先将屏幕坐标转换为父布局内部的相对坐标，再结合按钮自身宽高计算正确的bias值：

public class MainActivity extends AppCompatActivity implements View.OnTouchListener {
    AppCompatButton btn;
    ConstraintLayout mLayout;
    ConstraintSet constraintSet;
    // 记录父布局在屏幕中的位置
    int[] layoutLocation = new int[2];

    @SuppressLint("ClickableViewAccessibility")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        hideNavigationBar();
        constraintSet = new ConstraintSet();
        mLayout = findViewById(R.id.view_layout);
        constraintSet.clone(mLayout);
        btn = findViewById(R.id.btn);
        btn.setOnTouchListener(this);
        // 获取父布局的屏幕位置，用于坐标转换
        mLayout.getLocationOnScreen(layoutLocation);
    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_MOVE:
                // 转换为父布局内部的相对坐标
                float relativeX = motionEvent.getRawX() - layoutLocation[0];
                float relativeY = motionEvent.getRawY() - layoutLocation[1];
                
                // 计算有效可移动空间（父布局尺寸 - 按钮自身尺寸）
                float availableWidth = mLayout.getWidth() - btn.getWidth();
                float availableHeight = mLayout.getHeight() - btn.getHeight();
                
                if (availableWidth > 0 && availableHeight > 0) {
                    // 计算正确的bias，让按钮中心点对齐手指位置
                    float horizontalBias = (relativeX - btn.getWidth() / 2f) / availableWidth;
                    float verticalBias = (relativeY - btn.getHeight() / 2f) / availableHeight;
                    
                    // 限制bias在0-1之间，避免按钮超出父布局
                    horizontalBias = Math.max(0f, Math.min(1f, horizontalBias));
                    verticalBias = Math.max(0f, Math.min(1f, verticalBias));
                    
                    constraintSet.setHorizontalBias(R.id.btn, horizontalBias);
                    constraintSet.setVerticalBias(R.id.btn, verticalBias);
                    constraintSet.applyTo(mLayout);
                }
                break;
            default:
                break;
        }
        return true;
    }

    private void hideNavigationBar() {
        // 你的隐藏导航栏实现
    }
}

注意：使用此方案需要确保你的Button在布局中已经设置了左右双向约束（app:layout_constraintLeft_toLeftOf="parent"、app:layout_constraintRight_toRightOf="parent"）和上下双向约束（app:layout_constraintTop_toTopOf="parent"、app:layout_constraintBottom_toBottomOf="parent"），否则bias不会生效。

解决方案二：直接修改Margin（更简单直观） #

相对于使用ConstraintSet的bias，直接修改Button的LayoutParams的margin值实现跟随，逻辑更清晰，不需要依赖双向约束：

public class MainActivity extends AppCompatActivity implements View.OnTouchListener {
    AppCompatButton btn;
    ConstraintLayout mLayout;
    int[] layoutLocation = new int[2];
    // 记录手指按下时相对于按钮左上角的偏移
    float offsetX, offsetY;

    @SuppressLint("ClickableViewAccessibility")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        hideNavigationBar();
        mLayout = findViewById(R.id.view_layout);
        btn = findViewById(R.id.btn);
        btn.setOnTouchListener(this);
        mLayout.getLocationOnScreen(layoutLocation);
    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                // 记录手指在按钮内的偏移，避免按钮跳转到手指位置（而是跟随移动）
                offsetX = motionEvent.getRawX() - view.getLeft();
                offsetY = motionEvent.getRawY() - view.getTop();
                break;
            case MotionEvent.ACTION_MOVE:
                ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) view.getLayoutParams();
                // 转换为父布局内的相对坐标，计算margin
                params.leftMargin = (int) (motionEvent.getRawX() - offsetX - layoutLocation[0]);
                params.topMargin = (int) (motionEvent.getRawY() - offsetY - layoutLocation[1]);
                
                // 限制按钮不超出父布局边界
                params.leftMargin = Math.max(0, Math.min(params.leftMargin, mLayout.getWidth() - view.getWidth()));
                params.topMargin = Math.max(0, Math.min(params.topMargin, mLayout.getHeight() - view.getHeight()));
                
                view.setLayoutParams(params);
                break;
            default:
                break;
        }
        return true;
    }

    private void hideNavigationBar() {
        // 你的隐藏导航栏实现
    }
}

优势：此方案不需要提前设置双向约束，逻辑更贴近你熟悉的RelativeLayout实现方式，且性能更优（无需每次调用constraintSet.applyTo()刷新整个布局）。

内容的提问来源于stack exchange，提问作者Huy Ngô