根据屏幕分辨率按比例缩放 CardView

Question

我有一个包含三个矩形 CardView 的活动。我已经设置了尺寸约束，以便它们根据屏幕分辨率而变化。 Please view my constraints here.

The problem is that the CardViews are not changing their size proportionally. 例如，当我在 Nexus 5 (1080 x 1920) 上运行我的应用程序时，底部组件被切成两半，就像我在 Pixel（也是 1080 x 1920)，底部组件是所需的大小。

虽然我会尽量使帖子尽可能清晰，但图片肯定有助于理解我面临的问题，所以请查看它们。

..

当屏幕尺寸非常相似时，为什么底部组件会发生如此剧烈的变化？如何修改组件以使它们成为这些不同屏幕尺寸的所需尺寸？

我知道您可以创建 small、normal、large 和 xlarge 布局，我也有，但我认为这不是问题所在。

3 CardViews 的代码：

左上角

    <android.support.v7.widget.CardView
        android:id="@+id/capture_receipt_cardview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="@dimen/margin_width_normal"
        android:layout_marginEnd="@dimen/button_gap_normal"
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:layout_constraintBottom_toBottomOf="@+id/create_invoice_cardview"
        app:layout_constraintEnd_toStartOf="@+id/create_invoice_cardview"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/create_invoice_cardview">
    </android.support.v7.widget.CardView>

右上角：

    <android.support.v7.widget.CardView
        android:id="@+id/create_invoice_cardview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="@dimen/button_gap_normal"
        android:layout_marginTop="185dp"
        android:layout_marginEnd="@dimen/margin_width_normal"
        android:layout_marginBottom="@dimen/button_gap_normal"
        app:layout_constraintBottom_toTopOf="@+id/add_single_cardview"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/capture_receipt_cardview"
        app:layout_constraintTop_toTopOf="parent">
   </android.support.v7.widget.CardView>

底部水平：

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/add_single_cardview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="400dp"
        android:layout_marginBottom="68dp"
        app:layout_constraintBottom_toTopOf="@+id/navigation"
        app:layout_constraintEnd_toEndOf="@+id/create_invoice_cardview"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/capture_receipt_cardview"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        app:layout_constraintVertical_weight="0">
    </android.support.v7.widget.CardView>

Answer 1

您所遇到的情况是由屏幕分辨率与像素密度概念的差异带来的。如前所述here：

像素密度是屏幕物理区域内的像素数，称为 dpi（每英寸点数）。这与分辨率不同，分辨率是屏幕上的像素总数。

在您的情况下，Pixel 的像素密度比 Nexus 5 更高。

为了向您展示不同之处，请收下formula：

public int dpToPx(int dp) {
    DisplayMetrics displayMetrics = getContext().getResources().getDisplayMetrics();
    return Math.round(dp * (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));     
}

鉴于您的android:layout_marginBottom="68dp"

Nexus 5 手机中的像素数：

102 = 68 * (240 / 160); // I am assuming the DPI is HIGH

您的 Pixel 手机中的像素数：

136 = 68 * (320 / 160); // I am assuming the DPI is XHIGH   

理解这个概念对您的 Android 编程生涯大有帮助。