Как разместить представления поверх ImageView в отношении размера содержимого ImageView?

Фон

Предположим, что я хочу показать изображение чего-то с помощью ImageView, и я хочу разместить над ним новые представления (например, анимированные ImageViews, которые показывают, например, на изображении карты мира или в представлении "Переключатель" сверху изображение смартфона).

Это означает, что независимо от того, как изображение ImageView отображает изображение, в нем должны быть точки зрения, внутри правильного места, с таким же размером, как указано, или размером, связанным с самим изображением

Проблема

В отличие от других представлений, ImageView может иметь определенный размер, но его содержимое - это что-то другое (чтобы сохранить соотношение сторон).

Что я пробовал

Я пытался использовать ConstraintLayout, но это не может реально помочь, потому что ImageView может изменить свой размер (например, при изменении ориентации) и тем самым разрушить позицию, которую я дал представлениям по сравнению с ImageView.

Я нашел несколько библиотек, которые могут обрабатывать похожие вещи (например, здесь), и я даже спросил аналогичный вопрос до ( здесь), но все эти решения предназначены для статического изображения в ImageView, но то, что я ищу, - это добавление в верхней части ImageView.

Вопрос

Как правильно разместить представления поверх содержимого ImageView?

Как также масштабировать представления вниз/вверх по сравнению с размером содержимого ImageView?

Можно ли использовать ConstraintLayout для изменения масштаба представлений в соответствии с размером ImageView?

ОТВЕТЫ

Ответ 1

Сделайте FrameLayout с wrap_content вокруг ImageView. Затем вы можете установить SwitchView поверх ImageView. Вы можете выровнять его по центру, боку или по углам и использовать поля, чтобы получить точную позицию.

Он по-прежнему не будет масштабироваться с изображением, но вы можете получить неплохие результаты. Если это вам не подходит, вы можете программно получить ширину/высоту ImageView и соответственно изменить положение (или поля) SwitchView.

Ответ 2

Ниже вы можете управлять шириной переключателя или любого другого вида в соответствии с шириной просмотра изображения

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" />

Ответ 3

Насколько я понимаю, вам нужен размер изображения, отображаемый внутри изображения, и установите его как максимальную ширину вашего переключателя вправо?

Для этого вам нужны как 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 Попытка получить размер изображения в ImageView

Ссылка: Динамические значения размера

Сделайте комментарий, если вам требуется подробное объяснение.

Пример: Проверьте это изображение!

Масштабированный вид на изображение: Масштабированный вид на изображение!

Ответ 4

В 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.

Ответ 5

Вы можете использовать MarginLayoutParams с Relative Layout, чтобы установить левое и верхнее положение в 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

Ответ 6

Попробуйте это, возможно, это поможет вам.

<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>

Ответ 7

Вы хотите показать переключатель, который лежит на изображении?

<?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>

введите описание изображения здесь