文本视图在 Android 中的位置不正确

编程问答 2022-06-02

问题描述

我想直接在 Android 中的搜索栏下定位文本视图。不幸的是，虽然在布局编辑器中布局看起来正确，但模拟器中显示的布局看起来并不正确。您可以在屏幕截图中看到这一点

enter image description here

有两个问题：

  1. seekbar 左侧的 textview 在布局编辑器中非常高，它与seekbar 处于同一级别
  2. seekbar 每个点的标签都移到了右侧。

这里有 XML 布局代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">


    <TextView
        android:id="@+id/textView50"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="41dp"
        android:layout_marginLeft="41dp"
        android:text="50"
        app:layout_constraintBottom_toTopOf="@+id/o_button"
        app:layout_constraintStart_toEndOf="@+id/textView40"
        app:layout_constraintTop_toBottomOf="@+id/seekBar"
        app:layout_constraintVertical_bias="0.1" />

    <TextView
        android:id="@+id/textView60"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="41dp"
        android:layout_marginLeft="41dp"
        android:text="60"
        app:layout_constraintBottom_toTopOf="@+id/o_button"
        app:layout_constraintStart_toEndOf="@+id/textView50"
        app:layout_constraintTop_toBottomOf="@+id/seekBar"
        app:layout_constraintVertical_bias="0.1" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="245dp"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        tools:ignore="ContentDescription" />


    <TextView
        android:id="@+id/textViewS"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="RButton"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.016"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.395" />

    <ImageButton
        android:id="@+id/commentButton"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@null"
        android:contentDescription="comment_Button"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.83"
        app:srcCompat="@mipmap/comment" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/comment"
        android:textSize="18dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.025"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.76" />



    <Button
        android:id="@+id/o_button"
        android:layout_width="163dp"
        android:layout_height="72dp"
        android:background="@drawable/custom_button"
        android:text="Button"
        android:textAllCaps="false"
        android:textColor="#121212"
        android:textSize="25sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.87" />






    <RadioGroup
        android:id="@+id/radioGroup_Size"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_bias="0.4"
        app:layout_constraintHorizontal_bias="0.871"

        app:layout_constraintTop_toTopOf="parent">




        <RadioButton
            android:id="@+id/r_Button_Small"
            android:layout_width="95dp"
            android:layout_height="35dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:text="@string/small"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.322"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="50dp"
            app:layout_constraintVertical_bias="0.584" />

        <RadioButton
            android:id="@+id/r_Button_Medium"
            android:layout_width="95dp"
            android:layout_height="35dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:checked="true"
            android:text="@string/Medium"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.962"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginLeft="10dp"
            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintVertical_bias="0.583" />

        <RadioButton
            android:id="@+id/r_Button_Large"
            android:layout_width="95dp"
            android:layout_height="35dp"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:text="@string/Large"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.962"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.584" />

    </RadioGroup>


    <Spinner
        android:id="@+id/spinner1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="130dp"
        android:layout_marginLeft="120dp"
        android:layout_marginEnd="70dp"
        android:layout_marginRight="80dp"
        android:popupBackground="#5fe0f5"
        android:textSize="25sp"
        app:layout_constraintBottom_toTopOf="@+id/spinner2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/radioGroup_Size"
        app:layout_constraintVertical_bias="0.4" />

    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:popupBackground="#5fe0f5"
        android:textSize="120sp"
        app:layout_constraintBottom_toTopOf="@+id/o_button"
        app:layout_constraintEnd_toEndOf="@id/spinner1"
        app:layout_constraintHorizontal_bias="0.59"
        app:layout_constraintStart_toStartOf="@id/spinner1"
        app:layout_constraintTop_toBottomOf="@+id/radioGroup_Size"
        app:layout_constraintVertical_bias="0.44" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="32dp"
        android:text="Spinner 1"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@+id/spinner1"
        app:layout_constraintHorizontal_bias="0.102"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textViewS" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginTop="36dp"
        android:layout_marginEnd="28dp"
        android:layout_marginRight="28dp"
        android:text="Spinner 2"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@+id/spinner2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView8" />

    <SeekBar
        android:id="@+id/seekBar"
        style="@style/Widget.AppCompat.SeekBar.discrete"
        android:layout_width="260dp"
        android:layout_height="26dp"
        android:layout_marginBottom="60dp"
        android:max="4"
        android:maxHeight="4dip"
        android:minHeight="4dip"
        android:progress="2"

        app:layout_constraintBottom_toTopOf="@+id/o_button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.89"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/spinner2"
        app:layout_constraintVertical_bias="1" />

    <TextView
        android:id="@+id/textView10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Seekbar"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintEnd_toStartOf="@+id/seekBar"
        app:layout_constraintHorizontal_bias="0.218"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView9"
        app:layout_constraintVertical_bias="0.45" />

    <TextView
        android:id="@+id/textView30"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="57dp"
        android:layout_marginLeft="57dp"
        android:text="30"
        app:layout_constraintBottom_toTopOf="@+id/o_button"
        app:layout_constraintEnd_toStartOf="@+id/textView12"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/seekBar"
        app:layout_constraintVertical_bias="0.1" />

    <TextView
        android:id="@+id/textView40"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="41dp"
        android:layout_marginLeft="41dp"
        android:text="40"
        app:layout_constraintBottom_toTopOf="@+id/o_button"
        app:layout_constraintStart_toEndOf="@+id/textView30"
        app:layout_constraintTop_toBottomOf="@+id/seekBar"
        app:layout_constraintVertical_bias="0.1" />

    <TextView
        android:id="@+id/textView70"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="70"
        app:layout_constraintBottom_toTopOf="@+id/o_button"
        android:layout_marginStart="42dp"
        android:layout_marginLeft="42dp"
        app:layout_constraintStart_toEndOf="@+id/textView60"
        app:layout_constraintTop_toBottomOf="@+id/seekBar"
        app:layout_constraintVertical_bias="0.1" />


