Question

我试图在视图顶部制作蓝色按钮的整体（如图所示）。但是，它只显示按钮的一半。我已经确定这与升高有关，但是我不确定我尝试过的可能性是什么。

我的XML：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:gravity="center"
    android:orientation="vertical"
    android:baselineAligned="false">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:id="@+id/background"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="@color/colorPrimary" />

        <View
            android:id="@+id/contentView"
            android:layout_width="341dp"
            android:layout_height="340dp"
            android:layout_marginLeft="35dp"
            android:layout_marginRight="35dp"
            android:layout_marginTop="250dp"
            android:background="@drawable/login_container"
            android:elevation="8dp" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/contentView"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:elevation="8dp"
            android:text="LOGIN"
            android:textColor="@color/black"
            android:textSize="24sp" />

        <EditText
            android:id="@+id/emailAddress"
            android:layout_width="270dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/background"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="41dp"
            android:elevation="8dp"
            android:ems="10"
            android:hint="Email address"
            android:inputType="textEmailAddress"
            android:textColor="@color/colorPrimary" />

        <EditText
            android:id="@+id/password"
            android:layout_width="270dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/emailAddress"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="30dp"
            android:elevation="8dp"
            android:ems="10"
            android:hint="Password"
            android:inputType="textPassword"
            android:textColor="@color/colorPrimary" />

        <Button
            android:id="@+id/loginButton"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="45dp"
            android:background="@drawable/login_button"
            android:elevation="8dp"
            android:text="LOGIN"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:textStyle="bold" />


    </RelativeLayout>

</LinearLayout>

Answer 1

从相对布局中取出按钮

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#FFFFFF"
              android:gravity="center"
              android:orientation="vertical"
              android:baselineAligned="false">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:id="@+id/background"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="@color/colorPrimary" />

        <View
            android:id="@+id/contentView"
            android:layout_width="341dp"
            android:layout_height="340dp"
            android:layout_marginLeft="35dp"
            android:layout_marginRight="35dp"
            android:layout_marginTop="250dp"
            android:background="@drawable/login_container"
            android:elevation="8dp" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/contentView"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:elevation="8dp"
            android:text="LOGIN"
            android:textColor="@color/black"
            android:textSize="24sp" />

        <EditText
            android:id="@+id/emailAddress"
            android:layout_width="270dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/background"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="41dp"
            android:elevation="8dp"
            android:ems="10"
            android:hint="Email address"
            android:inputType="textEmailAddress"
            android:textColor="@color/colorPrimary" />

        <EditText
            android:id="@+id/password"
            android:layout_width="270dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/emailAddress"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="30dp"
            android:elevation="8dp"
            android:ems="10"
            android:hint="Password"
            android:inputType="textPassword"
            android:textColor="@color/colorPrimary" />




    </RelativeLayout>
    <Button <----- change 
        android:id="@+id/loginButton"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="45dp"
        android:background="@drawable/login_button"
        android:elevation="8dp"
        android:text="LOGIN"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:textStyle="bold" />
</LinearLayout>

问题不是按钮高程是您的视图隐藏按钮

 <View
        android:id="@+id/contentView"
        android:layout_width="341dp"
        android:layout_height="340dp"
        android:layout_marginLeft="35dp"
        android:layout_marginRight="35dp"
        android:layout_marginTop="250dp"
        android:background="@drawable/login_container"
        android:elevation="8dp" />

此部分隐藏了您的按钮，您可以在xml中查看它我建议使用Scrol视图，因为这个UI不适用于小屏幕设备，因为许多高度都是硬编码的

Answer 2

我道歉直言不讳，但你的布局设计得不好。你有使用嵌套的RelativeLayout的linearLayout，而父亲现在没有服务。

使用您打算使用的root。如果是相对布局，那么使用它。如果您计划在相对布局之下或之上堆叠更多内容，那么它是有意义的，但是您的样本不能用于此目的。

现在你的问题。您正在使用相对布局，只是在视图的视图上堆叠视图。首先，您的父级应该具有容器背景，您不应该在父级RelativeLayout中嵌套视图，该视图的背景应该是父级的背景。

因此，我会将您的容器背景移动到RelativeLayout并完全删除视图，因为您的硬编码高度宽度也可能起作用。

因此，在我们追捕任何愚蠢的行为之前，让我们首先正确完成设计，而不是看看我们正在寻找的是什么，如果它还在表现的话。

尝试这样的事情：

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#FFFFFF"
              android:gravity="center"
              android:orientation="vertical"
              android:baselineAligned="false">

    <View
        android:id="@+id/background"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@color/colorPrimary" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="35dp"
        android:layout_marginRight="35dp"
        android:layout_marginTop="250dp"
        android:orientation="vertical"
        android:background="@drawable/login_container">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:elevation="8dp"
            android:text="LOGIN"
            android:textColor="@color/black"
            android:textSize="24sp" />

        <EditText
            android:id="@+id/emailAddress"
            android:layout_width="270dp"
            android:layout_height="wrap_content"
            android:elevation="8dp"
            android:ems="10"
            android:hint="Email address"
            android:inputType="textEmailAddress"
            android:textColor="@color/colorPrimary" />

        <EditText
            android:id="@+id/password"
            android:layout_width="270dp"
            android:layout_height="wrap_content"
            android:elevation="8dp"
            android:ems="10"
            android:hint="Password"
            android:inputType="textPassword"
            android:textColor="@color/colorPrimary" />

        <Button
            android:id="@+id/loginButton"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="45dp"
            android:background="@drawable/login_button"
            android:elevation="8dp"
            android:text="LOGIN"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:textStyle="bold" />


    </LinearLayout>

</RelativeLayout>

我无法测试它，因为我没有你的代码，你将不得不调整边距。此外，将预览更改为3.7，这样您就可以看到您的设计可能需要对小型设备进行一些调整。最后，如果需要，您可以随时使用cardview。

按钮上的高程导致视图出现问题

2 个答案: