为什么我需要将ImageView包装到FrameLayout中？

Here is a simple layout:

这是一个简单的布局:

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

            <ImageView
                android:id="@+id/companyIcon"
                android:layout_width="wrap_content"
                android:layout_height="40dp" <!-- notice I've limited a height -->
                android:scaleType="fitStart"
                android:adjustViewBounds="true"
                android:layout_alignParentLeft="true" />

            <TextView
                android:id="@+id/companyName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/companyIcon"
                android:layout_marginLeft="3dp"
                android:layout_centerVertical="true"
                android:textStyle="bold"
                android:textColor="#20526d" />
        </RelativeLayout>

The height of an image I will set by setImageBitmap() is more that 40dp. Using this layout I have an extra space between ImageView and TextView, where did it come from?

我将通过setImageBitmap()设置的图像高度超过40dp。使用这种布局我在ImageView和TextView之间有一个额外的空间,它来自哪里?

But after I wrap the ImageView with FrameLayout I don't have this unnecessary extra space:

但是在使用FrameLayout包装ImageView后,我没有这个不必要的额外空间:

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

            <FrameLayout
                android:id="@+id/image_container"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/companyIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:scaleType="fitStart"
                    android:adjustViewBounds="true"
                    android:layout_alignParentLeft="true" />
            </FrameLayout>

            <TextView
                android:id="@+id/companyName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/image_container"
                android:layout_marginLeft="3dp"
                android:layout_centerVertical="true"
                android:textStyle="bold"
                android:textColor="#20526d" />
        </RelativeLayout>

And the result:

结果如下:

Can you guys explain why shall I put ImageView into FrameLayout to have things as intended? Thank you very much.

你们能解释一下为什么我要将ImageView放入FrameLayout来按照预期进行操作?非常感谢你。

6 个解决方案

#1

The height of an image I will set by setImageBitmap() is more that 40dp. Using this layout I have an extra space between ImageView and TextView, where did it come from?

我将通过setImageBitmap()设置的图像高度超过40dp。使用这种布局我在ImageView和TextView之间有一个额外的空间,它来自哪里?

Since the android:layout_height="40dp" with a android:scaleType="fitStart", the image is getting scaled down (and to the left/start) to fit the height, so this "extra space" is actually the original width of the image, since your android:layout_width="wrap_content". I recreated your layout with my own image that is larger than 40dp. When you select the ImageView, you can see that its bounds stretch to the image's original width.

由于android:layout_height =“40dp”带有android:scaleType =“fitStart”,图像缩小(并向左/开始)以适应高度,因此这个“额外空间”实际上是原始宽度图像,因为你的android:layout_width =“wrap_content”。我用我自己的大于40dp的图像重新创建了你的布局。选择ImageView时,可以看到其边界延伸到图像的原始宽度。

To further prove this, if I set android:scaleType="center", no fit is applied and you can see the ImageView's original width.

为了进一步证明这一点,如果我设置android:scaleType =“center”,则不会应用拟合,您可以看到ImageView的原始宽度。

Can you guys explain why shall I put ImageView into FrameLayout to have things as intended?

你们能解释一下为什么我要将ImageView放入FrameLayout来按照预期进行操作?

It appears that since your FrameLayout uses android:layout_width="wrap_content", it gets the correct scaled down width from your ImageView after it gets scaled due to android:adjustViewBounds="true". It is strange that the ImageView itself uses android:layout_width="wrap_content", but shows the original image's width, and not the scaled width. My hunch is that the height and width of ImageViews get set before the scaling is applied, so the ImageView gets the original image's width, but the parent FrameLayout gets the scaled width of it's ImageView child after the scaling is applied. This may not be true, but it appears that way to me.

看来,由于你的FrameLayout使用了android:layout_width =“wrap_content”,因此在得到缩放后,它会从你的ImageView获得正确的缩小宽度,因为android:adjustViewBounds =“true”。奇怪的是,ImageView本身使用android:layout_width =“wrap_content”,但显示原始图像的宽度,而不是缩放的宽度。我的预感是在应用缩放之前设置ImageViews的高度和宽度,因此ImageView获取原始图像的宽度,但是在应用缩放后,父FrameLayout获得其ImageView子级的缩放宽度。这可能不是真的,但对我来说似乎是这样。

