Question

我有一个嵌套的线性布局，我想添加渐变背景的文字叠加图像，但我不知道我是如何实现这一点的。这是我使用嵌套线性布局文件的布局：

<ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <!-- row  1 -->

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="3dp">


                    <ImageView
                        android:id="@+id/imgMainCooking"
                        android:layout_width="0dp"
                        android:layout_height="130dp"
                        android:layout_marginRight="2dp"
                        android:layout_weight="1.5"
                        android:scaleType="centerCrop"
                        android:src="@drawable/cooking_r" />

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="130dp"
                    android:layout_marginLeft="2dp"
                    android:layout_marginRight="2dp"
                    android:layout_weight="2"
                    android:scaleType="centerCrop"
                    android:src="@drawable/celebrity_r" />

            </LinearLayout>

            <!-- row  2 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp">


                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="230dp"
                    android:layout_marginLeft="3dp"
                    android:layout_marginRight="2dp"
                    android:layout_weight="1.5"
                    android:background="#63ae4f"
                    android:scaleType="centerCrop"
                    android:src="@drawable/makeup_r" />

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="230dp"
                    android:layout_marginLeft="2dp"
                    android:layout_weight="1"
                    android:orientation="vertical">




                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="115dp"
                        android:layout_marginBottom="2dp"
                        android:layout_marginRight="2dp"
                        android:layout_weight="1"
                        android:scaleType="centerCrop"
                        android:src="@drawable/kids_r" />



                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="115dp"
                        android:layout_marginRight="2dp"
                        android:layout_marginTop="2dp"
                        android:layout_weight="1"
                        android:scaleType="centerCrop"
                        android:src="@drawable/fashion_r" />

                </LinearLayout>

            </LinearLayout>

            <!-- row  3 -->

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:orientation="horizontal">


                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="130dp"
                    android:layout_marginLeft="2dp"
                    android:layout_marginRight="2dp"
                    android:layout_weight="1"
                    android:scaleType="centerCrop"
                    android:src="@drawable/lifestyle_r" />


                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="130dp"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="2dp"
                    android:layout_weight="1"
                    android:scaleType="centerCrop"
                    android:src="@drawable/nutr_r" />

            </LinearLayout>

        </LinearLayout>
    </ScrollView>

这张照片是我无法实现的：

Answer 1

使用FrameLayout 例如：

尝试

            <FrameLayout
                android:clipChildren="false"
                android:clipToPadding="false"
                android:layout_width="0dp"
                    android:layout_height="130dp"
    android:layout_marginRight="2dp"
                            android:layout_weight="1.5"

                                 >
        <TextView
            android:text="Hello"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom" />
                    <ImageView
                        android:id="@+id/background"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:scaleType="centerCrop"
android:layout_gravity="bottom"
                        android:src="@null" />

                <ImageView
                        android:id="@+id/imgMainCooking"

                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                        android:scaleType="centerCrop"
                        android:src="@drawable/cooking_r" />
</FrameLayout>

而不是

 <ImageView
                        android:id="@+id/imgMainCooking"
                        android:layout_width="0dp"
                        android:layout_height="130dp"
                        android:layout_marginRight="2dp"
                        android:layout_weight="1.5"
                        android:scaleType="centerCrop"
                        android:src="@drawable/cooking_r" />

Answer 2

感谢@Vyacheslav。但我不使用framelayout，我们可以用这种方法解决这个问题。我为第一行编写了这段代码，但我们也可以将其用于其他行。

<ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">



            <!-- row  1 -->

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="3dp">


                <!-- Cooking -->
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="130dp"
                    android:layout_marginRight="2dp"
                    android:layout_weight="1.5">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="130dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/cooking_r" />

                    <TextView
                        android:layout_alignParentBottom="true"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@drawable/gradient"
                        android:text="Salam cooking"/>

                </RelativeLayout>


                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="130dp"
                    android:layout_marginRight="2dp"
                    android:layout_marginLeft="2dp"
                    android:layout_weight="2">

                    <!-- Celebrity -->
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="130dp"
                        android:scaleType="centerCrop"
                        android:src="@drawable/celebrity_r" />

                    <TextView
                        android:layout_alignParentBottom="true"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@drawable/gradient"
                        android:text="Salam celebrity"/>

                </RelativeLayout>


            </LinearLayout>
</ScrollView>

使用渐变背景以嵌套线性布局添加文本叠加图像

2 个答案: