将背景图缩放以包裹布局的内容

Question

将背景图缩放以包裹布局的内容

androidbackgroundandroid-linearlayoutandroid-relativelayoutandroid-framelayout

44

我有一个包含一些文本字段并在活动顶部显示背景图像的布局。我希望背景图像能够根据内容缩放以适应布局（不考虑宽高比）。然而，图片比内容更大，因此布局会将背景图片包裹起来。这是我的原始代码：

<RelativeLayout 
    android:layout_width="fill_parent"
    android:id="@+id/HeaderList" 
    android:layout_gravity="top"
    android:layout_height="wrap_content" 
    android:background="@drawable/header">
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" 
        android:id="@+id/NameText"
        android:text="Jhn Doe" 
        android:textColor="#FFFFFF"
        android:textSize="30sp" 
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" 
        android:paddingLeft="4dp"
        android:paddingTop="4dp" 
    />
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" 
        android:textColor="#FFFFFF"
        android:layout_alignParentLeft="true"
        android:id="@+id/HoursText"
        android:text="170 hours" 
        android:textSize="23sp"
        android:layout_below="@+id/NameText" 
        android:paddingLeft="4dp" 
    />
</RelativeLayout>

在浏览了一些其他问题后，我找到了以下两个链接:

如何包装内容视图而不是背景可绘制对象?

缩放Drawable或背景图像?

基于此，我创建了一个带有显示背景的ImageView的FrameLayout。不幸的是，我仍然无法让它工作。我希望背景图像的高度能够随着文本视图的大小而缩小/扩展，但使用FrameLayout时，ImageView适应其父级的大小，我找不到一种方法使父级适应文本视图布局的大小。以下是我的更新代码：

<FrameLayout 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <ImageView android:src="@drawable/header"
        android:layout_width="fill_parent" 
        android:scaleType="fitXY"
        android:layout_height="fill_parent" 
        />
    <RelativeLayout 
        android:layout_width="fill_parent"
        android:id="@+id/HeaderList" 
        android:layout_gravity="top"
        android:layout_height="wrap_content"
        >
        <TextView 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" 
            android:id="@+id/NameText"
            android:text="John Doe" 
            android:textColor="#FFFFFF"
            android:textSize="30sp" 
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true" 
            android:paddingLeft="4dp"
            android:paddingTop="4dp" 
            />
        <TextView 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" 
            android:textColor="#FFFFFF"
            android:layout_alignParentLeft="true" 
            android:id="@+id/HoursText"
            android:text="170 hours" 
            android:textSize="23sp"
            android:layout_below="@+id/NameText" 
            android:paddingLeft="4dp" 
            />
    </RelativeLayout>
</FrameLayout>

有没有人有建议，如何最好地使图像按照某个布局的内容大小进行缩放？我不关心图像的纵横比，因为这并不重要，我只想让它填充背景。

谢谢！

- bjg222

9个回答

3

您可以尝试这个技巧：

FrameLayout（wrapcontent，wrapcontent）
- ImageView（match parent，match parent）//它是您的背景
- LinearLayout（wrapcontent，wrapcontent）
- - 将所有内容放在此线性布局或任何其他类型中

- Umair

6

对我来说不起作用，因为 ImageView 比其容器大 :( - richardaum

您可以定义 ImageView 的大小... 并使用 scaleType 以相应地适配图像。 - Umair

2

使用RelativeLayout（非强制性），而不是FrameLayout，并使用android:scaleType="fitXY"。将imageView移动到包含textviews android:id="@+id/HeaderList"的RelativeLayout中，并在此级别取消设置背景android:background="@drawable/header"。

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
         android:id="@+id/principal"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:background="@drawable/header" >

     <RelativeLayout 
         android:layout_width="fill_parent"
         android:id="@+id/HeaderList" 
         android:layout_gravity="top"
         android:layout_height="wrap_content" >  


         <ImageView
             android:id="@+id/backImg"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:layout_centerInParent="true"
             android:adjustViewBounds="true"
             android:background="@color/blancotransless"
             android:src="@drawable/header"
             android:scaleType="fitXY" >
         </ImageView>

             <TextView 
                 android:layout_height="wrap_content"
                 android:layout_width="wrap_content" 
                 android:id="@+id/NameText"
                 android:text="John Doe" 
                 android:textColor="#FFFFFF"
                 android:textSize="30sp" 
                 android:layout_alignParentLeft="true"
                 android:layout_alignParentTop="true" 
                 android:paddingLeft="4dp"
                 android:paddingTop="4dp" 
                 />
             <TextView 
                 android:layout_height="wrap_content"
                 android:layout_width="wrap_content" 
                 android:textColor="#FFFFFF"
                 android:layout_alignParentLeft="true" 
                 android:id="@+id/HoursText"
                 android:text="170 hours" 
                 android:textSize="23sp"
                 android:layout_below="@+id/NameText" 
                 android:paddingLeft="4dp" 
                 />
         </RelativeLayout> 
      </RelativeLayout>

大致上应该能运行!

- Zeus Monolitics

1

创建一个可绘制的XML文件，例如mybackground.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/header"
    android:gravity="fill" />

然后在第一个代码片段中的RelativeLayout中使用

android:background="@drawable/mybackground"

- yoah

0

我觉得我以前做过类似的事情，尝试在你的图像视图中调整重力设置，我认为其中一个应该能做到你想要的。

- jsonfry

谢谢您的建议。我已经尝试过在ImageView和RelativeLayout上使用layout_gravity参数，但是没有什么效果。我尝试了“clip”和“fill”选项，以及它们与其他定位值的各种组合，但似乎都没有任何影响。您还记得您使用了哪些具体的gravity值吗？ - bjg222

0

我没有尝试过，但如果你在 onCreate 中动态设置背景图片可能会有用。布局的大小应该已经设置好了。

- Skyler Lauren

我尝试了这个方法，但在我的情况下并没有奏效。视图组仍被调整以包含背景图片。 - greg7gkb

0

最简单的解决方案：

ic_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:color/white" />

    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_background_image" />
    </item>

</layer-list>

& 然后

android:background="@drawable/ic_background"

- Ahamadullah Saikat

-1

尝试这段代码......

<LinearLayout 
   android:layout_width="fill_parent"
   android:id="@+id/HeaderList" 
   android:orientation="vertical"
   android:layout_gravity="top"
   android:layout_height="wrap_content" 
   android:background="@drawable/header">
<TextView 
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" 
    android:id="@+id/NameText"
    android:text="Jhn Doe" 
    android:textColor="#FFFFFF"
    android:textSize="30sp" 
    android:paddingLeft="4dp"
    android:paddingTop="4dp" 
/>
<TextView 
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" 
    android:textColor="#FFFFFF"
    android:id="@+id/HoursText"
    android:text="170 hours" 
    android:textSize="23sp" 
    android:paddingLeft="4dp" 
/>
</LinearLayout>

- viks

-2

你可以使用这个：

<ImageView
...
android:scaleType="fitXY"
>

希望它有所帮助)))

- UnknownJoe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Squatting Bear · Accepted Answer

我遇到了同样的问题（我想），而我找到的唯一解决方案是：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <View
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/some_image"
        android:layout_alignTop="@+id/actual_content"
        android:layout_alignBottom="@id/actual_content"
        android:layout_alignLeft="@id/actual_content"
        android:layout_alignRight="@id/actual_content"
        />

    <LinearLayout
        android:id="@id/actual_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        >

       <!-- more stuff ... -->

    </LinearLayout>

</RelativeLayout>