However, you can solve the unscaled width issue (without using a FrameLayout) by using android:maxHeight="40dp" on the ImageView. You can then set android:layout_height="wrap_content" so your images can be smaller than 40dp if the image is smaller.

但是,您可以通过在ImageView上使用android:maxHeight =“40dp”来解决未缩放的宽度问题(不使用FrameLayout)。然后你可以设置android:layout_height =“wrap_content”,这样如果图像较小,你的图像可以小于40dp。

<ImageView
    android:id="@+id/companyIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:adjustViewBounds="true"
    android:maxHeight="40dp"
    android:scaleType="fitStart" />

#2

This applies to almost all the view but answer is written considering specifically ImageView

这适用于几乎所有视图,但答案是专门考虑ImageView编写的

Guideline to set Height and Width

设置高度和宽度的指南

Choose one of this three options only.

只选择这三个选项中的一个。

1. Set both height and width to "WRAP_CONTENT"

将高度和宽度都设置为“WRAP_CONTENT”

2. Set both height and width to "FILL_PARENT"

将高度和宽度都设置为“FILL_PARENT”

3. Set both height and width to "FIXED SIZE"
   
   *Avoid using mixture of them say Width=WRAP_CONTENT and Height=FILL_PARENT

将高度和宽度都设置为“FIXED SIZE”*避免使用它们的混合物,例如Width = WRAP_CONTENT和Height = FILL_PARENT

---

Guideline to set SCALETYPE for ImageView

为ImageView设置SCALETYPE的准则

What does ScaleType do?

ScaleType有什么作用?

It scale the image you set to the ImageView, It doesn't scale ImageView so when you set it to fitStart it will scale your image and show on the right but your imageView will remain same in terms of height and width as what you have specified.

它会将您设置的图像缩放到ImageView,它不会缩放ImageView,因此当您将其设置为fitStart时,它会缩放图像并在右侧显示,但您的imageView将在高度和宽度方面保持与指定的相同。

As if you are using WRAP_CONTENT for height and width you don't need to specify ScaleType cause your ImageView is automatically going to be as big as your image.

好像您使用WRAP_CONTENT作为高度和宽度,您不需要指定ScaleType,因为ImageView会自动变为与图像一样大。

As if you are using FILL_PARENT for height and width you will have option to show the image in Center,Start,End or in Full view.. so based on that you can choose your ScaleType.

就好像您使用FILL_PARENT高度和宽度一样,您可以选择在中心,开始,结束或完整视图中显示图像。所以基于此,您可以选择您的ScaleType。

As if you are using FIXED_SIZE fpr height and width you should opt for scaletype=FITXY.

好像您使用的是FIXED_SIZE fpr高度和宽度,您应该选择scaletype = FITXY。

---

Guideline to set Image into ImageView

将Image设置为ImageView的指南

As if you are setting image statically in XML then you have one image on your hand so you can create image of the size you wish as per your layout design and just move on with WRAP_CONTENT.

好像您是在XML中静态设置图像,然后手上有一个图像,这样您就可以根据布局设计创建所需大小的图像,然后继续使用WRAP_CONTENT。

As if you are setting image at runtime after downloading it from somewhere, that time download the image and create bitmap of the size you prefer and then set it to ImageView

好像从某处下载后在运行时设置图像,那时下载图像并创建您喜欢的尺寸的位图,然后将其设置为ImageView

---

Specific to your case

具体到你的情况

You can see that your image is quite stretched and the text is not readable that's because you have downloaded and set image as it is but in smaller height and width.. rather you should have done like,

您可以看到您的图像非常拉伸,文本不可读,因为您已经下载并设置了图像,但是高度和宽度较小..相反,您应该这样做,

Set ImageView height and width to WRAP_CONTENT in XML file

将ImageView的高度和宽度设置为XML文件中的WRAP_CONTENT

                    <ImageView
                    android:id="@+id/companyIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true" />

Download image in your required size say 50X100, for example see this code

下载所需大小的图片,例如50X100,例如,请参阅此代码

class LoadPics extends AsyncTask<Void, Bitmap, Bitmap> {
    String urlStr;
    ImageView iv;
    int width, height;

