Как разместить TextView внутри ImageView в одном месте на разных устройствах?

Question

У меня есть ImageView, где мне нужно разместить TextView поверх указанного c места в ImageView, как этот рисунок

I have managed to do this, somewhat using the following xml:

Это отлично работает на моем тестовом устройстве с одним эмулятором, но, как я ожидал, пытаясь на других устройствах эмулятора, он плохо масштабируется на нескольких устройствах с разными разрешениями и т. Д. c. из-за фиксированных значений поля dp.

Как я могу добиться этого наилучшим образом, который будет работать на нескольких устройствах, и теперь, когда TextView будет каждый раз в одной и той же позиции? Я знаю, что могу использовать размер xml и использовать разные значения полей для разных размеров устройства, но я не думаю, что это будет лучший подход.

Answer 1

Я знаю, что могу использовать размеры xml и использовать разные значения полей для разных размеров устройства, но я не думаю, что это будет лучший подход.

Вы правы, вы можете использовать подобные рекомендации, чтобы убедиться, что ваш макет будет выглядеть одинаково на разных экранах:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.4"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.8"
    tools:srcCompat="@tools:sample/backgrounds/scenic" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5"/>


<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.45"/>

<TextView
    android:id="@+id/textView7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/colorAccent"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintWidth_percent="0.2"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/guideline2"
    app:layout_constraintEnd_toStartOf="@+id/guideline3" />

</androidx.constraintlayout.widget.ConstraintLayout>

Это будет выглядеть так (черные стрелки - это рекомендации ):

And now you have only 1 layout but it is a responsive layout - you don't need to create more for different devices.

---

Please notice that I don't have any fixed sizes on my views, I have created a fully responsive layout using percentage, for more info about the subject you can check мой ответ .

Answer 2

Если TextView ограничен просмотром изображения сверху, снизу, в начале и в конце, то он будет расположен в центре ImageView . Затем вы можете использовать смещение, чтобы расположить TextView в процентном соотношении сверху и от начала ImageView . TextView будет сохранять это относительное положение независимо от размера или ориентации экрана.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/background"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test text"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        android:textColor="#ff0000"
        app:layout_constraintBottom_toBottomOf="@+id/background"
        app:layout_constraintHorizontal_bias="0.25"
        app:layout_constraintLeft_toLeftOf="@id/background"
        app:layout_constraintRight_toRightOf="@id/background"
        app:layout_constraintTop_toTopOf="@id/background"
        app:layout_constraintVertical_bias="0.25" />

</androidx.constraintlayout.widget.ConstraintLayout>

Вот как это выглядит в Android Studio.

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

Answer 3

Существует библиотека https://github.com/intuit/sdp, которая предоставляет новую единицу размера - sdp (масштабируемый dp). Эта единица измерения масштабируется вместе с размером экрана. Это может помочь Android разработчикам с поддержкой нескольких экранов. Вот пример этого изображения введите описание изображения здесь