Android - 将TextView与另一个视图居中对齐

Question

我有一些图像按钮，每个按钮都有一个对应的TextView。我想将这些TextView居中对齐到它们对应的ImageView上，就像在应用抽屉中看到的那样...

 !-----!
 !icon !
 !_____!
app  name

这是我的代码，我正在使用RelativeLayout布局。

<ImageButton
    android:id="@+id/blog_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/logo_img"
    android:layout_marginLeft="50dp"
    android:layout_marginTop="51dp"
    android:background="@null"
    android:contentDescription="@string/blog_desc"
    android:src="@drawable/blog" />

<TextView
    android:id="@+id/blog_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/blog_button"
    android:layout_below="@+id/blog_button"
    android:layout_marginTop="8dp"
    android:text="@string/blog_desc" />

- Hairo

---

这可以使用约束布局完成：您可以参考此链接。 - Apurva Thorat

Answer 1

将其包装在 LinearLayout 中并居中子项，如下所示：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/logo_img"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <ImageButton
        android:id="@+id/blog_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:contentDescription="@string/blog_desc"
        android:src="@drawable/blog" />

    <TextView
        android:id="@+id/blog_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/blog_desc" />
</LinearLayout>

- Jason Robinson

---

谢谢！我怎么没想到这个？一个子布局...我还在学习，但现在感觉很愚蠢... :/ - Hairo

作为参考，以后不建议使用 FrameLayout 来容纳多个子元素。在这种情况下，最好使用 LinearLayout 作为替代方案。 - Cat

我本来也没有打算使用FrameLayout，不过还是谢谢你的澄清。 - Hairo

@Eric 为什么？FrameLayout是实现Hairo想要的效果的好方法。LinearLayout不行，因为你不能重叠子视图。另一个可选的ViewGroup是RelativeLayout。 - Jason Robinson

我是否误解了问题？您是希望文本居中于图像上，还是只是在图像水平居中？ - Jason Robinson

@Hairo 抱歉，重新阅读您的问题后我误解了您想要实现的内容。Eric的建议是最好的解决方案，这种情况下应该使用“LinearLayout”。 - Jason Robinson

Answer 2

旧帖子，但如果这可以帮助，我认为不需要添加额外的容器。

<ImageButton
    android:id="@+id/blog_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/logo_img"
    android:layout_marginLeft="50dp"
    android:layout_marginTop="51dp"
    android:background="@null"
    android:contentDescription="@string/blog_desc"
    android:src="@drawable/blog" />

<TextView
    android:id="@+id/blog_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/blog_button"
    android:layout_alignRight="@+id/blog_button"
    android:layout_below="@+id/blog_button"
    android:gravity="center_horizontal"
    android:layout_marginTop="8dp"
    android:layout_marginLeft="-20dp"
    android:layout_marginRight="-20dp"
    android:text="@string/blog_desc" />

对我来说有效。

- gwakamol

Answer 3

如果您的视图在RelativeLayout中，请按照以下步骤进行操作：

1- 将想要与目标视图居中对齐的视图包装在FrameLayout中。

2- 将所有布局属性移动到FrameLayout中。

3- 将layout_align_top和layout_align_bottom（或水平方向上的start和end）设置为目标视图。

4- 将layout_gravity设置为FrameLayout的子元素的center_vertical（或horizontal）。

结果：

<RelativeLayout
        android:id="@+id/yourView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0">

    <RatingBar
            android:id="@+id/masseur_rating_bar"
            android:layout_width="wrap_content"
            android:layout_height="16dp"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:isIndicator="true"
            android:progressDrawable="@drawable/ic_selector_rating_bar"
            android:rating="@{masseurItem.rate}"
            android:scaleX="0.8"
            android:scaleY="0.8"
            tools:rating="4.5" />

    <TextView
            android:id="@+id/rate_text_view"
            style="@style/BodyTextViewStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@id/masseur_rating_bar"
            android:text="@{String.valueOf(masseurItem.rate)}"
            android:textSize="12sp"
            tools:text="4.5" />
</RelativeLayout>

- Amir Hossein Ghasemi

Answer 4

如果TextView可以透明，那么可以用一个单独的视图来实现。

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Test string"
    android:drawableTop="@android:drawable/btn_star"
    android:background="@android:color/transparent"
    android:textSize="10sp"
     />

- Pratap Patil