Question

我制作了一个屏幕，其中背景上有图像，并且在其上方是淡色。

现在我必须在该图像上写一些文本。

当我这样做时，色彩会覆盖文字，但我希望文字位于图像上方并着色。

我的XML是这个

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="@drawable/batball"
            android:orientation="vertical"
            android:foreground="@color/tintColorPrimary"
            android:layout_weight="1"
            android:gravity="center_vertical">

            <!--<ImageView-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="match_parent"-->
                <!--android:src="@drawable/batball"-->
                <!--android:scaleType="centerCrop"-->
                <!--android:backgroundTint="@color/tintColorPrimary"/>-->

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_gravity="center"
                android:gravity="center_horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@{dashboardVm.teamA.teamShortName}"
                    android:padding="@dimen/playing_team_padding"
                    android:textSize="@dimen/team_playing_font_size"
                    android:layout_gravity="center_vertical"
                    />
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    bind:imageUrl="@{dashboardVm.teamA.imageUrl}"
                    android:layout_gravity="center_vertical"
                    android:padding="@dimen/playing_team_padding"

                    />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="VS"
                        android:padding="@dimen/playing_team_padding"
                        android:textSize="@dimen/team_playing_font_size"
                        android:layout_gravity="center_vertical"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@{dashboardVm.teamB.teamShortName}"
                        android:padding="@dimen/playing_team_padding"
                        android:textSize="@dimen/team_playing_font_size"
                        android:layout_gravity="center_vertical"

                        />
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        bind:imageUrl="@{dashboardVm.teamB.imageUrl}"
                        android:layout_gravity="center_vertical"
                        android:padding="@dimen/playing_team_padding" />


            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:padding="@dimen/playing_team_padding">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/match_countdown"
                    android:text="Match start in 24 : 20 :39"
                    />

            </LinearLayout>

        </LinearLayout>

屏幕看起来像这样，尽管我希望它像以下一个：

Answer 1

删除

android:foreground="@color/tintColorPrimary"

在线性LinearLayout上

根据documentation：

android：foreground

定义可绘制对象以绘制内容。这个   可以用作叠加层。前景可绘制对象参与   如果重力设置为填充，则填充内容。

因此，基本上，您将着色颜色应用于LinearLayout包含的所有内容，包括文本。

如果取消注释ImageView会发生什么？如我建议的那样，它不起作用吗？但是在这种情况下，如果您希望图像占据整个屏幕，则需要使用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"
    xmlns:tools="http://schemas.android.com/tools"
    android:gravity="center_vertical">

    <!-- Background image -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:backgroundTint="@color/tintColorPrimary"
        android:scaleType="centerCrop"
        android:src="@drawable/batball" />

    <LinearLayout
        android:id="@+id/you_name_it_ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="@dimen/playing_team_padding"
            android:text="@{dashboardVm.teamA.teamShortName}"
            android:textSize="@dimen/team_playing_font_size" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="@dimen/playing_team_padding"
            bind:imageUrl="@{dashboardVm.teamA.imageUrl}" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="@dimen/playing_team_padding"
            android:text="VS"
            android:textSize="@dimen/team_playing_font_size" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="@dimen/playing_team_padding"
            android:text="@{dashboardVm.teamB.teamShortName}"
            android:textSize="@dimen/team_playing_font_size" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="@dimen/playing_team_padding"
            bind:imageUrl="@{dashboardVm.teamB.imageUrl}" />

    </LinearLayout>

    <TextView
        android:layout_centerHorizontal="true"
        android:id="@+id/match_countdown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/you_name_it_ll"
        android:layout_marginTop="10dp"
        tools:text="Match start in 24 : 20 :39" />
</RelativeLayout>

Answer 2

我用Framelayout替换了父线性布局，并在imageview中放置了图像并将tint设置为tintColour。

            <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center_vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/batball"
                android:scaleType="centerCrop"
                android:tint="@color/tintColorPrimary"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_gravity="center"
                android:gravity="center_horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@{dashboardVm.teamA.teamShortName}"
                    android:padding="@dimen/playing_team_padding"
                    android:textSize="@dimen/team_playing_font_size"
                    android:layout_gravity="center_vertical"
                    />
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    bind:imageUrl="@{dashboardVm.teamA.imageUrl}"
                    android:layout_gravity="center_vertical"
                    android:padding="@dimen/playing_team_padding"

                    />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="VS"
                        android:padding="@dimen/playing_team_padding"
                        android:textSize="@dimen/team_playing_font_size"
                        android:layout_gravity="center_vertical"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@{dashboardVm.teamB.teamShortName}"
                        android:padding="@dimen/playing_team_padding"
                        android:textSize="@dimen/team_playing_font_size"
                        android:layout_gravity="center_vertical"

                        />
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        bind:imageUrl="@{dashboardVm.teamB.imageUrl}"
                        android:layout_gravity="center_vertical"
                        android:padding="@dimen/playing_team_padding" />


            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:padding="@dimen/playing_team_padding">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/match_countdown"
                    android:text="Match start in 24 : 20 :39"
                    />

            </LinearLayout>

        </FrameLayout>

Android中图片上的文字

2 个答案: