Android - 手机上的布局在大小上与设计师不同答案

【问题标题】：Android - Layout on phone differs from designer in sizeAndroid - 手机上的布局在大小上与设计师不同
【发布时间】：2016-12-16 20:00:57
【问题描述】：

目前我正在开发一个显示一些值的移动应用程序（它们永远不会改变，所以它们保存在一个列表中）。当我使用设备 4.7 WXGA 在设计器中设计页面时，底部有很多空间，但在我的真实手机（摩托罗拉 Moto G3）上没有空间。

现在我担心如果我将应用程序部署在不同的手机（三星等）上会发生什么。我一直认为使用 AXML 之类的东西创建 UI 的优势使应用程序“响应”，这意味着它适合运行它的设备。但是为什么没有发生呢？

谁能给我一个提示如何归档这个？

编辑：这是我的 AXML 代码 - 因为这里我用 Text

替换了真实的文本

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">
    <LinearLayout
        android:orientation="vertical"
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout1"
        android:layout_marginTop="5dp">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/linearLayout2"
            android:layout_margin="5dp"
            android:gravity="center">
            <LinearLayout
                android:orientation="horizontal"
                android:minWidth="25px"
                android:minHeight="25px"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/linearLayout6">
                <ImageView
                    android:layout_width="32dp"
                    android:layout_height="40dp"
                    android:id="@+id/imgLeft"
                    android:src="@drawable/arrow_left"
                    android:layout_marginRight="50dp" />
            </LinearLayout>
            <LinearLayout
                android:orientation="horizontal"
                android:minWidth="25px"
                android:minHeight="25px"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/linearLayout5"
                android:gravity="center" />
            <TextView
                android:text="Text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/tbDin"
                android:textSize="35dp"
                android:layout_marginRight="15dp"
                android:textColor="@android:color/black" />
            <TextView
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:id="@+id/tbDinWert"
                android:textSize="35dp"
                android:textColor="@android:color/black"
                android:gravity="center"
                android:text="XX" />
            <ImageView
                android:layout_width="32dp"
                android:layout_height="40dp"
                android:id="@+id/imgRight"
                android:src="@drawable/arrow_right"
                android:layout_marginLeft="50dp" />
        </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout3"
        android:background="@android:color/transparent"
        android:layout_marginTop="5dp">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:id="@+id/linearLayout4"
            android:layout_margin="5dp"
            android:paddingLeft="15dp">
            <TextView
                android:layout_width="90dp"
                android:layout_height="match_parent"
                android:id="@+id/tb1"
                android:textSize="16dp"
                android:layout_marginRight="142dp"
                android:textColor="@android:color/black"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:gravity="center" />
            <TextView
                android:text="Text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/TextView4"
                android:textSize="35dp"
                android:background="@android:color/transparent"
                android:inputType="none"
                android:textColor="@android:color/black"
                android:gravity="center" />
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:id="@+id/linearLayout4"
            android:layout_margin="5dp"
            android:paddingLeft="15dp">
            <TextView
                android:layout_width="90dp"
                android:layout_height="match_parent"
                android:id="@+id/tb2"
                android:textSize="16dp"
                android:layout_marginRight="142dp"
                android:textColor="@android:color/black"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:gravity="center" />
            <TextView
                android:text="Text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/TextView4"
                android:textSize="35dp"
                android:background="@android:color/transparent"
                android:inputType="none"
                android:textColor="@android:color/black"
                android:gravity="center" />
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:id="@+id/linearLayout4"
            android:layout_margin="5dp"
            android:paddingLeft="15dp">
            <TextView
                android:layout_width="90dp"
                android:layout_height="match_parent"
                android:id="@+id/tb3"
                android:textSize="16dp"
                android:layout_marginRight="142dp"
                android:textColor="@android:color/black"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:gravity="center" />
            <TextView
                android:text="Text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/TextView4"
                android:textSize="35dp"
                android:background="@android:color/transparent"
                android:inputType="none"
                android:textColor="@android:color/black"
                android:gravity="center" />
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:id="@+id/linearLayout4"
            android:layout_margin="5dp"
            android:paddingLeft="15dp">
            <TextView
                android:layout_width="90dp"
                android:layout_height="match_parent"
                android:id="@+id/tb3"
                android:textSize="16dp"
                android:layout_marginRight="142dp"
                android:textColor="@android:color/black"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:gravity="center" />
            <TextView
                android:text="Text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/TextView4"
                android:textSize="35dp"
                android:background="@android:color/transparent"
                android:inputType="none"
                android:textColor="@android:color/black"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp" />
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:id="@+id/linearLayout4"
            android:layout_margin="5dp"
            android:paddingLeft="15dp">
            <TextView
                android:layout_width="90dp"
                android:layout_height="match_parent"
                android:id="@+id/tb4"
                android:textSize="16dp"
                android:layout_marginRight="142dp"
                android:textColor="@android:color/black"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:gravity="center" />
            <TextView
                android:text="Text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/TextView4"
                android:textSize="35dp"
                android:background="@android:color/transparent"
                android:inputType="none"
                android:textColor="@android:color/black"
                android:gravity="center" />
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:id="@+id/linearLayout4"
            android:layout_margin="5dp"
            android:paddingLeft="15dp">
            <TextView
                android:layout_width="90dp"
                android:layout_height="match_parent"
                android:id="@+id/tb5"
                android:textSize="16dp"
                android:layout_marginRight="142dp"
                android:textColor="@android:color/black"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:gravity="center" />
            <TextView
                android:text="Text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/TextView4"
                android:textSize="35dp"
                android:background="@android:color/transparent"
                android:textColor="@android:color/black"
                android:gravity="center" />
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:id="@+id/linearLayout4"
            android:layout_margin="5dp"
            android:paddingLeft="15dp">
            <TextView
                android:layout_width="90dp"
                android:layout_height="match_parent"
                android:id="@+id/tb6"
                android:textSize="10dp"
                android:layout_marginRight="142dp"
                android:textColor="@android:color/black"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:gravity="center" />
            <TextView
                android:text="Text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/TextView4"
                android:textSize="35dp"
                android:background="@android:color/transparent"
                android:textColor="@android:color/black"
                android:gravity="center" />
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:id="@+id/linearLayout4"
            android:layout_margin="5dp"
            android:background="@android:color/transparent"
            android:paddingLeft="15dp">
            <TextView
                android:layout_width="90dp"
                android:layout_height="match_parent"
                android:id="@+id/tb7"
                android:textSize="10dp"
                android:textColor="@android:color/black"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="142dp"
                android:gravity="center" />
            <TextView
                android:text="Text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/TextView4"
                android:textSize="35dp"
                android:background="@android:color/transparent"
                android:textColor="@android:color/black"
                android:gravity="center" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

