问题
I have a square image (though this problem also applies to rectangular images). I want to display the image as large as possible, stretching them if necessary, to fill their parents, while still maintaining the aspect ratio. The image is smaller than the ImageView. The problem is, I can't stretch the image and "match" the height and width of the ImageView.
This is my XML layout file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<ImageView android:id="@+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_marginTop="10dp"/>
<TextView android:id="@+id/name"
android:layout_below="@id/image"
android:layout_alignLeft="@id/image"
android:layout_marginTop="20dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18dp"/>
<TextView android:id="@+id/name2"
android:layout_below="@id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="14dp"/>
</RelativeLayout>
I have used many combinations of fill_parent
, wrap_content
with multiple scaleTypes: fitCenter
, fitStart
, fitEnd
, centerInside
, and they all draw the images in the right aspect ratio, but none of them actually scale the images up and the ImageView itself, resulting in either the TextViews get pushed all the way down off the screen, blank spaces inside the ImageView, image not scaled, or image cropped.
I can't quite figure the right combination for this.
回答1:
These:
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"
should resize the image and change the size of the bounds to fit the new image size. If it does not do that on your device post the image you are using and what device you are testing on.
回答2:
Use this code :
android:scaleType="fitXY"
For more details about image scaling, look what's motioned in this article here
Summary:
center
Center the image in the view, but perform no scaling
centerCrop
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). The image is then centered in the view
centerInside
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding)
fitCenter
fitEnd
fitStart
fitXY
matrix
Scale using the image matrix when drawing
more details here new article
回答3:
Use this code with view layout parameters as wrapcontent
android:adjustViewBounds="true"
Hope this it will work.
回答4:
This xml code will work!. If you are specifying that your apps width is always same as the window, then the android:adjustViewBounds="true"
will set the height respective to the ration of the image.
<ImageView
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/screen"/>
回答5:
I had the same issue, android:adjustViewBounds not doing its job and having a padding at the top of the image. Into a relative layout that had match_parent values for the width and the height, I had:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/transparent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true" ...
I changed the Relative layout to a Linear layout with wrap_content values for width and height and now it is ok:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
回答6:
Did you try to adjust it programmaticaly? I think it works really well if you calculate the height of your TextView
s and adjust the height and width of the image based on this.
private void adjustImageView()
{
//Get the display dimensions
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
//TextView name
TextView name = (TextView) findViewById(R.id.name);
name.setText("your name text goes here");
name.measure(0, 0);
//name TextView height
int nameH = name.getMeasuredHeight();
//TextView name2
TextView name2 = (TextView) findViewById(R.id.name2);
name2.setText("your name2 text goes here");
name2.measure(0, 0);
//name2 TextView height
int name2H = name2.getMeasuredHeight();
//Original image
Bitmap imageOriginal = BitmapFactory.decodeResource(getResources(), R.drawable.image);
//Width/Height ratio of your image
float imageOriginalWidthHeightRatio = (float) imageOriginal.getWidth() / (float) imageOriginal.getHeight();
//Calculate the new width and height of the image to display
int imageToShowHeight = metrics.heightPixels - nameH - name2H;
int imageToShowWidth = (int) (imageOriginalWidthHeightRatio * imageToShowHeight);
//Adjust the image width and height if bigger than screen
if(imageToShowWidth > metrics.widthPixels)
{
imageToShowWidth = metrics.widthPixels;
imageToShowHeight = (int) (imageToShowWidth / imageOriginalWidthHeightRatio);
}
//Create the new image to be shown using the new dimensions
Bitmap imageToShow = Bitmap.createScaledBitmap(imageOriginal, imageToShowWidth, imageToShowHeight, true);
//Show the image in the ImageView
ImageView image = (ImageView) findViewById(R.id.image);
image.setImageBitmap(imageToShow);
}
回答7:
Set android:layout_height="wrap_content"
in imageview.
To create an image with width equals screen width, and height proportionally set according to aspect ratio, do the following. Here I mention how to load image to imageview from url.
Glide.with(context).load(url).asBitmap().into(new SimpleTarget<Bitmap>() {
@Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
// creating the image that maintain aspect ratio with width of image is set to screenwidth.
int width = imageView.getMeasuredWidth();
int diw = resource.getWidth();
if (diw > 0) {
int height = 0;
height = width * resource.getHeight() / diw;
resource = Bitmap.createScaledBitmap(resource, width, height, false);
}
imageView.setImageBitmap(resource);
}
});
Hope this helps.
来源:https://stackoverflow.com/questions/10826422/imageview-fills-parents-width-or-height-but-maintains-aspect-ratio