【问题标题】:On Touch Listener is overlapping with relativie layoutOn Touch Listener 与相对布局重叠
【发布时间】:2026-01-24 05:55:01
【问题描述】:

我有两个ImageButton,我想为它们设置相同的OnTouchListener ,但问题是重叠的,当我触摸一个图像时,另一个相邻的图像也在移动。 当我触摸图像 2 时,它正在移出屏幕并变得不可见。我希望它保留在屏幕上,并且触摸事件应该为它们单独工作。

这是我到现在为止所做的。

    //this is the snippet from main activity where the onTouch is implemented and layout is created       

    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    params.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
    imgMaster.setLayoutParams(params);
    params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    params.addRule(RelativeLayout.RIGHT_OF, imgMaster.getId());
    imgMaster.setOnTouchListener(new ChoiceTouchListener());
    imgMood.setOnTouchListener(new ChoiceTouchListener());
    imgMood.setLayoutParams(params);
    imgMaster.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "Clicked Master", Toast.LENGTH_SHORT).show();
        }
    });
    imgMood.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "Clicked Mood", Toast.LENGTH_SHORT).show();
        }
    });
}

private final class ChoiceTouchListener implements OnTouchListener {
    public boolean onTouch(View view, MotionEvent event) {
        //ImageButton views = (ImageButton) view;
        final int X = (int) event.getRawX();
        final int Y = (int) event.getRawY();
        switch (view.getId()) {
            case R.id.master: 
                switch (event.getAction() & MotionEvent.ACTION_MASK) {
                    case MotionEvent.ACTION_DOWN:
                        RelativeLayout.LayoutParams lparams = (RelativeLayout.LayoutParams) view.getLayoutParams();
                        _xDelta = X - lparams.leftMargin;
                        _yDelta = Y - lparams.topMargin;
                        break;
                    case MotionEvent.ACTION_UP:
                        break;
                    case MotionEvent.ACTION_POINTER_DOWN:
                        break;
                    case MotionEvent.ACTION_POINTER_UP:
                        break;
                    case MotionEvent.ACTION_MOVE:
                        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
                        layoutParams.leftMargin = X - _xDelta;
                        layoutParams.topMargin = Y - _yDelta;
                        layoutParams.rightMargin = -250;
                        layoutParams.bottomMargin = -250;
                        view.setLayoutParams(layoutParams);
                        break;
                }
            case R.id.mood:
                switch (event.getAction() & MotionEvent.ACTION_MASK) {
                    case MotionEvent.ACTION_DOWN:
                        RelativeLayout.LayoutParams lparams = (RelativeLayout.LayoutParams) view.getLayoutParams();
                        _xDelta = X - lparams.leftMargin;
                        _yDelta = Y - lparams.topMargin;
                        break;
                    case MotionEvent.ACTION_UP:
                        break;
                    case MotionEvent.ACTION_POINTER_DOWN:
                        break;
                    case MotionEvent.ACTION_POINTER_UP:
                        break;
                    case MotionEvent.ACTION_MOVE:
                        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
                        layoutParams.leftMargin = X - _xDelta;
                        layoutParams.topMargin = Y - _yDelta;
                        layoutParams.rightMargin = -250;
                        layoutParams.bottomMargin = -250;
                        view.setLayoutParams(layoutParams);
                        break;
                }
                break;
        }

       
        return false;

    }

}

//这是我的布局

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/view_root"
android:background="@drawable/transparent_background"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/mood"
    android:src="@drawable/mood"

    android:background="@null"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/master"
    android:src="@drawable/master"
    android:background="@null" /></RelativeLayout>

提前致谢。

【问题讨论】:

  • 这些图像是否一开始就相互重叠?我问这个是因为您使用了相对布局并且没有提到每个图像相对于彼此的相对位置
  • @Dibzmania 但添加规则已经定义为代码中的位置
  • @Dibzmania 可能是它的重叠...但是如果我在布局中设置类似于 android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" 的图像没有做任何改变......
  • 可能问题只在添加规则中
  • 因为当我在 add rule() 中添加位置为 left 时,它的相邻问题正在发生

标签: android android-relativelayout imagebutton ontouchlistener


【解决方案1】:

正如你所要求的代码,在这里,但我仍然不知道你想从你的对象做什么样的实际运动。

我提供的代码可以让您将两个对象拖到屏幕上的任意位置,而无需同时移动另一个对象。

希望这是您想要的(至少可能更接近)

注意:请删除所有RelativeLayout.addRule()等,只需将onTouch监听器设置为您的ImageButtons,以下是Ontouch的定义

private final class ChoiceTouchListener implements View.OnTouchListener {
        public boolean onTouch(View view, MotionEvent event) {
            final int X = (int) event.getRawX();
            final int Y = (int) event.getRawY();

            switch (view.getId()) {
                case R.id.master:
                    switch (event.getAction() & MotionEvent.ACTION_MASK) {
                        case MotionEvent.ACTION_DOWN:
                            break;
                        case MotionEvent.ACTION_UP:
                            break;
                        case MotionEvent.ACTION_POINTER_DOWN:
                            break;
                        case MotionEvent.ACTION_POINTER_UP:
                            break;
                        case MotionEvent.ACTION_MOVE:
                            view.setX(X-view.getWidth()/2);
                            view.setY(Y-view.getHeight());
                            break;
                    }
                case R.id.mood:
                    switch (event.getAction() & MotionEvent.ACTION_MASK) {
                        case MotionEvent.ACTION_DOWN:
                            break;
                        case MotionEvent.ACTION_UP:
                            break;
                        case MotionEvent.ACTION_POINTER_DOWN:
                            break;
                        case MotionEvent.ACTION_POINTER_UP:
                            break;
                        case MotionEvent.ACTION_MOVE:
                            view.setX(X-view.getWidth()/2);
                            view.setY(Y-view.getHeight());
                            break;
                    }
                    break;
            }
                return false;

        }

这应该是您在 XML 中的布局

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/view_root"
    android:background="@drawable/transparent_background"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/master"
        android:src="@drawable/master"
        android:background="@null"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/mood"
        android:src="@drawable/mood"
        android:background="@null"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/master"
        android:layout_toEndOf="@+id/master" />
</RelativeLayout>

【讨论】:

  • 感谢完美工作
  • 你也可以支持我的答案,如果你认为我真的付出了一些努力,谢谢:)