问题
I have a layout that contains some text fields and has a background image that's displayed at the top of my activity. I'd like the background image to scale to wrap the content (don't care about aspect ratio). However, the image is larger than content, so the layout instead wraps the background image. Here's my original code:
<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>
After searching through some other questions, I found these two:
How to wrap content views rather than background drawable?
Scale a Drawable or background image?
Based on this, I created a FrameLayout w/ an ImageView showing the background. Unfortunately, I still can't get it to work. I want the height of the background image to shrink/expand w/ the size of the text views, but with the FrameLayout, the ImageView fits to the size of it's parent, and I can't find a way to make the parent fit to the size the text view layout. Here's my updated code:
<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>
Does anybody have any suggestions for how best to make an image scale to the size of the contents of some layout? I'm not concerned with the aspect ratio of the image, as it won't matter, I just want it to fill the background.
Thanks!
回答1:
I had the same problem (I think), and the only solution I could find was this:
<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>
回答2:
You may try this trick,
- FrameLayout (wrapcontent, wrapcontent)
- ImageView (match parent, match parent) // its your background
- LinearLayout (wrapcontent, wrapcontent)
- All your contents goes inside this linear layout or any other type what ever you want
回答3:
Work with RealtiveLayout (no mandatory but instead of FrameLayout and use android:scaleType="fitXY". Move the imageView to RealtiveLayout which contains the textviews android:id="@+id/HeaderList" and unset the background android:background="@drawable/header" at this level.
<?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>
More or less it should work!
回答4:
Create a drawable xml, say 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" />
Then in your RelativeLayout in the first code snippet use
android:background="@drawable/mybackground"
回答5:
I think I've done something similar to this in the past, try playing with the gravity setting in your image view, I think one of them should do what you're after.
回答6:
I have not tried it, but if you set the background image dynamically on the onCreate that might work. The size of the layout should already be set.
回答7:
Simplest solution:
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>
& Then
android:background="@drawable/ic_background"
回答8:
You can use this:
<ImageView
...
android:scaleType="fitXY"
>
Hope it helped)))
回答9:
Try this code.....
<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>
来源：https://stackoverflow.com/questions/4761800/scale-background-image-to-wrap-content-of-layout