Android 通过点击视图外部使视图消失

Question

我有一些在按下按钮时可见的视图。如果我在这些视图之外单击，我希望它们消失。

在 Android 上这将如何完成？

另外，我意识到“后退按钮”也可以为 Android 用户提供帮助 - 我可能会使用它作为关闭视图的辅助方式 - 但有些平板电脑甚至不再使用“物理”后退按钮，它已经被非常弱化了。

Answer 1

一种简单/愚蠢的方法：

• 创建一个虚拟的空视图（假设没有源的 ImageView），使其填充父级

• < p>如果它被点击，那么就做你想做的事。

您需要将 XML 文件中的根标记设为relativelayout。它将包含两个元素：您的虚拟视图（将其位置设置为与父顶部对齐）。另一个是包含视图和按钮的原始视图（该视图可能是 LinearLayout 或您制作的任何视图。不要忘记将其位置设置为对齐父顶部）

希望这会帮助你，祝你好运！

Answer 2

找到视图矩形，然后检测点击事件是否在视图之外。

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
    Rect viewRect = new Rect();
    mTooltip.getGlobalVisibleRect(viewRect);
    if (!viewRect.contains((int) ev.getRawX(), (int) ev.getRawY())) {
        setVisibility(View.GONE);
    }
    return true;
}

如果你想在其他地方使用触摸事件，请尝试

return super.dispatchTouchEvent(ev);

Answer 3

这是一个老问题，但我想我会给出一个不基于 onTouch 事件的答案。正如 RedLeader 所建议的，也可以使用焦点事件来实现这一点。我遇到过这样的情况，我需要显示和隐藏一堆排列在自定义弹出窗口中的按钮，即这些按钮都放置在同一个 ViewGroup 中。要实现此功能，您需要执行一些操作：

1. 您希望隐藏的视图组需要设置View.setFocusableInTouchMode(true)。也可以使用 android:focusableintouchmode 在 XML 中进行设置。

2. 你的视图根，即整个布局的根，可能是某种线性或相对布局，也需要能够按照上面的#1进行聚焦

3. 当显示视图组时，您调用 View.requestFocus() 来给出它聚焦。

4. 您的视图组需要重写View.onFocusChanged(boolean GainFocus, int Direction, Rect previousFocusedRect)或实现您自己的OnFocusChangeListener并使用View.setOnFocusChangeListener ()

5. 当用户点击视图外部时，焦点将转移到任一视图root（因为您在 #2 中将其设置为可聚焦）或本质上可聚焦的另一个视图（EditText 或类似）

6. 当您使用#4中的方法之一检测到焦点丢失时您知道焦点已转移到视图组之外的某些内容，您可以隐藏它。

我想这个解决方案并不适用于所有场景，但它适用于我的特定情况，而且听起来好像它也适用于 OP。

Answer 4

我一直在寻找一种在接触外界时关闭视野的方法，但这些方法都不能很好地满足我的需求。我确实找到了解决方案，并将其发布在这里，以防有人感兴趣。

我有一个基本活动，几乎我所有的活动都扩展了它。在其中我有：

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
    if (myViewIsVisible()){
            closeMyView();
        return true;
    }
    return super.dispatchTouchEvent(ev);
}

因此，如果我的视图可见，它将关闭，如果不是，它将表现得像正常的触摸事件。不确定这是否是最好的方法，但它似乎对我有用。

Answer 5

基于王凯的回答：我建议首先检查您的视图的可见性，根据我的场景，当用户单击 fab myView 时变得可见，然后当用户单击外部时 myView 消失

  @Override
public boolean dispatchTouchEvent(MotionEvent ev) {
    Rect viewRect = new Rect();
    myView.getGlobalVisibleRect(viewRect);
    if (myView.getVisibility() == View.VISIBLE && !viewRect.contains((int) ev.getRawX(), (int) ev.getRawY())) {
        goneAnim(myView);
        return true;
    }
    return super.dispatchTouchEvent(ev);
}

Answer 6

我需要特定的能力，不仅可以在单击视图外部时删除视图，还可以允许单击正常传递到活动。例如，我有一个单独的布局 notification_bar.xml，我需要在需要时动态扩展并添加到当前活动的任何内容。

如果我创建一个屏幕大小的覆盖视图来接收 notification_bar 视图之外的任何点击，并在点击时删除这两个视图，则父视图（活动的主视图）仍然没有收到任何点击，这意味着，当 notification_bar 可见时，需要单击两次才能单击按钮（一次单击关闭 notification_bar 视图，另一次单击按钮）。

