在 ImageView 中放置许多 TextView

Posted 2023-04-18

【中文标题】在 ImageView 中放置许多 TextView

【英文标题】：place many TextViews inside an ImageView

【发布时间】：2019-10-01 21:40:51

【问题描述】：

我将 CardView 用于 recycleView android CardView 包含（ImageView 和许多 TextView） 我想在 ImageView android xml 上放置许多 textView

1 - 图像视图的中心（没问题）

2 - 右下

3 - 左下

4 - 右上角

5 - 左上角

这里是回收视图的xml项 TextView 在 ImageView 的中心，但我不能放在其他 4 个位置

像这样： this image for place TextView in center of imageView and what I need to do

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_
android:layout_
android:layout_marginBottom="16dp"
card_view:cardCornerRadius="8dp"
card_view:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_
        android:layout_>

        <ImageView
            android:id="@+id/stadium_photo"
            android:layout_
            android:layout_
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_marginStart="0dp"
            android:layout_marginTop="0dp"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_stadium" />

        <TextView
            android:id="@+id/stadium_name"
            android:layout_
            android:layout_
            android:layout_centerInParent="true"
            android:text="Mohammad"
            android:textColor="#ffffcd"
            android:textSize="40sp"
            android:textStyle="bold" />

    </RelativeLayout>

</androidx.cardview.widget.CardView>

【参考方案1】：

使用ConstraintLayout，您可以立即实现这一目标。

您需要设置如下所示的布局：

<?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_
  android:layout_
  android:orientation="vertical">

<ImageView
    android:id="@+id/imageView"
    android:layout_
    android:layout_
    android:layout_marginTop="8dp"
    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"
    android:scaleType="fitXY"
    tools:srcCompat="@tools:sample/avatars[10]" />

<TextView
    android:id="@+id/textView3"
    android:layout_
    android:layout_
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginBottom="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/textView2"
    android:layout_
    android:layout_
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:text="TextView"
    app:layout_constraintStart_toStartOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="@+id/imageView" />

<TextView
    android:id="@+id/textView"
    android:layout_
    android:layout_
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    app:layout_constraintEnd_toEndOf="@+id/imageView"
    app:layout_constraintStart_toStartOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="@+id/imageView" />

<TextView
    android:id="@+id/textView5"
    android:layout_
    android:layout_
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    app:layout_constraintEnd_toEndOf="@+id/imageView" />

<TextView
    android:id="@+id/textView4"
    android:layout_
    android:layout_
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:text="TextView"
    app:layout_constraintEnd_toEndOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="@+id/imageView" />

</androidx.constraintlayout.widget.ConstraintLayout>

看起来像这样：

【讨论】：

为我工作，谢谢。

【参考方案2】：

您是否尝试过在 TextViews 中使用 alignParentEnd/Start + alignParentTop/Bottom 的组合？似乎将您的 TextView 更改为

<TextView
            android:id="@+id/stadium_name"
            android:layout_
            android:layout_
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:text="Mohammad"
            android:textColor="#ffffcd"
            android:textSize="40sp"
            android:textStyle="bold" />

会做到这一点并将TextView对齐到左上角（或右上角，取决于开始的位置:)）

【参考方案3】：

CardView 是 FrameLayout (Documentation of CardView) 所以你甚至不需要包装 RelativeLayout 来实现你想要的。试试这个完整的例子：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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_ android:layout_>

    <ImageView
        android:id="@+id/imageView"
        android:layout_
        android:layout_
        android:scaleType="centerCrop"
        tools:srcCompat="@tools:sample/avatars[0]" />

    <TextView
        android:id="@+id/textView"
        android:layout_
        android:layout_
        android:layout_gravity="start|top"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_
        android:layout_
        android:layout_gravity="top|end"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_
        android:layout_
        android:layout_gravity="bottom|start"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView4"
        android:layout_
        android:layout_
        android:layout_gravity="bottom|end"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView5"
        android:layout_
        android:layout_
        android:layout_gravity="center"
        android:text="TextView" />

【参考方案4】：

您可以在 CardView 中使用 ConstraintLayout。 添加图像作为第一个元素并设置约束： layout_constraintStart_toStartOf="父" （Top、Bottom 和 End 相同）

然后定义文本视图的位置

Start_toStartOf="parent", Top_toTopOf="parent" End_toEndOf="parent, Top_toTopOf="parent" Start_toStartOf="parent", Bottom_toBottomOf="parent" End_toEndOf="parent, Bottom_toBottomOf="parent"

【参考方案5】：

您只需为相对布局和图像视图设置一个固定高度（如 100dp） 然后只需使用 align_parent_bottom 和 ...