为 Tab 和移动设备设计 Android App UI

Question

我正在开发新的应用程序，我必须在其中处理移动设备和平板电脑的设计。我已经阅读过，因此我需要为这件事创建几个大小的存储桶，以避免应用程序在较大或同时屏幕更小。这是我正在处理的代码

[![<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_margin="35dp"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/lblLogo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:autoSizeTextType="uniform"
        android:gravity="center"
        android:padding="15dp"
        android:text="My App Name"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="32sp" />


    <!-- Email Label -->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilLoginEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etLoginEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email"
            android:inputType="textEmailAddress" />

    </com.google.android.material.textfield.TextInputLayout>


    <!-- Password Label -->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilLoginPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etLoginPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword" />

    </com.google.android.material.textfield.TextInputLayout>


    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:padding="12dp"
        android:text="@string/btnLogin" />
</LinearLayout>

]

上面的代码在手机（例如 Nexus 6）上是这样的

**上面的代码在平板电脑（即 Nexus 10）上是这样的

请注意，在平板电脑上看起来很糟糕。我知道如何处理不同设计桶中的设计。但我想检查是否有 其他解决方案，无需在不同的文件中复制相同的设计文件 屏幕尺寸桶

提前致谢......

Answer 1

不要重复布局尝试：

• 避免在布局中对维度进行硬编码。
• 使用ConstraintLayout
• 使用不同的限定符

例如你的根视图中的边距：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/login_layout_margin"
    android:layout_marginEnd="@dimen/login_layout_margin"
    android:layout_gravity="center"
    android:orientation="vertical">
    
           <TextView
            android:id="@+id/lblLogo"
            ..>
    
</LinearLayout>

然后在不同的文件夹中创建不同的维度：

res/values/dimens.xml：

<dimen name="login_layout_margin">35dp</dimen>

res/values-sw600dp/dimens.xml：

<dimen name="login_layout_margin">350dp</dimen>

更多详情here。