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

来存在的

u 可以通过将颜色代码 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

居中

在@M-S-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>

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