Android Studio (XML)：按钮上的垂直线消失了

Question

我正在尝试在两个按钮之间插入一条小线，如下所示：

但是，当我插入一行时，我遇到了两个问题：(1) 该行填满了整个页面；(2) 当我添加 elevation=10dp 时，该行消失了。不知何故，即使我放置 alignTop=NIV 和 alignBottom=NIV.

，该行也不会减小其大小

我该如何解决这些问题？

以防万一你觉得它有用，我的 XML 文件在这里：

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

    <TextView
        android:id="@+id/white_background_round"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="50dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="50dp"
        android:background="@drawable/white_background_round" />

    <RelativeLayout
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/white_background_round"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp">

        <TextView
            android:id="@+id/title_string"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/title_string"
            android:textColor="@color/colorPrimary"
            android:textSize="50sp"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/title_image"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_toEndOf="@+id/title_string"
            android:layout_marginLeft="20dp"
            android:background="@drawable/ic_bible_english" />
    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/bible_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/title"
        android:layout_centerHorizontal="true">

        <Button
            android:id="@id/KJV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:text="KJV"
            android:textColor="@color/colorPrimaryLight"/>

        <View
            android:layout_width="1dp"
            android:layout_alignEnd="@+id/KJV"
            android:layout_alignParentBottom="true"
            android:background="@android:color/black" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toEndOf="@+id/KJV"
            android:background="@color/colorAccent"
            android:text="NIV"
            android:textColor="@color/colorPrimaryLight" />

    </RelativeLayout>



</RelativeLayout>

Answer 1

我在我的系统上试过了，问题是您将按钮包含在相对布局中。尝试封闭在 Orientation = Horizontal 的线性布局中。这是对我有用的代码。虽然我只做了按钮，其他什么都没有，但希望它对你也有用。

XML 文件:-

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:text="KJV"
            android:textColor="@color/colorPrimary"/>

        <View
            android:layout_width="1dp"
            android:layout_alignParentBottom="true"
            android:background="@android:color/black" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:text="NIV"
            android:textColor="@color/colorPrimaryDark" />

</LinearLayout>

这是 XML 的设计：-

Answer 2

希望此代码示例对您有所帮助，因此视图组（线性布局）拥有您想要的背景颜色。然后你可以在里面有3个视图； a button, a view for the line, and another button。我用 ?attr/selectableItemBackgroundBorderless 设置按钮背景以获得不可见背景的涟漪效果。最后，以 2dp 的视图为例，高度匹配父级，添加边距顶部和底部。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:text="NIV" />

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:background="@color/colorPrimary"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:text="KJV" />

    </LinearLayout>


</LinearLayout>

Answer 3

相对布局不需要orientation变量，不需要。相反，我建议您使用 LinearLayout 重写它。为此，您不需要 2 个嵌套的相对布局，只需一个 linearlayout ，水平布局，一个 TextView，用于行的 ImageView/View，最后是一个 TextView。通过向线性布局中的每个视图添加一些填充，您将能够创建一个更简洁的 XML 项目，该项目比您当前拥有的项目更易于维护。请查看 LinearLayout 文档以获取更多信息。 https://developer.android.com/reference/android/widget/LinearLayout

Android Studio (XML)：按钮上的垂直线消失了

Android Studio (XML): The vertical line on buttons disappeared

xml

button

line

android-studio