如何通過透明視圖覆蓋整個屏幕（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

對於覆蓋整個屏幕的視圖，您可以設置透明背景。對於上面的任何視圖 如果您希望它們透明，則可以設置透明背景。