    public LoadPics(ImageView iv, String url, int width, int height) {
        this.iv = iv;
        this.urlStr = url;
        this.width = width;
        this.height = height;
    }

    @Override
    protected Bitmap doInBackground(Void... params) {
        try {
                InputStream in = null;
                try {
                    URL url = new URL(urlStr);
                    URLConnection urlConn = url.openConnection();
                    HttpURLConnection httpConn = (HttpURLConnection) urlConn;
                    httpConn.connect();
                    in = httpConn.getInputStream();
                } catch (MalformedURLException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }

                BitmapFactory.Options o = new BitmapFactory.Options();
                o.inJustDecodeBounds = true;

                int scale = 2;
                if (o.outHeight > width || o.outWidth > height) {
                    scale = 2 ^ (int) Math.ceil(Math.log(width
                            / (double) Math.max(o.outHeight, o.outWidth))
                            / Math.log(0.5));
                }

                if (scale <= 1 && o.outHeight > 150) {
                    scale = 5;
                }

                BitmapFactory.Options o2 = new BitmapFactory.Options();
                o2.inSampleSize = scale;
                Bitmap b1 = BitmapFactory.decodeStream(in, null, o2);
                b1 = Bitmap.createScaledBitmap(b1, width, height, true);
                loader.addToCache(urlStr, b1);
                publishProgress(b1);

        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    @Override
    protected void onProgressUpdate(Bitmap... values) {
        super.onProgressUpdate(values);
        iv.setImageBitmap(values[0]);
    }
}

And call this method with your arguments,

并用你的参数调用这个方法,

new LoadPics(ivUser,imgURL,100,50).execute();

#3

try to replace android:scaleType="fitStart" with this android:scaleType="fitXY"

尝试用这个android替换android:scaleType =“fitStart”:scaleType =“fitXY”

---

Edit

in your image view you should set the width of imagView to wrap-content this will take the size of image. If you hard-code the imageView's width (as you have done it by giving the width to 40dp) then this will not look so good in other android mobile devices.

在图像视图中,您应该将imagView的宽度设置为wrap-content,这将占用图像的大小。如果您对imageView的宽度进行硬编码(正如您通过将宽度设置为40dp那样),那么在其他Android移动设备中看起来不会那么好。

Still if you want to do so then Try to load image of lesser in resolution. if this image is 200X100 in resolution, then try to load the image of 100X50 in your ImageView

如果你想这样做,那么尝试加载分辨率较低的图像。如果此图像的分辨率为200X100,则尝试在ImageView中加载100X50的图像

#4

If you do android:scaleType="FIT_END", without the FrameLayout, does that put the Subway image near the "Subway" text? I wonder, because you have android:layout_alignParentLeft="true" in there. I'm thinking that the ImageView's original size before the scaling is what is throwing off the layout without a FrameLayout.

如果你做了android:scaleType =“FIT_END”,没有FrameLayout,那是否将地铁图像放在“地铁”文本附近?我想知道,因为你有android:layout_alignParentLeft =“true”。我认为在缩放之前ImageView的原始大小是没有FrameLayout的布局。

It probably doesn't matter too much, but it does take some processing to scale and resize the image for what you want it to do. If it is viable for what you want to do, I'd simply resize the image myself instead of relying on XML. If I wanted to cater to multiple sizes, I would have a couple of different layouts made. This of course may be overkill for your purpose, I do not know.

它可能并不重要,但它确实需要一些处理来缩放图像并调整图像大小以满足您的需要。如果它对你想做的事情是可行的,我只是自己调整图像大小而不是依赖XML。如果我想迎合多种尺寸,我会做出几种不同的布局。对于你的目的,这当然可能有点过分,我不知道。

#5

Extra space came in first image because u set match parent in image container layout. but second u used wrap content in FrameLayout which is image container.

第一张图片中有额外的空间,因为您在图像容器布局中设置了匹配父级。但是第二个你在FrameLayout中使用了包装内容,它是图像容器。

my suggession to do these thing Create linear layout insider relative layout and apply layout_weight propert so ratio will be same in both view.

我做这些事情的建议创建线性布局内幕相对布局并应用layout_weight属性,因此两个视图中的比例都相同。

#6

try to set the scale type to center_inside.

尝试将比例类型设置为center_inside。