【问题讨论】：

有很多不同屏幕尺寸和分辨率的安卓设备。如果您有像上面这样的长内容，在某些设备中，该列表会出现在屏幕之外。所以最好将它包装在滚动视图中。
让我感到困扰的不仅仅是高度，还有宽度。在设计器中，左侧和右侧都有足够的空间，但在我的手机上，文本靠近边缘。现在成像宽度较小的手机...
想知道为什么将 142dp 设置为 marginRight。 ??我希望您尝试将 1 个 textview 对齐到布局的左侧和 1 个 textview 到布局的右侧。
从左侧不可见（背景#00000000 - 透明）TextView调整Text TextViews

标签： c# android layout xamarin

【解决方案1】：

好的，首先你不能对像 linearLayout4 这样的视图使用相同的 id。其次，正确的做法是创建这么多布局、创建标题和 ListView 然后填充它的最佳做法。天气你有 3 项或 333 使用 ListView。

接下来不要像这样使用 android:layout_marginRight="142dp" 。边距和内边距应该小得多，并且为了达到拉伸项目的效果，请使用以下内容：

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/linearLayout4"
    android:layout_margin="5dp"
    android:gravity="center">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="16dp"
        android:textColor="@android:color/black"
        android:text="Value"
        android:layout_weight="0.5"
        android:gravity="center"/>
    <TextView
        android:text="Text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="35dp"
        android:textColor="@android:color/black"
        android:layout_weight="0.5"
        android:gravity="center"/>
</LinearLayout>

您可以粘贴它以查看结果。

尝试在您正在创建应用的程序中练习设计。如果您使用的是 AndroidStudio，它具有预览功能，因此您可以检查不同尺寸的屏幕。

对于任何布局或视图，如果您设置 android:layout_width="match_parent" android:layout_height="match_parent" 它将始终适合设备。

尝试创建具有不同背景的布局和视图，同时更改高度和宽度，以便查看发生了什么。

【讨论】：

你能解释一下“创建标题和 ListView 然后填充它”的意思吗？
创建一个布局，该布局将包含列名称和广告列表视图下方。这是一个tutorial，您可以开始在 android 中尝试使用列表。

【解决方案2】：

您必须记住，设备具有不同的屏幕尺寸和不同的密度。不要以 px 为单位设置像素大小，而是以 sp 为字体（可缩放像素）。对于其他事情，使用 dp 而不是 px

【讨论】：

android:minWidth="25px",android:minHeight="25px... 另外你的字体大小在 dp，这些应该在 sp

【解决方案3】：

您必须通过创建 layout-ldpi、mdpi、hdpi、xhdpi 来处理多种屏幕尺寸。因此，任何屏幕尺寸都存在，所有设备的外观和感觉都是相同的，字体应该在“sp”中，其他元素在“dp”中。

【讨论】：

所以在为每个分辨率类别（ldpi、mdpi、hdpi 和 xhdpi）创建布局后，我必须在代码中决定需要什么布局？
根据屏幕分辨率，加载相应的布局
所以在为每个分辨率类别（ldpi、mdpi、hdpi 和 xhdpi）创建布局后，我必须在代码中决定需要什么布局？
@Radinator，根据屏幕分辨率，加载相应布局
在我看来，您实际上不必定义所有这些不同的布局。我总是以适用于所有设备的方式使用 wrap_content 和 match_parent 以及滚动视图。除非您想在平板电脑上进行漂亮的布局，否则我会这样做

【解决方案4】：

我认为您需要在您的应用程序中使用全尺寸的无拉伸图像，使用本教程您可以毫无问题地在每个设备中调整图像

https://dzone.com/articles/using-full-size-none-stretched

如果您想根据设备或操作系统的类型调整您的应用程序，也可以这样做。

静态 Device 类包括几个属性和方法，允许您的代码在运行时以非常简单直接的方式处理设备差异：

Device.OS 属性返回 TargetPlatform 的成员枚举：iOS、Android、WinPhone 或其他。 WinPhone 会员指所有 Windows 和 Windows Phone 平台。
Device.Idiom 属性返回 TargetIdiom 的成员
枚举：手机、平板电脑、台式机或不支持。

您可以在 if 和 else 语句或 switch 和 case 块中使用这两个属性来执行特定于特定平台的代码。

https://developer.xamarin.com/guides/xamarin-forms/platform-features/device/

https://forums.xamarin.com/discussion/56817/how-to-use-platform-idiom-in-xaml

在这本书中，你可以看到一个很好的例子，使用 Device.OnPlatform 第 58 页。

https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/

我希望通过这个可以解决您的问题。问候。

【讨论】：