要解决这个问题，您可以创建自己的 DismissViewGroup 来扩展 ViewGroup 并重写以下方法：

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    ViewParent parent = getParent();
    if(parent != null && parent instanceof ViewGroup) {
        ((ViewGroup) parent).removeView(this);
    }
    return super.onInterceptTouchEvent(ev);
}

然后您的动态添加的视图将看起来有点像：

<com.example.DismissViewGroup android:id="@+id/touch_interceptor_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent" ...
    <LinearLayout android:id="@+id/notification_bar_view" ...

这将允许您与视图交互，并且当您在视图外部单击时，你们都关闭视图并与活动正常交互。

Answer 7

实现onTouchListener()。检查触摸的坐标是否在您的视图坐标之外。

可能有某种方法可以用 onFocus() 等来做到这一点 - 但我不知道。

Answer 8

第 1 步：通过 Fragmelayout 创建一个包装视图，它将覆盖您的主布局。

 <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
     <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <!-- This is your main layout-->
     </RelativeLayout>
    
            <View
                android:id="@+id/v_overlay"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <!-- This is the wrapper layout-->
            </View>
        </FrameLayout>

第 2 步： 现在在 Java 代码中添加逻辑，如下所示 -

         View viewOverlay = findViewById(R.id.v_overlay);
         View childView = findViewByID(R.id.childView);
         Button button = findViewByID(R.id.button);
    
         viewOverlay.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        childView.setVisibility(View.GONE);
                        view.setVisibility(View.GONE);
                    }
                });
    
          
         button.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                       childView.setVisibility(View.VISIBLE);
   // Make the wrapper view visible now after making the child view visible for handling the 
  // main visibility task. 
                       viewOverlay.setVisibility(View.VISIBLE);
                        
                    }
                });

Answer 9

要在视图外部执行单击时隐藏视图：

override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
      if (isMenuVisible) {
          if (!isWithinViewBounds(ev.rawX.toInt(), ev.rawY.toInt())) {
               hideYourView()
               return true
          }
      }
   return super.dispatchTouchEvent(ev)
}

创建一个方法来获取视图的边界（高度和宽度），因此当您单击视图外部时，它将隐藏视图，而单击视图时不会隐藏视图：

private fun isWithinViewBounds(xPoint: Int, yPoint: Int): Boolean {
        val l = IntArray(2)
        llYourView.getLocationOnScreen(l)
        val x = l[0]
        val y = l[1]
        val w: Int = llYourView.width
        val h: Int = llYourView.height
        return !(xPoint < x || xPoint > x + w || yPoint < y || yPoint > y + h)
}

Answer 10

当在给定视图之外发生单击时通知我们的包装布局：

class OutsideClickConstraintLayout(context: Context, attrs: AttributeSet?) :
    ConstraintLayout(context, attrs) {

    private var viewOutsideClickListenerMap = mutableMapOf<View, () -> Unit>()

    fun setOnOutsideClickListenerForView(view: View, listener: () -> Unit) {
        viewOutsideClickListenerMap[view] = listener
    }

    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
        viewOutsideClickListenerMap.forEach { (view, function) ->
            if (isMotionEventOutsideView(view, ev)) function.invoke()
        }
        return super.onInterceptTouchEvent(ev)
    }

    private fun isMotionEventOutsideView(view: View, motionEvent: MotionEvent): Boolean {
        val viewRectangle = Rect()
        view.getGlobalVisibleRect(viewRectangle)
        return !viewRectangle.contains(motionEvent.rawX.toInt(), motionEvent.rawY.toInt())
    }
}

用法：

....
        outsideClickContainerView.setOnOutsideClickListenerForView(someView) {
            // handle click outside someView
        }
....

Answer 11

我创建了自定义 ViewGroup 来显示锚定到另一个视图（弹出气球）的信息框。
子视图是实际的信息框，BalloonView是全屏的，用于子视图的绝对定位，并拦截触摸。

public BalloonView(View anchor, View child) {
    super(anchor.getContext());
    //calculate popup position relative to anchor and do stuff
    init(...);
    //receive child via constructor, or inflate/create default one
    this.child = child;
    //this.child = inflate(...);
    //this.child = new SomeView(anchor.getContext());
    addView(child);
    //this way I don't need to create intermediate ViewGroup to hold my View
    //but it is fullscreen (good for dialogs and absolute positioning)
    //if you need relative positioning, see @iturki answer above 
    ((ViewGroup) anchor.getRootView()).addView(this);
}

