我怎样才能在同一行和屏幕的两端同时有 2 个文本视图

Question

我目前正在开发一款在屏幕两端显示两个文本视图的应用程序。

这是预期的输出：

这在某些设备上确实有效，但在其他设备上它会创建一个新行并完全搞砸，或者只是像这样完全删除 22：

这是 xml 代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="start">

    <TextView
        android:textSize="13sp"
        android:textColor="@color/black"
        android:gravity="start"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="James Lingard" />

    <TextView
        android:textSize="13sp"
        android:textColor="@color/black"
        android:gravity="start"
        android:layout_marginStart="410dp"
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="22" />
</RelativeLayout>

左边的名字很好，但右边的号码总是乱七八糟。我认为它与 android:layout_marginStart="410dp" 有关，但我不确定我还能如何让 22 位于右侧并与名称在同一行。

Answer 1

是的，你是对的问题是：android:layout_marginStart="410dp"。
我可以假设在某些设备上，设备屏幕宽度小于 410dp。如我所见，您正在使用 RelativeLayout，只需在第二个 TextView.

中添加属性：android:layout_alignParentEnd="true"

当然，删除这一行：android:layout_marginStart="410dp"

Answer 2

试试这个，使用 RelativeLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
    android:textSize="13sp"
    android:textColor="@color/black"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="James Lingard" />

<TextView
    android:textSize="13sp"
    android:textColor="@color/black"
    android:gravity="start"
    android:layout_alignParentEnd="true" 
    android:layout_marginTop="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="22" />

或者我推荐（最适应）（P.S。对不起我的英语）

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
    android:textSize="13sp"
    android:textColor="@color/black"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    android:layout_weight="4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="James Lingard" />

<TextView
    android:textSize="13sp"
    android:textColor="@color/black"
    android:layout_alignParentEnd="true" 
    android:layout_marginTop="10dp"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="22" />

Answer 3

您可以使用 ConstraintLayout

<androidx.constraintlayout.widget.ConstraintLayout 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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:text="James Lingard"
        android:textColor="@color/black"
        android:textSize="13sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:text="22"
        android:textColor="@color/black"
        android:textSize="13sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

结果

我怎样才能在同一行和屏幕的两端同时有 2 个文本视图

How can I have 2 textviews on the same line and at opposite ends of the screen at the same time

android

android-layout

android-studio

android-relativelayout