如何通过透明视图（alpha 80%）覆盖整个屏幕，除了一些元素？

Question

我有一个按钮，点击它后所有屏幕都会变暗，除了这个按钮。我试图改变颜色、主题，但它并没有给我我想要的东西。现在我有了一个用 half-transparent 视图覆盖整个屏幕的想法并且它有效，但仅覆盖 ToolBar 下的区域。问题是我无法弄清楚如何解决它。我无法覆盖 ToolBar，也不知道如何让我的按钮可见。它应该是这样的：

我确定有一个简单的方法可以做到，如果有人用过，请解释一下。

我正在尝试这样做：在 activity_main.xml 中，我添加了 View 并通过单击按钮使其可见。但它再次仅覆盖 Tab header.

下的区域

  <View
    android:id="@+id/transparent_view"
    android:visibility="gone"
    android:alpha="20"
    android:background="@color/darkGrey"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
  </View>

完整布局代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".activity.MainActivity">

  <View
    android:id="@+id/transparent_view"
    android:visibility="gone"
    android:alpha="20"
    android:background="@color/darkGrey"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
  </View>

  <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_main"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_alignParentTop="true"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:title="Your Wi-Fi is online">

    <Button
      android:id="@+id/btn_pause"
      android:layout_width="90dp"
      android:layout_height="36dp"
      android:layout_margin="17dp"
      android:layout_gravity="end"
      android:background="@color/white"
      android:text="@string/pause"
      android:textColor="@color/midPurple"
      android:textSize="14sp" />
  </android.support.v7.widget.Toolbar>

  <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/AppTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar_main"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/tabs" />

</RelativeLayout>

Answer 1

这是我想到的第一件事，可能还有更简单的方法，但这行得通：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".activity.MainActivity">


  <ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#80000000"
    android:visibility="gone"
    android:id="@+id/darkOverLay_Content"/>

  <View
    android:id="@+id/transparent_view"
    android:visibility="gone"
    android:alpha="20"
    android:background="@color/darkGrey"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
  </View>

  <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_main"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_alignParentTop="true"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:title="Your Wi-Fi is online">

    <Button
      android:id="@+id/btn_pause"
      android:layout_width="90dp"
      android:layout_height="36dp"
      android:layout_margin="17dp"
      android:layout_gravity="end"
      android:background="@color/white"
      android:text="@string/pause"
      android:textColor="@color/midPurple"
      android:textSize="14sp" />


    <ImageView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="#80000000"
      android:visibility="gone"
      android:id="@+id/darkOverLay_ToolBar"/>

  </android.support.v7.widget.Toolbar>

  <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/AppTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar_main"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/tabs" />

</RelativeLayout>

然后在您的 java class 中您可以执行以下操作：

ImageView darkOverLay_Content = (ImageView) findViewById(R.id.darkOverLay_Content);
ImageView darkOverLay_ToolBar = (ImageView) findViewById(R.id. darkOverLay_ToolBar);
Button clickButton = (Button) findViewById(R.id. btn_pause);
clickButton.setOnClickListener( new OnClickListener() {

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        ***Do what you want with the click here***
        if(darkOverLay_Content.getVisibility()==View.VISIBLE) {

            darkOverLay_Content.setVisibility(View.GONE);
            darkOverLay_ToolBar.setVisibility(View.GONE);
        }else{

            darkOverLay_Content.setVisibility(View.VISIBLE);
            darkOverLay_ToolBar.setVisibility(View.VISIBLE);

        }
    }
}});

在这个答案中，我使用了 2 个 ImageViews，透明度为 80%，一个用于工具栏，一个用于内容，然后我设置了这个 ImageViews 的可见性。这可以相应地改变。

希望这对您有所帮助，请告诉我。

Answer 2

对于覆盖整个屏幕的视图，您可以设置透明背景。对于高于此的任何观点如果你想让它们透明，你可以设置透明背景。

如何通过透明视图（alpha 80%）覆盖整个屏幕，除了一些元素？

How to cover the whole screen by transparent view (alpha 80%), except for some elements?

android

android-toolbar

transparent

android-tablayout