将视图与背景图像上的某个项目对齐

Question

假设我有我想要用于背景的跟随图像。

让我说我想要一个文本坐在RED圈的中间。我想在xml中这样做（假设我想使用相对布局）。假设我想这样做：

    <RelativeLayout android:width = "match_parent" android:height = "match_parent"
     android:background = "@drawable/background" >

    <Textview android:width = "wrap_content" android:height = "wrap_content" android:alignParentBottom = "true" android:alignParentRight = "true"
      android:margingBottom = "50dp" android:margingRight = "50dp"
      android:text="I am red" />

    </RelativeLayout >

如果我使用Nexus 4，则文本完全位于红色圆圈的中心。

如果我在更大的屏幕上运行它，那么文本会被关闭吗？如果是这样，那么如何解决这样的问题（在背景图像上对齐视图和某些图像），而不必为每个屏幕做不同的布局？

Answer 1

您建议的内容不会使文字在圈子中保持对齐。由于RelativeLayout为wrap_content，因此布局的大小因设备而异。随着设备宽度的增加（以dp为单位），例如，红色圆圈的中心将移位，而不是始终位于距右边缘50dp的固定位置。例如，假设设备的宽度为200dp，如果红色圆圈是右侧1/4或50dp，则为中心。这是有效的，但现在让我们设想一个400dp宽两倍的设备。圆心仍然是右侧1/4或100dp。你的TextView有一个50dp的固定右边距，因此，相对于圆的中心，文本将在较大的设备上向右移动，在较窄的设备上向左移动。

根据背景的性质，还有其他方法可以做你想做的事。最直接的方法是使每个圆圈成为View的背景。 View TextView可以是android:gravity="center" ，您可以使用gravity按如下方式对文本进行居中：

ViewGroup

圆圈也可以是LinearLayout的背景，例如RelativeLayout或ConstraintLayout，但您对文字居中的方式可能会有所不同。

如果你的背景是一个方形（看起来像是）四个圆圈的单个图像，并且假设每个圆圈的中心位于预期的（25％，25％）左边和顶部，左上角的圆圈依此类推，直到我们到达红色圆圈（75％，75％）然后我建议您考虑使用<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.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"> <android.support.constraint.Guideline android:id="@+id/vgdln2" android:layout_width="0dp" android:layout_height="match_parent" android:orientation="vertical" app:layout_constraintGuide_percent="0.75" /> <android.support.constraint.Guideline android:id="@+id/hgdln2" android:layout_width="0dp" android:layout_height="match_parent" android:orientation="horizontal" app:layout_constraintGuide_percent="0.75" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Red circle" app:layout_constraintBottom_toBottomOf="@id/hgdln2" app:layout_constraintLeft_toLeftOf="@id/vgdln2" app:layout_constraintRight_toRightOf="@id/vgdln2" app:layout_constraintTop_toTopOf="@id/hgdln2" /> </android.support.constraint.ConstraintLayout> （文档here）。 XML将类似于以下内容。在这里，我将文本放在红色圆圈所在的中心，并根据屏幕大小进行调整。

a = intinput[0];

Answer 2

使用4 TextView并将圈子设置为适合你的背景？

Answer 3

现在可以使用androidx.constraintlayout.widget.Guideline来实现。 您可以使用1条水平和1条垂直指导线，并分别从屏幕顶部和左侧给出百分比。

   <androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline_top"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.75"
    app:layout_constraintStart_toStartOf="parent" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintGuide_percent="0.65" />

根据您的情况，我给出的残酷估计只是一个粗略的猜测。您可以根据自己的情况进行调整。

在“文本”视图中，您可以执行以下操作

  <TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
     app:layout_constraintBottom_toBottomOf="guidline_top"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@id/guideline_left"
    />