Как сделать адаптивный дизайн для родного приложения? - PullRequest
Новая
       14

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

1 голос
/ 12 марта 2020

У меня проблема с приложением, которое я создаю. Я не знаю, как именно мы можем сделать приложение реагирующим на многие измерения устройств. Я создал файл измерений со всеми размерами для каждого макета, который я создал с размерами для Nexus 5 (360dp x 640dp). Затем я скачал плагин Dimenify и попытался масштабировать его для Nexus 5X (411dp x 731dp). Я создал новый файл под названием измерения. xml (sw411dp), увеличившись на 15%, чем размеры для Nexus 5X. Проблема в том, что я могу контролировать ширину, но есть много устройств с одинаковой шириной, но разной высоты.

Вот пример нижней панели меню: 

<layout 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:id="@+id/menu_bar_fragment"
android:orientation="vertical">

<data>
    <variable
        name="menuBarViewModelFragment"
        type="com.app.multired.viewmodel.MenuBarViewModelFragment" />
</data>

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.Fragments.MenuBarFragment">

    <ImageView
        android:id="@+id/ivMenuFondo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/menufondo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/ivMenuFondoSuperior"
        android:layout_width="match_parent"
        android:layout_height="@dimen/layoutHeightIvMenuFondoSuperior"
        android:background="@drawable/menufondosuperior"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/ivMenuFondoInferior"
        android:layout_width="match_parent"
        android:layout_height="@dimen/layoutHeightIvMenuFondoInferior"
        android:background="@drawable/menufondoinferior"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageView
        android:id="@+id/ivNotificacion"
        android:layout_width="@dimen/layoutWidthNotificacion"
        android:layout_height="@dimen/layoutHeightNotificacion"
        android:layout_marginStart="@dimen/marginStartNotificacion"
        android:layout_marginTop="@dimen/marginTopNotificacion"
        android:layout_marginBottom="@dimen/marginBottomNotificacion"
        app:layout_constraintBottom_toBottomOf="@+id/ivMenuFondoSuperior"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/notificacionoff" />

    <ImageView
        android:id="@+id/ivMas"
        android:layout_width="@dimen/layoutWidthAyuda"
        android:layout_height="@dimen/layoutHeightAyuda"
        android:layout_marginStart="@dimen/marginStartAyuda"
        android:layout_marginTop="@dimen/marginTopAyuda"
        android:layout_marginEnd="@dimen/marginEndAyuda"
        android:layout_marginBottom="@dimen/marginBottomAyuda"
        app:layout_constraintBottom_toBottomOf="@+id/ivMenuFondoSuperior"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/ivNotificacion"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/botonmas" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/layoutHeightLayoutMenuFragment"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="@+id/ivMenuFondoInferior"
        app:layout_constraintEnd_toEndOf="@+id/ivMenuFondoInferior"
        app:layout_constraintStart_toStartOf="@id/ivMenuFondoInferior"
        app:layout_constraintTop_toTopOf="@+id/ivMenuFondoInferior">

        <LinearLayout
            android:layout_width="@dimen/layoutWidthLayoutInicio"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/marginStartLayoutInicio"
            android:layout_marginTop="@dimen/marginTopLinearLayoutButton"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/ivInicio"
                android:layout_width="match_parent"
                android:layout_height="@dimen/layoutHeightIvInicio"
                android:layout_gravity="center"
                app:srcCompat="@drawable/botoninicio" />

            <TextView
                android:id="@+id/tvInicio"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/layoutHeightTvInicio"
                android:layout_gravity="center"
                android:fontFamily="@font/opensans"
                android:text="@string/inicio"
                android:textColor="@color/blanco"
                android:textSize="@dimen/textSizeTvInicio" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="@dimen/layoutWidthLayoutQR"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/_35sdp"
            android:orientation="vertical"
            android:layout_marginTop="@dimen/marginTopLinearLayoutButton">

            <ImageView
                android:id="@+id/ivQR"
                android:layout_width="match_parent"
                android:layout_height="@dimen/layoutHeightIvQR"
                android:layout_gravity="center"
                app:srcCompat="@drawable/botonqr" />

            <TextView
                android:id="@+id/tvQR"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/layoutHeightTvQR"
                android:layout_gravity="center"
                android:fontFamily="@font/opensans"
                android:text="@string/retirar"
                android:textColor="@color/blanco"
                android:textSize="@dimen/textSizeTvQR" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="@dimen/layoutWidthLayoutHistorial"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/_35sdp"
            android:orientation="vertical"
            android:layout_marginTop="@dimen/marginTopLinearLayoutButton">

            <ImageView
                android:id="@+id/ivHistorial"
                android:layout_width="match_parent"
                android:layout_height="@dimen/layoutHeightIvHistorial"
                android:layout_gravity="center"
                app:layout_constraintBottom_toBottomOf="@+id/ivMenuFondoInferior"
                app:layout_constraintStart_toEndOf="@+id/ivRetirar"
                app:layout_constraintTop_toTopOf="@+id/ivMenuFondoInferior"
                app:srcCompat="@drawable/botonhistorial" />

            <TextView
                android:id="@+id/tvHistorial"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/layoutHeightTvHistorial"
                android:layout_gravity="center"
                android:fontFamily="@font/opensans"
                android:text="@string/historial"
                android:textColor="@color/blanco"
                android:textSize="@dimen/textSizeTvHistorial" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="@dimen/layoutWidthLayoutTuCuenta"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/_35sdp"
            android:orientation="vertical"
            android:layout_marginTop="@dimen/marginTopLinearLayoutButton">

            <ImageView
                android:id="@+id/ivCuenta"
                android:layout_width="match_parent"
                android:layout_height="@dimen/layoutHeightIvTuCuenta"
                android:layout_gravity="center"
                app:srcCompat="@drawable/botoncuenta" />

            <TextView
                android:id="@+id/tvCuenta"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/layoutHeightTvTuCuenta"
                android:layout_gravity="center"
                android:fontFamily="@font/opensans"
                android:text="@string/cuenta"
                android:textColor="@color/blanco"
                android:textSize="@dimen/textSizeTvTuCuenta"
                app:layout_constraintStart_toEndOf="@+id/tvHistorial"
                app:layout_constraintTop_toBottomOf="@+id/ivCuenta" />
        </LinearLayout>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Я добавил для каждого LinearLayout: android:layout_marginStart="@dimen/_35sdp", используя implementation 'com.intuit.sdp:sdp-android:1.0.6'

1 Ответ

0 голосов
/ 12 марта 2020

Вы можете использовать библиотеку для обработки вашего интерфейса на устройствах разных размеров.

Попробуйте использовать библиотеку SDP. Для получения дополнительной информации и использования, вы можете проверить это по здесь

Добавьте это в свой Gradle для использования библиотеки SDP. 

dependencies {
  implementation 'com.intuit.sdp:sdp-android:1.0.6'
}

И в вашем макеты вместо dp используйте spd в качестве

вместо

android: layout_width = "35dp"

используйте 

android:layout_width="@dimen/_35sdp"

Дайте мне знать, если у вас есть какие-либо проблемы.

...