</androidx.constraintlayout.widget.ConstraintLayout>

你能告诉我为什么会出现这个问题吗？对我来说，这很奇怪，因为在布局编辑器中一切都被正确显示，我不明白为什么通常布局编辑器和 Android 模拟器上的布局之间有时会存在差异。我会感谢您的每一条评论，也非常感谢您的帮助。

解决方法

嘿，我看到这里有一些约束问题，您设置了什么以及您要实现什么：- 在此：-

<SeekBar
    android:id="@+id/seekBar"
    style="@style/Widget.AppCompat.SeekBar.Discrete"
    android:layout_width="260dp"
    android:layout_height="26dp"
    android:layout_marginBottom="60dp"
    android:max="4"
    android:maxHeight="4dip"
    android:minHeight="4dip"
    android:progress="2"

    app:layout_constraintBottom_toTopOf="@+id/o_button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.89"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/spinner2"
    app:layout_constraintVertical_bias="1" />

<TextView
    android:id="@+id/textView10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Seekbar"
    android:textColor="#000000"
    android:textSize="20sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/textView2"
    app:layout_constraintEnd_toStartOf="@+id/seekBar"
    app:layout_constraintHorizontal_bias="0.218"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView9"
    app:layout_constraintVertical_bias="0.45" />

您可以看到您已将 Seekbar textview 顶部和底部约束设置为 app:layout_constraintBottom_toTopOf="@+id/textView2" 并将 app:layout_constraintTop_toBottomOf="@+id/textView9" 更改为 app:layout_constraintTop_toTopOf="@id/seekBar" 和 app:layout_constraintBottom_toBottomOf="@id/seekBar" 这将使您的Seekbar textview 位于您实际 seekbar 的中心。

现在来到 values 部分，我看到您没有以正确的对齐方式设置视图，因此很难从您的 xml 代码中找到设置了哪个文本视图。尽管我建议您采用与 constraint 相同的 linear 和低于 width 的 seekbar 或 seekbar 布局，然后使用constraintWidthPercent（如果使用约束布局）根据您在 seekbar 中的最大值。