将ImageView用作Android布局的背景

8
我想利用scaleType属性,但如果我使用LinearLayout的background属性设置图像,则无法使用该属性。我尝试使用一个包含2个子元素的LinearLayout:第一个是ImageView(用于背景图像),第二个子元素是另一个LinearLayout,其中包含TextView、Button等。但结果只有图像后面是其他视图。
是否有可能使嵌套的LinearLayout浮动在ImageView上?我知道这个问题有很多变化,但我还没有找到任何有用的信息。如果我错过了什么,请指引一下。此外,如果可能的话,我想在XML中完成,并且我对可以使用的布局类型非常灵活(不必使用线性布局)。

1
除了尝试Rick Falck的答案外,您可能还想查看这篇博客文章http://android-developers.blogspot.co.uk/2009/03/android-layout-tricks-3-optimize-by.html。 - Squonk
2个回答

27

我使用RelativeLayout作为父布局,以此方式完成:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="#000000" >

    <ImageView
        style="@style/BackGroundImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="42dp"
        tools:ignore="ContentDescription" />

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

        <!--Rest of widgets......-->

    </LinearLayout>

</RelativeLayout>

我的风格:

<style name="BackGroundImageView">
    <item name="android:alpha">0.5</item>
    <item name="android:scaleType">fitXY</item>
    <item name="android:src">@drawable/img_background</item>
</style>

我使用了一种样式,因为在较低的API上alpha设置不起作用(我无法记住限制是什么)。


0

我不能使用上述方法,因为我有一个适配器和图像是在那里设置的以在GridView中显示。所以,2019年我会像下面这样做:

<RelativeLayout
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="center">

    <your_package_name.directory.SquareImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:layout_centerInParent="true"
        android:id="@+id/gridImageView"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:paddingStart="6dp"
        android:paddingEnd="6dp"
        android:paddingTop="3dp"
        android:paddingBottom="3dp"
        android:textColor="@android:color/white"
        android:background="@drawable/shape_image_holder_text"
        android:alpha=".85"
        android:scaleType="centerCrop"
        android:textSize="24sp"/>
</RelativeLayout>

Stacking view 的关键属性是 android:layout_centerInParent="true"

另外请注意,我创建了 android:background="@drawable/shape_image_holder_text" 来获得一些圆角半径,围绕我的文本视图和一些背景。这是那个 xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#22000000" />
            <stroke
                android:color="#33000000"
                android:alpha="0.6"
                android:width="1dp" />
            <corners android:radius="12dp" />
        </shape>
    </item>
</selector>

为了使我的图像在GridView中调整高度和宽度到相同的大小,我创建了一个自定义类SquareImageView(如果您不使用GridView或者您不关心这个问题,可以使用默认的ImageView)。
我的SquareImageView.java文件:
import android.content.Context;
import android.support.v7.widget.AppCompatImageView;
import android.util.AttributeSet;

public class SquareImageView extends AppCompatImageView {

    public SquareImageView(Context context) {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //noinspection SuspiciousNameCombination
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }

    public SquareImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

它看起来像这样:

enter image description here


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接