Question

所以我做了一个android布局，很简单，包括imageView和少量editText和TextView。当我在真实设备中运行我的应用程序时，设计看起来与Android Studio中的设计不同。我确实阅读了Supporting Different Screen Sizes，并了解我们强烈建议您使用wrap_content和match_parent。

我的问题是如何使用wrap_content和match_parent在其他设备中的屏幕看起来有所不同，从而改善此布局。提前谢谢。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.AppCompat"
        android:background="@color/darkpurple"
        android:minHeight="?attr/actionBarSize">

    <LinearLayout
        android:layout_width="wrap_content"
        android:background="#00aaaaaa"
        android:layout_gravity="right"
        android:layout_height="match_parent">

        <Button
            android:text="Save"
            android:id="@+id/save"
            android:background="@color/darkpurple"
            android:layout_width="wrap_content"
            android:textColor="#fff"
            android:layout_height="wrap_content"
            android:textSize="16dp" />

    </LinearLayout>

    </android.support.v7.widget.Toolbar>

    <ImageView
        android:background="@color/light_gray"
        android:layout_width="170dp"
        android:layout_marginLeft="175dp"
        android:layout_marginTop="80dp"
        android:layout_height="170dp"
        android:textColor="#295186"
        android:src="@drawable/camera"
        android:id="@+id/imageView"
        android:layout_gravity="center_horizontal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="190dp"
        android:paddingLeft="20dp"
        android:textColor="@color/red"
        android:textStyle="bold"
        android:id="@+id/Date"
        android:textSize="20dp"
        android:text="Date"/>

    <EditText
        android:layout_width="200dp"
        android:id="@+id/date"
        android:layout_marginTop="230dp"
        android:layout_height="wrap_content"
        android:paddingLeft="20dp"
        android:textColor="@color/deep_sky_blue"
        android:textSize="20dp"
        android:hint="Date"/>

    <View
        android:layout_width="500dp"
        android:id="@+id/line"
        android:layout_height="2dp"
        android:layout_marginTop="265dp"
        android:background="#c0c0c0"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="280dp"
        android:paddingLeft="20dp"
        android:textColor="@color/red"
        android:textStyle="bold"
        android:id="@+id/Amount"
        android:textSize="20dp"
        android:text="Amount"/>

    <EditText
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="310dp"
        android:paddingLeft="20dp"
        android:id="@+id/amount"
        android:textColor="@color/deep_sky_blue"
        android:textSize="20dp"
        android:hint="Amount"/>

    <View
        android:layout_width="500dp"
        android:id="@+id/line1"
        android:layout_height="2dp"
        android:layout_marginTop="345dp"
        android:background="#c0c0c0"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="370dp"
        android:paddingLeft="20dp"
        android:textStyle="bold"
        android:id="@+id/Comments"
        android:textSize="20dp"
        android:text="Comments"/>

    <EditText
        android:layout_width="330dp"
        android:layout_height="140dp"
        android:layout_marginTop="410dp"
        android:paddingBottom="45dp"
        android:layout_marginLeft="15dp"
        android:paddingLeft="13dp"
        android:id="@+id/comments"
        android:textColor="@color/deep_sky_blue"
        android:textSize="20dp"
        android:background="@drawable/roundedcorner_edittext"
        android:hint="Comments"/>

</RelativeLayout>

我的设备的ScreenShot。任何帮助将不胜感激。

Android Studio截图

Answer 1

使用layout_below在视图下放置一个视图。你使用marginTop放置所有视图（这不是正确的方法）它相对于父布局放置视图。如果高度变化，它将会中断。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.AppCompat"
    android:background="@color/darkpurple"
    android:minHeight="?attr/actionBarSize">

    <Button
        android:text="Save"
        android:id="@+id/save"
        android:background="@color/darkpurple"
        android:layout_width="wrap_content"
        android:layout_gravity="right"
        android:textColor="#fff"
        android:layout_height="wrap_content"
        android:textSize="16dp" />

</android.support.v7.widget.Toolbar>

<ImageView
    android:layout_height="170dp"
    android:layout_width="170dp"
    android:layout_marginTop="15dp"
    android:background="@color/light_gray"
    android:layout_below="@+id/toolbar"
    android:layout_alignParentRight="true"
    android:textColor="#295186"
    android:src="@drawable/camera"
    android:id="@+id/imageView"
    android:layout_gravity="center_horizontal" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="190dp"
    android:paddingLeft="20dp"
    android:textColor="@color/red"
    android:textStyle="bold"
    android:id="@+id/Date"
    android:textSize="20dp"
    android:text="Date"/>

<EditText
    android:layout_width="wrap_content"
    android:id="@+id/date"
    android:layout_below="@+id/Date"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/imageview"
    android:paddingLeft="20dp"
    android:textColor="@color/deep_sky_blue"
    android:textSize="20dp"
    android:hint="Date"/>

<View
    android:layout_width="500dp"
    android:id="@+id/line"
    android:layout_height="2dp"
    android:layout_below="@+id/date"
    android:background="#c0c0c0"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/line"
    android:layout_marginTop="10dp"
    android:paddingLeft="20dp"
    android:textColor="@color/red"
    android:textStyle="bold"
    android:id="@+id/Amount"
    android:textSize="20dp"
    android:text="Amount"/>

<EditText
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:layout_below="@id/Amount"
    android:paddingLeft="20dp"
    android:id="@+id/amount"
    android:textColor="@color/deep_sky_blue"
    android:textSize="20dp"
    android:hint="Amount"/>

<View
    android:layout_width="500dp"
    android:id="@+id/line1"
    android:layout_height="2dp"
    android:layout_below="@+id/amount"
    android:background="#c0c0c0"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/line1"
    android:layout_marginTop="10dp"
    android:paddingLeft="20dp"
    android:textStyle="bold"
    android:id="@+id/Comments"
    android:textSize="20dp"
    android:text="Comments"/>

<EditText
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="50dp"
    android:layout_marginRight="50dp"
    android:layout_below="@+id/Comments"
    android:paddingBottom="45dp"
    android:layout_marginLeft="15dp"
    android:paddingLeft="13dp"
    android:id="@+id/comments"
    android:textColor="@color/deep_sky_blue"
    android:textSize="20dp"
    android:background="@drawable/roundedcorner_edittext"
    android:hint="Comments"/>

Answer 2

您已使用

android:layout_marginTop
android:layout_marginLeft
android:paddingBottom
android:paddingLeft

等。用硬编码的值。

这就是问题所在。您提供的值可能适用于您的设备但不适用于其他设备，因为各种设备具有不同的屏幕分辨率和像素密度。

例如，在高密度屏幕上190dp可能太小，而在低密度屏幕上190dp可能太多。

因此，您应该使用多个dimens.xml文件来支持不同类型的屏幕。您应该在这些文件中提供边距和填充值。在运行时，您的应用程序将根据屏幕类型选择要使用的维度。

Answer 3

问题出在预览主题中。

将您的Android Studio设计师页面预览主题从NoTitle更改为NoActionBar，这是您的AppTheme。从设计器预览中的主题选择中选择AppTheme。

Answer 4

将您的应用主题更改为

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

这将删除您的默认操作栏。现在您可以添加自己的工具栏并通过

将其设置为操作栏

setSupportActionBar(toolbar);

如何改进我的Android布局

4 个答案: