Как автоматически изменить размер изображения для разных размеров экрана Android Studio?

Я начинаю разрабатывать приложения для устройств Android с помощью Android Studio. Пока я тестировал свое приложение на совместимость с размером экрана, я заметил, что изображения не изменяются автоматически.

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

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

Кто-нибудь знает, как сделать автоматическое изменение размера изображения в соответствии с размером экрана?

Вот изображения того, что происходит:

Это макет приложения:

Вот как я хочу, чтобы это выглядело (Pixel 3):

Но вот как это выглядит на меньшем экране (Nexus 5):

В Xcode есть функция автоматического изменения размера, которая автоматически изменяет размер содержимого для вас. Есть ли в Android Studio что-то подобное?

Это 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"
    tools:context=".MainActivity">
    
    <Button
        android:id="@+id/resetButton"
        style="@style/Widget.AppCompat.Button.Borderless.Colored"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginBottom="56dp"
        android:background="#F70000"
        android:text="Undo"
        android:textColor="#000000"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="288dp"
        android:layout_height="248dp"

        android:background="#1750DF"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.495"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.685" />


</androidx.constraintlayout.widget.ConstraintLayout>

Заранее спасибо!

Alex Merlin 11.10.2019 источник

Ответы (3)

arrow_upward
9
arrow_downward

размеры изображений не изменяются автоматически

Поскольку вы используете значение фиксированного размера на своем imageView, у вас возникла эта проблема:

Разные телефоны имеют разный размер экрана, в вашем макете вы используете фиксированный размер в вашем представлении (например, фиксированный размер 240dp), и в результате то, что может хорошо выглядеть на одном экране (предварительный просмотр вашей студии Android экран) не будет хорошо смотреться на другом экране (на вашем реальном телефоне).

Как исправить

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

app:layout_constraintHeight_percent="0.25"
app:layout_constraintWidth_percent="0.25"

Вам нужно будет указать размер изображения 0dp как в android:layout_width, так и в android:layout_height.

Что я сделал, так это сказал, что представление должно быть равно 25% как по ширине, так и по высоте в соответствии с размером экрана, это заставит вас просматривать, реагируя на все размеры экрана, и, таким образом, он будет "автоматически изменять размер"

Tamir Abutbul 12.10.2019

arrow_upward
3
arrow_downward

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

https://github.com/intuit/sdp

Andi Tenroaji Ahmad 12.10.2019

comment

Благодарю вас! Это также отличная альтернатива использованию. - Alex Merlin; 13.10.2019

arrow_upward
2
arrow_downward

Обновить

Следуя ответу @tamir-abutbul, можно использовать layout_constraintHeight_percent и layout_constraintWidth_percent, чтобы подогнать представление под размер экрана. Я поместил верхние элементы в макет сетки, вы можете применить это к любому из ваших верхних макетов, которые вы используете, главное, что нужно учитывать, это layout_constraintHeight/Width_percent здесь. Кроме того, для изображения я установил прозрачный фон и изменил scaleType на «fitCenter», чтобы изображение сохраняло соотношение сторон на любом экране. надеюсь это поможет. Вы можете изменить андроид на androidx.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context=".MainActivity"
>

<GridLayout
    android:id="@+id/gridLayout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginTop="0dp"
    android:background="#faf"
    android:columnCount="5"
    android:rowCount="4"
    app:layout_constraintHeight_percent="0.4"
    app:layout_constraintTop_toTopOf="parent">


</GridLayout>

<ImageView

    android:id="@+id/imageView3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:background="#00000000"
    android:scaleType="fitCenter"
    android:src="@drawable/lamborghini"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.30"
    app:layout_constraintHorizontal_bias="0.495"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/gridLayout"
    app:layout_constraintVertical_bias="0.265"
    app:layout_constraintWidth_percent="0.7" />

<Button
    android:id="@+id/resetButton"
    style="@style/Widget.AppCompat.Button.Borderless.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="16dp"
    android:background="#F70000"
    android:text="Undo"
    android:textColor="#000000"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView3"
    app:layout_constraintVertical_bias="0.395" />




 </android.support.constraint.ConstraintLayout>

Adnan Temur 11.10.2019

comment

Я считаю, что пробовал это, но я все еще ошибаюсь. Изменит ли это размер изображения при изменении размера экрана? Или изображение останется прежним? - Alex Merlin; 12.10.2019

comment

Можете ли вы поделиться своим макетом xml, потому что есть методы создания макетов. Давайте посмотрим, что вы используете. - Adnan Temur; 12.10.2019

comment

Здравствуйте!, Я добавил код XML к вопросу. Не могли бы вы сказать мне, что я делаю неправильно @Adnan - Alex Merlin; 12.10.2019

Как автоматически изменить размер изображения для разных размеров экрана Android Studio?

Ответы (3)

Как исправить

Похожие вопросы