如何使 TextView 在父 ImageView 上居中？答案

【问题标题】：How to center a TextView on the parent ImageView?如何使 TextView 在父 ImageView 上居中？
【发布时间】：2017-02-14 02:11:23
【问题描述】：

我尝试了几种方法，但每次都失败了。

我想要完成的是在 ImageView 上居中 TextView（水平和垂直），而是命令 android:layout_centerInParent="true" 导致垂直和水平居中在整个区域上，而不是在 ImageView 上。请帮助我将父级附加到 TextView 或其他解决此问题的方法。

这是我的 xml 代码：

 <ImageView
    android:id="@+id/imageView1"
    android:layout_width="170dp"
    android:layout_height="46dp"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"
    android:contentDescription="Your Height BG"
    android:src="@drawable/textareabg" />

     <TextView
    android:id="@+id/textView00"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"

    android:text="Your Height"
    android:textColor="#d88b6d"
    android:textSize="20sp" />

【问题讨论】：

id 使用RelativeLayout 作为父级并将其背景设置为ImageView 具有的内容，但如果您不喜欢这样，可以尝试其他方式
你的imageview是固定高宽的吗？

标签： java android android-layout

【解决方案1】：

使用ConstraintLayout 可以轻松实现。 Android 最近推出了ConstraintLayout。它允许我们使用“约束”来布局子视图，以定义布局中不同视图之间基于位置的关系。它类似于RelativeLayout，但比它强大得多，因为ConstraintLayout 在更大程度上减少了View Hierarchy。现在回到你的问题，这是为你工作的示例 xml 代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   xmlns:app="http://schemas.android.com/apk/res-auto">

   <ImageView
       android:id="@+id/image"
       android:layout_width="200dp"
       android:layout_height="200dp"
       android:src="@mipmap/ic_launcher"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintVertical_bias="0.1"/>

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Image"
       android:textSize="20sp"
       app:layout_constraintRight_toRightOf="@+id/image"
       app:layout_constraintLeft_toLeftOf="@+id/image"
       app:layout_constraintTop_toTopOf="@+id/image"
       app:layout_constraintBottom_toBottomOf="@+id/image"/>

</android.support.constraint.ConstraintLayout>

设备上的输出视图

您可以使用 app:layout_constraintHorizontal_bias 和 app:layout_constraintVertical_bias 将 TextView 定位在 ImageView 上的任何位置。默认情况下，这些值将设置为 0.5。因此，如果我们不指定任何值，它将默认居中对齐。

当您向视图的两侧（以及视图大小）添加约束时对于相同的维度是“固定”或“包装内容”），视图默认情况下在两个锚点之间居中。

注意： Bias 属性仅在您指定边界约束时才有效（例如，top 和 bottom 用于垂直偏差，left 和 right 用于水平偏差）

更多关于约束布局

ConstraintLayout

Sample Project

Blog on ConstraintLayout

【讨论】：

【解决方案2】：

试试这个方法，希望能帮助你解决问题。

<FrameLayout
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">
   <ImageView
      android:id="@+id/imageView1"
      android:layout_width="170dp"
      android:layout_height="46dp"
      android:layout_marginLeft="10dp"
      android:layout_marginTop="10dp"
      android:contentDescription="Your Height BG"
      android:src="@drawable/textareabg" />

   <TextView
      android:id="@+id/textView00"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:text="Your Height"
      android:textColor="#d88b6d"
      android:textSize="20sp" />
</FrameLayout>

【讨论】：

【解决方案3】：

也许这会对你的问题有所帮助

Android TextView text won't center

这里有人提到使用android:gravity="center"。

【讨论】：

似乎对我没有用。请记住，我是新手，可能是我做错了，我没有在这里说明，所以如果你能指导我，那就太好了。

【解决方案4】：

这就是我要做的事情

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

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="170dp"
    android:layout_height="46dp"
    android:layout_centerHorizontal="false"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"
    android:contentDescription="Your Height BG" />

 <TextView
     android:id="@+id/textView00"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignLeft="@+id/imageView1"
     android:layout_alignTop="@+id/imageView1"
     android:layout_centerHorizontal="true"
     android:layout_centerInParent="true"
     android:layout_centerVertical="true"
     android:layout_marginLeft="30dp"
     android:layout_marginTop="10dp"
     android:text="Your Height"
     android:textColor="#d88b6d"
     android:textSize="20sp" />

【讨论】：

【解决方案5】：

你需要做的是使用 FrameLayout。文档说：

FrameLayout 的设计目的是在屏幕上屏蔽一个区域以显示单个项目。通常，应该使用 FrameLayout 来保存单个子视图，因为很难以一种可缩放到不同屏幕尺寸的方式组织子视图，而不会使子视图相互重叠。但是，您可以使用 android:layout_gravity 属性将多个子项添加到 FrameLayout 并通过为每个子项分配重力来控制它们在 FrameLayout 中的位置。

子视图在堆栈中绘制，最近添加的子视图在顶部。 FrameLayout 的大小是其最大子视图的大小（加上填充），可见与否（如果FrameLayout 的父级许可）。仅当 setConsiderGoneChildrenWhenMeasuring() 设置为 true 时，才会使用 GONE 的视图来调整大小。

所以你需要类似下面的伪布局代码：

<FrameLayout>
   <ImageView gravity="center">
   <TextView gravity="center">
</FrameLayout>

【讨论】：

【解决方案6】：

在您的布局下再添加一个相对布局，如下所示：

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/textView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

检查所需的宽度和高度。例如。如果您想要图像的特定高度和宽度，请更改此相对布局的高度和宽度。

就是这样……

【讨论】：