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

问题描述：

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

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

我正在尝试这样做：在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>

更改背景颜色 – Anonymous

@Anonymous它不适用于ToolBar，我只在Tab标题下覆盖此区域 – VolodymyrH

您是否使用自定义工具栏？并请提供完整的xml文件。 –

答

这是我想到的第一件事情，可能有更简单的方法，但这种将工作：

<?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的可见性。这可以相应地改变。

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

它仅适用于Tab标题下的所有内容。但它涵盖了工具栏文本:)您试过了哪个API级别？ – VolodymyrH

你是什么意思，但它涵盖工具栏文本？您是否希望工具栏中的文本在任何时候都完全可见？ –

是的，就像在屏幕上一样。我不知道为什么，但它完全覆盖了它。而且，虽然它可能是API级别的原因，但我有26 – VolodymyrH

答

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

这不是一个答案，可能已发布在评论部分。 –

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

相关推荐