android - Android：为什么材质组件不适合不同的屏幕？

Question

我有一个布局，我希望它的所有组件都适合所有可能的屏幕分辨率，但事实并非如此。不过，在 Pixel 2 上看起来与预期的一样。

layout.xml, 中定义的每个常数dp：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient_background"
        android:gravity="center"
        android:orientation="vertical">

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/first_name_layout"
            style="@style/MaterialTextInputLayout"
            android:layout_width="@dimen/text_field_width"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_default"
            android:hint="@string/sign_up_first_name">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/first_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                android:inputType="textPersonName" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/last_name_layout"
            style="@style/MaterialTextInputLayout"
            android:layout_width="@dimen/text_field_width"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_default"
            android:hint="@string/sign_up_last_name">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/last_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                android:inputType="textPersonName" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/preferred_name_layout"
            style="@style/MaterialTextInputLayout"
            android:layout_width="@dimen/text_field_width"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_default"
            android:hint="@string/sign_up_pref_name">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/preferred_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                android:inputType="textPersonName" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/phone_number_layout"
            style="@style/MaterialTextInputLayout"
            android:layout_width="@dimen/text_field_width"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_default"
            android:hint="@string/sign_up_phone_number">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/phone_number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                android:inputType="phone" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/email_layout"
            style="@style/MaterialTextInputLayout"
            android:layout_width="@dimen/text_field_width"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_default"
            android:hint="@string/sign_up_email">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                android:inputType="textEmailAddress" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/password_layout"
            style="@style/MaterialTextInputLayout"
            android:layout_width="@dimen/text_field_width"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_default"
            android:hint="@string/sign_up_password"
            app:endIconMode="password_toggle">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                android:inputType="textPassword" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/password_confirmation_layout"
            style="@style/MaterialTextInputLayout"
            android:layout_width="@dimen/text_field_width"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_default"
            android:hint="@string/sign_up_password_confirmation"
            app:endIconMode="password_toggle">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/password_confirmation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                android:inputType="textPassword" />
        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.button.MaterialButton
            android:id="@+id/submit_btn"
            android:layout_width="@dimen/default_button_width"
            android:layout_height="@dimen/default_button_height"
            android:layout_marginTop="@dimen/margin_big"
            android:elevation="2dp"
            android:text="@string/wizard_sign_up_submit"
            android:textColor="@color/white" />

    </LinearLayout>
</layout>

从左到右：

• 像素 3，5.46 英寸，1080 x 2160：440dpi；
• 三星 Galaxy S6 Edge，5.1 英寸，1440 x 2560：577dpi；
• Nexus 5, 4.95", 1080 x 1920: xxhdpi

标签： androidlayoutmaterial-design

Answer 1

一个 android SDK，它提供了一个新的尺寸单位 - sdp (scalable dp)。此尺寸单位随屏幕尺寸缩放。它可以帮助Android开发者支持多屏。

我想建议你使用sdp (scalable dp)

例子

android:layout_marginTop="@dimen/_10sdp"
android:layout_width="@dimen/_100sdp"

将 sdp 添加到您的项目中

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

供参考

阅读使用 ConstraintLayout 构建响应式 UI。

为不同的屏幕尺寸创建响应式布局的最佳方法是使用 ConstraintLayout 作为 UI 中的基本布局。ConstraintLayout 允许您根据与布局中其他视图的空间关系为每个视图指定位置和大小。这样，所有视图都可以随着屏幕尺寸的变化一起移动和拉伸。