Android 中的一些按钮未显示在 RelativeLayout 上

Question

我使用 RelativeLayout 创建布局。在这里我设计布局如下。我正在使用 android 工作室。

这是我的布局代码，

<?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="@android:color/white">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/content24"
        android:id="@+id/step19textView"
        android:textSize="18dp"
        android:textAlignment="center"
        android:paddingRight="10dp"
        android:paddingLeft="10dp"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:layout_marginTop="32dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
<HorizontallScrollBar>
  <LinearLayout
           Orienteation= "horizontal";>
    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="1"
        android:id="@+id/step19button1"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:background="@drawable/button_border"
        android:layout_below="@+id/step19textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="50dp" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="2"
        android:id="@+id/step19button2"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignTop="@+id/step19button1"
        android:layout_toRightOf="@+id/step19button1"
        android:layout_toEndOf="@+id/step19button1"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="3"
        android:id="@+id/step19button3"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button2"
        android:layout_toRightOf="@+id/step19button2"
        android:layout_toEndOf="@+id/step19button2"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="4"
        android:id="@+id/step19button4"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:textColor="@android:color/white"
        android:layout_alignBottom="@+id/step19button3"
        android:layout_toRightOf="@+id/step19button3"
        android:layout_toEndOf="@+id/step19button3"
        android:background="@drawable/button_border_5"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="5"
        android:id="@+id/step19button5"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button4"
        android:layout_toRightOf="@+id/step19button4"
        android:layout_toEndOf="@+id/step19button4"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="6"
        android:id="@+id/step19button6"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button5"
        android:layout_toRightOf="@+id/step19button5"
        android:layout_toEndOf="@+id/step19button5"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="7"
        android:id="@+id/step19button7"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button6"
        android:layout_toRightOf="@+id/step19button6"
        android:layout_toEndOf="@+id/step19button6"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="8"
        android:id="@+id/step19button8"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button7"
        android:layout_toRightOf="@+id/step19button7"
        android:layout_toEndOf="@+id/step19button7"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="9"
        android:id="@+id/step19button9"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button8"
        android:layout_toRightOf="@+id/step19button8"
        android:layout_toEndOf="@+id/step19button8"
        android:background="@drawable/button_border"/>
    </LinearLayout>
  </HorizontalScrollBar>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:id="@+id/step19editText"
        android:paddingLeft="10dp"
        android:layout_below="@+id/step19button1"
        android:layout_alignLeft="@+id/step19button1"
        android:layout_alignStart="@+id/step19button1"
        android:layout_marginTop="20dp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:id="@+id/step19editText2"
        android:layout_alignTop="@+id/step19editText"
        android:layout_centerHorizontal="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:id="@+id/step19editText3"
        android:paddingRight="10dp"
        android:layout_alignTop="@+id/step19editText2"
        android:layout_alignRight="@+id/step19button9"
        android:layout_alignEnd="@+id/step19button9" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/content25"
        android:id="@+id/step19textView2"
        android:textAlignment="textStart"
        android:textSize="18dp"
        android:paddingLeft="10dp"
        android:layout_alignTop="@+id/step19textView4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/content26"
        android:id="@+id/step19textView4"
        android:textSize="18dp"
        android:textAlignment="center"
        android:layout_alignTop="@+id/step19textView5"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/content27"
        android:id="@+id/step19textView5"
        android:textSize="18dp"
        android:textAlignment="textEnd"
        android:paddingRight="10dp"
        android:layout_below="@+id/step19editText3"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="    Next    "
        android:textSize="18dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:id="@+id/step19nextbutton"
        android:layout_marginTop="59dp"
        android:textColor="@android:color/white"
        android:background="@drawable/button_border_5"
        android:layout_below="@+id/step19textView4"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

