相对于 ImageView 的内容大小，如何将视图放在 ImageView 之上？

Question

背景

假设我想使用 ImageView 显示某物的图像，并且我想在其顶部放置新视图（例如，在世界地图图像上显示图钉的动画 ImageView，或者在顶部的 Switch 视图智能手机图像）。

这意味着无论 ImageView 如何显示图像，视图都应该在其中，在正确的位置内，与指定的大小相同，或者与 imageView 本身相关的大小

问题

与其他视图不同，ImageView 可以有一定的大小，但它的内容是另一回事（保持纵横比）。

我尝试了什么

我尝试使用 ConstraintLayout，但这无济于事，因为 ImageView 可以改变它的大小（例如在改变方向时），从而破坏了与 ImageView 相比我给出的视图的位置。

我找到了一些可以处理类似事情的库（比如here），我之前什至问过一个类似的问题（here），但是所有这些解决方案都是针对 ImageView 中的静态图像，但是我搜索的是在 ImageView 之上添加一个视图。

问题

如何正确地将视图放在 ImageView 的内容之上？

与 ImageView 内容的大小相比，如何缩小/放大视图？

可以使用 ConstraintLayout 来根据 ImageView 的大小更改视图的比例吗？

Answer 1

在ImageView 周围用wrap_content 制作FrameLayout。然后你可以在ImageView 之上设置SwitchView。您可以将其对齐到中心、侧面或角落，并使用边距来获得一些好的位置。

它仍然不会随图像缩放，但您可以获得相当不错的结果。如果这不适合您，您可以通过编程方式获取 ImageView 的宽度/高度并相应地更改 SwitchView 的位置（或边距）。

Answer 2

你想显示位于 imageview 上的开关吗？

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_download"
    android:layout_width="100dp"
    android:layout_height="60dp"
    android:layout_centerInParent="true"
    android:orientation="vertical">

    <ImageView
        android:src="@android:drawable/btn_star_big_on"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <Switch
        android:id="@+id/mySwitch"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Switch" />
</RelativeLayout>

Answer 3

您可以通过以下方式根据图像视图宽度管理开关或任何其他视图的宽度

android:layout_alignLeft="@+id/imageView"
android:layout_alignRight="@+id/imageView"

<Switch
    android:id="@+id/swi"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView"
    android:layout_alignRight="@+id/imageView" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/swi"
    android:src="@drawable/download" />

Answer 4

据我所知，您需要在图像视图中显示的图像大小并将其设置为切换视图的最大宽度，对吗？

为此，您需要 Java 和 XML，

XML 文件基本上与RelativeLayout 一样，并根据需要堆叠视图。

   <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:src="@drawable/nonet_icon"
            android:id="@+id/iconView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <android.support.v7.widget.SwitchCompat
            android:layout_width="wrap_content"
            android:visibility="gone"
            android:layout_centerInParent="true"
            android:layout_height="wrap_content"
            android:id="@+id/switchView"/>
    </RelativeLayout>

Java 代码获取 imageWidth 并将其设置为 SwitchView。

        mSwitchCompat.setVisibility(View.VISIBLE);
//        20% x 25% of Content in ImageView
        final float x = mImageView.getDrawable().getIntrinsicWidth()*.2f;
        final float y = mImageView.getDrawable().getIntrinsicHeight()*.25f;
//        waiting for the view to be drawn
        mSwitchCompat.post(new Runnable() {
            @Override
            public void run() {
//        scale current view W.r.t. x and y values 
             mSwitchCompat.setScaleX((float)mSwitchCompat.getWidth()/x);
                mSwitchCompat.setScaleY((float)mSwitchCompat.getHeight()/y);
            }
        });
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                WindowManager.LayoutParams.WRAP_CONTENT);
//        30% x 35% of content, for location
        int xMargin  = Math.round(mImageView.getDrawable().getIntrinsicWidth()*.3f);
        int yMargin = Math.round(mImageView.getDrawable().getIntrinsicHeight()*.35f);
//      set margin values, can optionally add for top and bottom
        layoutParams.setMargins(xMargin,0,yMargin,0);
        mSwitchCompat.setLayoutParams(layoutParams);

参考：获取 ImageView 的显示图像大小 Trying to get the display size of an image in an ImageView

参考：Dynamic size values

如果您需要详细说明，请发表评论。

例如：Check this image!

图像缩放视图：Scaled View on Image!

Answer 5

在 Java 中，

        ImageView imgView = (ImageView) findViewById(R.id.imageView);
        imageView.setBackgroundResource(R.drawable.yourDrawable);
        int width = imgView.getDrawable().getIntrinsicWidth();

        Switch switchKey = (Switch) findViewById(R.id.switchKey);
        switchKey.setMinimumWidth(width);

在 XML 中，将其与 alignLeft 对齐，将 alignRight 与 ImageView 对齐。

Answer 6

您可以使用MarginLayoutParams 和相对布局来设置ImageView 的左侧和顶部位置。

    image = (ImageView) findViewById(R.id.imageID);
    MarginLayoutParams marginParams = new MarginLayoutParams(image.getLayoutParams());
    marginParams.setMargins(left_margin, top_margin, right_margin, bottom_margin);
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(marginParams);
    image.setLayoutParams(layoutParams);

在下面的链接中找到完整的信息：

MarginLayoutParams

Answer 7

试试这个，也许对你有帮助。

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

    <ImageView
        android:id="@+id/img_background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/semi_transparent"
        android:layout_margin="@dimen/spacing_small"
        android:layout_alignTop="@+id/img_background"
        android:layout_alignBottom="@id/img_background">

        //this layout will expand according to your image size

    </RelativeLayout>

</RelativeLayout>