如何实现文字位于图片下半部分的布局？CoordinatorLayout使用遇阻求解

嘿，我来帮你搞定这个布局问题！你现在用CoordinatorLayout没达到预期效果，核心原因是layout_anchorGravity="center|bottom"这个属性会让TextView的底部和ImageView的底部完全对齐，所以文字就贴在图片最底端了，而不是你想要的“下半部分”区域。

下面给你几种正确的实现方式，包括你想了解的CoordinatorLayout用法，还有更推荐的官方方案：

方式一：用ConstraintLayout实现（首推，灵活适配） #

现在Android官方最推荐的布局方式就是ConstraintLayout，它能轻松实现这种相对定位，不需要硬编码尺寸，完全适配动态变化的视图大小：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/ticketMainImage"
        android:layout_width="70dp"
        android:layout_height="110dp"
        android:src="@drawable/money_icon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        style="@style/TextViewPriceBorder"
        android:id="@+id/ticketPriceText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="200"
        <!-- 让TextView水平居中于ImageView -->
        app:layout_constraintStart_toStartOf="@id/ticketMainImage"
        app:layout_constraintEnd_toEndOf="@id/ticketMainImage"
        <!-- 绑定TextView的上下边界到ImageView的上下边界 -->
        app:layout_constraintTop_toTopOf="@id/ticketMainImage"
        app:layout_constraintBottom_toBottomOf="@id/ticketMainImage"
        <!-- 垂直偏移量设为0.75，让TextView落在图片下半部分（你可以调整这个值，0.5是垂直居中，0.75更偏下） -->
        app:layout_constraintVertical_bias="0.75" />
</androidx.constraintlayout.widget.ConstraintLayout>

方式二：用CoordinatorLayout实现（适配动态尺寸） #

如果你坚持要用CoordinatorLayout，可以通过嵌套FrameLayout来简化布局，或者用代码动态计算位置。这里给你嵌套FrameLayout的方案，不需要额外写代码：

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/anchor"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <FrameLayout
        android:layout_width="70dp"
        android:layout_height="110dp">

        <ImageView
            android:id="@+id/ticketMainImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/money_icon" />

        <TextView
            style="@style/TextViewPriceBorder"
            android:id="@+id/ticketPriceText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="200"
            <!-- 水平居中，垂直方向从图片中点开始往下 -->
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="55dp" /> <!-- 110dp的一半，让TextView从图片中点位置开始显示 -->
    </FrameLayout>

</android.support.design.widget.CoordinatorLayout>

如果ImageView的高度是动态的（比如从网络加载图片），硬编码marginTop就不合适了，这时候可以用代码动态计算：

// 在Activity/Fragment的onViewCreated或onStart中添加
ticketMainImage.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        // 移除监听避免重复触发
        ticketMainImage.viewTreeObserver.removeOnGlobalLayoutListener(this)
        val imageHalfHeight = ticketMainImage.height / 2
        val params = ticketPriceText.layoutParams as CoordinatorLayout.LayoutParams
        params.topMargin = imageHalfHeight
        ticketPriceText.layoutParams = params
    }
})

小提示：CoordinatorLayout的定位场景 #

其实CoordinatorLayout的核心优势是处理视图联动效果（比如滚动时Toolbar折叠、FloatingActionButton自动隐藏），对于这种简单的相对定位需求，ConstraintLayout或者你提到的RelativeLayout会更简洁高效，代码可读性也更强。

内容的提问来源于stack exchange，提问作者Toper