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

Question

我有一个按钮，通过点击所有的屏幕应该变得更黑，除了这个按钮。我试图改变颜色，主题，但它并没有给我我想要的东西。现在我有一个想法，通过半透明视图覆盖整个屏幕，它的工作原理，但只涵盖工具栏下的区域。问题是我无法弄清楚它是如何修复的。我无法覆盖工具栏，无法确定如何让我的按钮可见。 它应该是这样的：

我敢肯定有一个简单的方法来做到这一点，如果有人用它的工作，请解释。

我正在尝试这样做：在activity_main.xml中，我加了查看并通过按钮单击使其可见。但它再次只覆盖Tab标题下的区域。

<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类您可以执行以下操作：

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 ImageView s，透明度为80％，一个用于toolBar，另一个用于内容，然后设置此ImageView s的可见性。这可以相应地改变。

希望这有助于，让我知道。

Answer 2

对于覆盖整个屏幕的视图，您可以设置透明背景。对于上面的任何视图 如果您希望它们透明，则可以设置透明背景。