如何在LinearLayout中的TextView下方显示ImageView

Question

我正在编写一个体育应用程序，我想将文本准确地放在图片下方，但无法对齐。如果某处有大文本，则图片不在中间。如何保证文字总是在图片正下方，或者图片总是在文字正下方？

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


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="@drawable/shadow_matches_background"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="190dp">

            <LinearLayout
                android:id="@+id/title_team_list"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:weightSum="2">

                <TextView
                    android:id="@+id/title_team_1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="35dp"
                    android:layout_weight="1"
                    android:fontFamily="@font/roboto_medium"
                    android:text="Chelsea"
                    android:textColor="@color/black"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/title_team_2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="25dp"
                    android:layout_weight="1"
                    android:fontFamily="@font/roboto_medium"
                    android:text="Manchester City"
                    android:textColor="@color/black"
                    android:textSize="20sp" />

            </LinearLayout>

            <RelativeLayout
                android:id="@+id/image_team_list"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/img_team_1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/title_team_1"
                    android:src="@drawable/image_3" />

                <ImageView
                    android:id="@+id/img_team_2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/image_5"
                    tools:ignore="DuplicateIds" />


            </RelativeLayout>


            <TextView
                android:id="@+id/date_team_list"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/image_team_list"
                android:layout_marginTop="5dp"
                android:fontFamily="@font/roboto"
                android:text="25 сентября 2021 года"
                android:textAlignment="center"
                android:textSize="15sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/date_team_list">

                <Button
                    android:id="@+id/btn_subscribe"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="#00000000"
                    android:text="@string/btn_subscribe"
                    android:textColor="@color/colorMatchesBtn" />

                <Button
                    android:id="@+id/btn_detail"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="#00000000"
                    android:text="@string/btn_detail"
                    android:textColor="@color/colorMatchesBtn" />


            </LinearLayout>

        </RelativeLayout>


        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#00000000">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="190dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="180dp"
                    android:layout_marginStart="20dp"
                    android:layout_marginEnd="20dp"
                    android:layout_marginBottom="20dp">

                    <LinearLayout
                        android:id="@+id/title_team_list"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="5dp"
                        tools:ignore="DuplicateIds">

                        <TextView
                            android:id="@+id/title_team_1"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="35dp"
                            android:layout_weight="1"
                            android:fontFamily="@font/roboto_medium"
                            android:text="Everton"
                            android:textColor="@color/black"
                            android:textSize="20sp"
                            tools:ignore="DuplicateIds" />

                        <TextView
                            android:id="@+id/title_team_2"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginRight="25dp"
                            android:layout_weight="1"
                            android:fontFamily="@font/roboto_medium"
                            android:text="Norvich City"
                            android:textColor="@color/black"
                            android:textSize="20sp"
                            tools:ignore="DuplicateIds" />

                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/image_team_list"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/title_team_list"
                        android:layout_marginTop="5dp"
                        tools:ignore="DuplicateIds">

                        <ImageView
                            android:id="@+id/img_team_1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:src="@drawable/image_3"
                            tools:ignore="DuplicateIds" />

                        <ImageView
                            android:id="@+id/img_team_2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:src="@drawable/image_5"
                            tools:ignore="DuplicateIds" />

                    </LinearLayout>

                    <TextView
                        android:id="@+id/date_team_list"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/image_team_list"
                        android:layout_marginTop="5dp"
                        android:fontFamily="@font/roboto"
                        android:text="25 сентября 2021 года"
                        android:textAlignment="center"
                        android:textSize="15sp"
                        tools:ignore="DuplicateIds" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/date_team_list">

                        <Button
                            android:id="@+id/btn_subscribe"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:background="#00000000"
                            android:text="@string/btn_subscribe"
                            android:textColor="@color/colorMatchesBtn"
                            tools:ignore="DuplicateIds" />

                        <Button
                            android:id="@+id/btn_detail"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:background="#00000000"
                            android:text="@string/btn_detail"
                            android:textColor="@color/colorMatchesBtn"
                            tools:ignore="DuplicateIds" />


                    </LinearLayout>

                </RelativeLayout>


            </RelativeLayout>


        </androidx.cardview.widget.CardView>

Answer 1

您应该遵循约束布局，对于您想要的输出，我附上了一些代码。我希望，它会有所帮助。

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">

<TextView
    android:id="@+id/tvTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="@id/ivPic"
    app:layout_constraintRight_toRightOf="@id/ivPic"
    app:layout_constraintBottom_toTopOf="@id/ivPic"
    android:text="Your desired text"
    android:textColor="@color/black"
    android:textSize="15sp"
    android:singleLine="true"
    android:marqueeRepeatLimit="marquee_forever"
    />
<ImageView
    android:id="@+id/ivPic"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/tvTitle"
    android:src="@drawable/yourImage"
    android:scaleType="centerCrop"
    android:padding="2dp"
    />

<TextView
    android:id="@+id/tvClubName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="@id/ivPic"
    app:layout_constraintRight_toRightOf="@id/ivPic"
    app:layout_constraintTop_toBottomOf="@id/ivPic"
    android:text="Liverpool"
    android:textColor="@color/black"
    android:textSize="15sp"
    android:singleLine="true"
    android:padding="3dp"
    android:gravity="center_vertical|center"
    android:marqueeRepeatLimit="marquee_forever"
    />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

看看ConstrainsLayout，它将帮助您轻松构建更复杂的布局。此外，您的团队列表是完全硬编码的，您应该明确地切换到RecyclerView。