private void dismiss() {
    ((ViewGroup) getParent()).removeView(this);
}

处理子项内部的点击：

child.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        //write your code here to handle clicks inside
    }
});

通过单击外部而不将触摸委托给底层视图来关闭我的视图：

BalloonView.this.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        dismiss();
    }
});

通过单击外部将触摸委托给底层视图来关闭我的视图：

@Override
public boolean onTouchEvent(MotionEvent event) {
    dismiss();
    return false; //allows underlying View to handle touch
}

按下“后退”按钮时关闭：

//do this in constructor to be able to intercept key
setFocusableInTouchMode(true);
requestFocus();

@Override
public boolean onKeyPreIme(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {
        dismiss();
        return true;
    }
    return super.onKeyPreIme(keyCode, event);
}

Answer 12

那么它可能会很有用

• 我想分享我的解决方案，我认为如果您能够添加自定义 ViewGroup 作为根布局，
• 并且您想要消失的视图可以是自定义视图，

。首先，我们创建一个自定义 ViewGroup 来拦截触摸事件：

class OutsideTouchDispatcherLayout @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {

    private val rect = Rect()

    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
        if (ev.action == MotionEvent.ACTION_DOWN) {
            val x = ev.x.roundToInt()
            val y = ev.y.roundToInt()
            traverse { view ->
                if (view is OutsideTouchInterceptor) {
                    view.getGlobalVisibleRect(rect)
                    val isOutside = rect.contains(x, y).not()
                    if (isOutside) {
                        view.interceptOutsideTouch(ev)
                    }
                }
            }
        }
        return false
    }

    interface OutsideTouchInterceptor {
        fun interceptOutsideTouch(ev: MotionEvent)
    }
}

fun ViewGroup.traverse(process: (View) -> Unit) {
    for (i in 0 until childCount) {
        val child = getChildAt(i)
        process(child)
        if (child is ViewGroup) {
            child.traverse(process)
        }
    }
}

如您所见，OutsideTouchDispatcherLayout 拦截触摸事件并通知每个实现 OutsideTouchInterceptor 的子视图，某些触摸事件发生在该视图之外看法。

以下是后代视图如何处理此事件。请注意，它必须实现 OutsideTouchInterceptor 接口：

class OutsideTouchInterceptorView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr),
    OutsideTouchDispatcherLayout.OutsideTouchInterceptor {

    override fun interceptOutsideTouch(ev: MotionEvent) {
        visibility = GONE
    }

}

然后您只需通过子父关系即可轻松进行外部触摸检测：

<?xml version="1.0" encoding="utf-8"?>
<com.example.touchinterceptor.OutsideTouchDispatcherLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.example.touchinterceptor.OutsideTouchInterceptorView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#eee"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</com.example.touchinterceptor.OutsideTouchDispatcherLayout>

Answer 13

以下是完成工作的简单方法：

第 1 步：为要为其生成点击外部事件的元素的外部容器创建一个 ID。

就我而言，它是一个线性布局，我将 id 指定为“outsideContainer”

第 2 步： 为该外部容器设置一个 onTouchListener，它将简单地充当内部元素的点击外部事件！

outsideContainer.setOnTouchListener(new View.OnTouchListener() {
                                        @Override
                                        public boolean onTouch(View v, MotionEvent event) {
                                            // perform your intended action for click outside here
                                            Toast.makeText(YourActivity.this, "Clicked outside!", Toast.LENGTH_SHORT).show();
                                            return false;
                                        }
                                    }
);

Answer 14

感谢@ituki的想法

FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/search_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#80000000"
android:clickable="true">

<LinearLayout
    android:clickable="true" // not trigger
    android:layout_width="match_parent"
    android:layout_height="300dp" 
    android:background="#FFF"
    android:orientation="vertical"
    android:padding="20dp">

    ...............

</LinearLayout>
</FrameLayout>

和java代码，

mContainer = (View) view.findViewById(R.id.search_container);
    mContainer.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if(event.getAction() == MotionEvent.ACTION_DOWN){
                Log.d("aaaaa", "outsite");
                return true;
            }
            return false;
        }
    });

当触摸LinearLayout之外时它可以工作