android - Android向图像添加traslucid覆盖层

Question

我是android的初学者。我正在开发一个应用程序，我想要这个效果：

我认为它是一个背景图像、一个带有透明色的叠加层和一个textView.

我的布局是这样的：

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

<ImageView
    android:id="@+id/backgroundImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:contentDescription="Description" />

<ImageView
    android:id="@+id/overlay"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="#AAFF0000"
    android:contentDescription="Description" />

<TextView
    android:id="@+id/textoOpcion"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:text="TextView" />

</RelativeLayout>

但这不起作用。

有什么想法吗？

谢谢。

Answer 1

试试这样，我希望它对你有用..

此图像通过将textview背景颜色设置为#44ff0000

您可以通过将颜色代码 00 的前两个值更改为 ff 来改变颜色的不透明度

#44ff0000 这里 44 是颜色 ff0000 的不透明度

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

<ImageView
    android:id="@+id/backgroundImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:contentDescription="Description"
    android:src="@drawable/ic_launcher" />

<TextView
    android:id="@+id/textoOpcion"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/backgroundImage"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_alignRight="@+id/backgroundImage"
    android:background="#44000000"
    android:gravity="bottom"
    android:text="TextView"
    android:textColor="#ffffff" />

</RelativeLayout>

Answer 2

试试下面的。我发现FrameLayout合成类型的东西效果更好，只需在其TextView本身上设置背景——不需要单独的ImageView.

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

<TextView
    android:id="@+id/textoOpcion"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="@color/whatever_you_like"
    android:text="TextView" />

<ImageView
    android:id="@+id/overlay"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="Description"
    android:src="@drawable/drawablewithYourSemiTransparentColor" />

</FrameLayout>

Answer 3

我的解决方案：

我添加了一个view以查看叠加颜色，并将textView

在@MS-Gadag 的解决方案中，我无法将文本居中：

但我想要这个：

做第二张图片的代码：

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

<ImageView
    android:id="@+id/backgroundImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:contentDescription="Description"/>

<View
    android:id="@+id/overlay"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/backgroundImage"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_alignRight="@+id/backgroundImage"
    android:background="#99FF0000" />

<TextView
    android:id="@+id/textoOpcion"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:textSize="21sp"
    android:textColor="#ffffff" />

</RelativeLayout>

编辑

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

    <ImageView
        android:id="@+id/backgroundImage"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:contentDescription="Description" />

    <View
        android:id="@+id/overlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/backgroundImage"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@+id/backgroundImage"
        android:background="#99FF0000" />

    <TextView
        android:id="@+id/textoOpcion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/backgroundImage"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@+id/backgroundImage"
        android:gravity="center"
        android:text="map"
        android:textColor="#ffffff"
        android:textSize="21sp" />

</RelativeLayout>

我确信代码可以更好，但这是可行的。