当我在 Samsung Galaxy S Duos 3 (http://www.gsmarena.com/samsung_galaxy_s_duos_3-6662.php) 上尝试运行时，8 和 9 按钮没有显示，尽管设计看起来不错就这样。

我想显示所有按钮在图片上的样子。对此有什么想法吗？

谢谢。

Answer 1

显然 nexus 4 的屏幕尺寸大于 samsung galaxy duos 3 和 0.7"。这就是为什么您的某些按钮超出屏幕边界的原因。所以我建议用 HorizontalScrollView 包裹它们，比如

 <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ...>
      Here are your buttons
</HorizontalScrollView>

或

使用 LinearLayout 并使用 weight 和 weight_sum 属性管理它们，如 here 所述。

Answer 2

有两种方法可以解决这个问题。

使用布局权重

示例如下

<LinearLayout
    android:orientation = "horizontal"
    android:weightSum = "9">
    <Button
        android:layout_weight="1">
    <Button
        android:layout_weight="2">
    ...
    ...
    <!--Create 9 button with layout_weight = 1 -->
</LinearLayout>

这基本上会创建一个水平 LinearLayout，其中包含 9 个大小相同的按钮。所以这些按钮将占用 LinearLayout 大小的 1/9。

另一种方法是制作水平滚动视图

Horizontal Scrollable View 可以是 HorizontalScrollView，也可以是水平的 RecyclerView，也可以是水平的 ListView，或者制作自己的 ViewGroup（水平）

在这种情况下，您可以为按钮设置自己的宽度，并且可以滚动浏览这些按钮。

我建议使用 HorizontalScrollView，因为我们无法确定屏幕宽度，如果设备的屏幕空间较小，则按钮可能会被压扁，不会留下很好的 UI.

Answer 3

    <LinearLayout
               Orienteation= "horizontal";>
        <Button
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
android:layout_weight = 1

            android:text="1"
            android:id="@+id/step19button1"
            android:textSize="13dp"
            android:layout_marginLeft="3dp"
            android:background="@drawable/button_border"
            android:layout_below="@+id/step19textView"
            android:layout_alignParentLeft="true"
            android:layout_weight = 1
            android:layout_alignParentStart="true"
            android:layout_marginTop="50dp" />

        <Button
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="2"
            android:id="@+id/step19button2"
            android:layout_weight = 1
            android:textSize="13dp"
            android:layout_marginLeft="3dp"
            android:layout_alignTop="@+id/step19button1"
            android:layout_toRightOf="@+id/step19button1"
            android:layout_toEndOf="@+id/step19button1"
            android:background="@drawable/button_border"/>

        <Button
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="3"
            android:id="@+id/step19button3"
            android:textSize="13dp"
            android:layout_weight = 1
            android:layout_marginLeft="3dp"
            android:layout_alignBottom="@+id/step19button2"
            android:layout_toRightOf="@+id/step19button2"
            android:layout_toEndOf="@+id/step19button2"
            android:background="@drawable/button_border"/>

..... .....

Answer 4

试试这个把你 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="@android:color/white">

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/content24"
    android:id="@+id/step19textView"
    android:textSize="18dp"
    android:textAlignment="center"
    android:paddingRight="10dp"
    android:paddingLeft="10dp"
    android:paddingBottom="10dp"
    android:paddingTop="10dp"
    android:layout_marginTop="32dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<LinearLayout
    android:id="@+id/llParent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/step19textView"
    android:layout_marginTop="50dp"
    android:orientation="horizontal">

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        android:id="@+id/step19button1"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_weight="1"
        android:background="@drawable/button_border"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:id="@+id/step19button2"
        android:layout_weight="1"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignTop="@+id/step19button1"
        android:layout_toRightOf="@+id/step19button1"
        android:layout_toEndOf="@+id/step19button1"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:layout_weight="1"
        android:id="@+id/step19button3"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button2"
        android:layout_toRightOf="@+id/step19button2"
        android:layout_toEndOf="@+id/step19button2"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4"
        android:id="@+id/step19button4"
        android:textSize="13dp"
        android:layout_weight="1"
        android:layout_marginLeft="3dp"
        android:textColor="@android:color/white"
        android:layout_alignBottom="@+id/step19button3"
        android:layout_toRightOf="@+id/step19button3"
        android:layout_toEndOf="@+id/step19button3"
        android:background="@drawable/button_border_5"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5"
        android:id="@+id/step19button5"
        android:textSize="13dp"
        android:layout_weight="1"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button4"
        android:layout_toRightOf="@+id/step19button4"
        android:layout_toEndOf="@+id/step19button4"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="6"
        android:id="@+id/step19button6"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_weight="1"
        android:layout_alignBottom="@+id/step19button5"
        android:layout_toRightOf="@+id/step19button5"
        android:layout_toEndOf="@+id/step19button5"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7"
        android:id="@+id/step19button7"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_weight="1"
        android:layout_alignBottom="@+id/step19button6"
        android:layout_toRightOf="@+id/step19button6"
        android:layout_toEndOf="@+id/step19button6"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8"
        android:layout_weight="1"
        android:id="@+id/step19button8"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button7"
        android:layout_toRightOf="@+id/step19button7"
        android:layout_toEndOf="@+id/step19button7"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9"
        android:layout_weight="1"
        android:id="@+id/step19button9"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button8"
        android:layout_toRightOf="@+id/step19button8"
        android:layout_toEndOf="@+id/step19button8"
        android:background="@drawable/button_border"/>
</LinearLayout>


<EditText
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:id="@+id/step19editText"
    android:paddingLeft="10dp"
    android:layout_below="@+id/llParent"
    android:layout_alignLeft="@+id/llParent"
    android:layout_alignStart="@+id/llParent"
    android:layout_marginTop="20dp" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:id="@+id/step19editText2"
    android:layout_alignTop="@+id/step19editText"
    android:layout_centerHorizontal="true" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:id="@+id/step19editText3"
    android:paddingRight="10dp"
    android:layout_alignTop="@+id/step19editText2"
    android:layout_alignRight="@+id/llParent"
    android:layout_alignEnd="@+id/llParent" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/content25"
    android:id="@+id/step19textView2"
    android:textSize="18dp"
    android:paddingLeft="10dp"
    android:layout_alignTop="@+id/step19textView4"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/content26"
    android:id="@+id/step19textView4"
    android:textSize="18dp"
    android:textAlignment="center"
    android:layout_alignTop="@+id/step19textView5"
    android:layout_centerHorizontal="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/content27"
    android:id="@+id/step19textView5"
    android:textSize="18dp"

    android:paddingRight="10dp"
    android:layout_below="@+id/step19editText3"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="    Next    "
    android:textSize="18dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:id="@+id/step19nextbutton"
    android:layout_marginTop="59dp"
    android:textColor="@android:color/white"
    android:background="@drawable/button_border_5"
    android:layout_below="@+id/step19textView4"
    android:layout_centerHorizontal="true" />

</RelativeLayout>

Android 中的一些按钮未显示在 RelativeLayout 上

Some buttons not showing up on RelativeLayout in Android

android

android-layout

android-studio

android-relativelayout