时间戳

首页 > 解决方案 > 如何为原生应用程序进行响应式设计？

android - 如何为原生应用程序进行响应式设计？

问题描述

我正在构建的应用程序有问题。我不知道我们如何才能使应用程序对设备的多个维度做出响应。我创建了一个尺寸文件，其中包含我使用 Nexus 5 (360dp x 640dp) 的尺寸创建的每个布局的所有尺寸。然后我下载了 Dimenify 插件并尝试为 Nexus 5X (411dp x 731dp) 缩放它。我创建了一个名为 dimens.xml (sw411dp) 的新文件，比 Nexus 5X 的尺寸增加了 15%。问题是宽度是我可以控制的，但是有许多设备具有相同的宽度但具有不同的高度。

下面是底部的 MenuBar 示例：

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

标签： androidandroid-layoutresponsive

解决方案

您可以使用库来处理不同尺寸设备上的 UI。

尝试使用该SDP库。有关更多信息和用法，您可以在此处查看

将此添加到您的 Gradle 以使用该SDP库。

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

在您的布局中而不是dp用作spd

代替

android:layout_width="35dp"

利用

android:layout_width="@dimen/_35sdp"

如果您有任何问题，请告诉我。

推荐阅读