我希望图像和文本一起水平,图片在文本上方,在 Android Studio 的 RecycleView 和 CardView

Posted

技术标签:

【中文标题】我希望图像和文本一起水平,图片在文本上方,在 Android Studio 的 RecycleView 和 CardView【英文标题】:I want the image and text together horizontal, the picture is above the text, in RecycleView and CardView in Android Studio 【发布时间】:2021-02-26 17:27:24 【问题描述】:

我想要这样的视图,其中图像和文本并排,但它在图像下方显示文本:

[]

但它在图片在文本上方的位置显示为这样,我检查了我的代码,但我能够得到错误在哪里:

[]

我的hindu_design代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

    <androidx.cardview.widget.CardView
        android:layout_
        android:layout_
        android:layout_margin="10dp"
        android:elevation="10dp"
        app:cardElevation="10dp"
        app:cardMaxElevation="20dp">

        <LinearLayout
            android:layout_
            android:layout_
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/image"
                android:layout_
                android:layout_
                android:contentDescription="@string/image"
                android:scaleType="centerInside"
                android:scaleX="0.5"
                android:scaleY="0.9"
                tools:srcCompat="@drawable/fruits" />

            <TextView
                android:id="@+id/text"
                android:layout_
                android:layout_
                android:layout_marginBottom="10dp"
                android:background="#00F85C2C"
                android:gravity="center"
                android:hapticFeedbackEnabled="false"
                android:text="@string/todo"
                android:textSize="20sp" />
        </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

我的 activity_hindu 代码:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="@drawable/background"
    tools:context=".fragments.ShopFragment">

    <LinearLayout
        android:id="@+id/parent"
        android:layout_
        android:layout_
        android:orientation="vertical">

        <TextView
            android:id="@+id/shop_heading"
            android:layout_
            android:layout_
            android:background="@drawable/headingbg"
            android:fontFamily="@font/aclonica"
            android:gravity="center"
            android:text="@string/hindu"
            android:textColor="@color/black"
            android:textSize="24sp" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/list"
            android:layout_
            android:layout_
            android:layout_weight="2"
            android:animateLayoutChanges="false"
            tools:listitem="@layout/hindu_design" />
    </LinearLayout>
</FrameLayout>

【问题讨论】:

您可以尝试不使用卡片视图吗?这是 LinearLayout 的一种奇怪行为。 你可以通过NestedScrollView来实现 【参考方案1】:

在做任何事情之前,请使用 ConstraintLayout 而不是 LinearLayoutRelativeLayout

对于这个示例项目,您可以像这样尝试

它用于 item.xml

<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_
android:layout_margin="4dp">


<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_
    android:layout_>

    <ImageView
        android:id="@+id/imageView"
        android:layout_
        android:layout_
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <TextView
        android:id="@+id/textView"
        android:layout_
        android:layout_
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout> 
</androidx.cardview.widget.CardView>

它适用于 ma​​in.xml

<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_
tools:context=".MainActivity">

<TextView
    android:id="@+id/textHeader"
    android:layout_
    android:layout_
    android:layout_marginTop="8dp"
    android:text="Header"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0" />

<androidx.recyclerview.widget.RecyclerView
    android:layout_
    android:layout_
    android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textHeader" /> 
</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】:

【参考方案2】:

在hindu_design布局中添加这个

    <androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    card_view:cardUseCompatPadding="true"
    card_view:cardCornerRadius="5dp"
    card_view:cardElevation="5dp"
    card_view:cardBackgroundColor="#ffff">

    <RelativeLayout
        android:layout_
        android:layout_
        android:padding="10dp"
        android:orientation="horizontal">
        <ImageView
            android:layout_marginTop="-12dp"
            android:paddingRight="1dp"
            android:id="@+id/playerImage"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_
            android:layout_

            android:src="@drawable/search"/>


        <LinearLayout
            android:layout_
            android:layout_
            android:orientation="vertical"
            android:gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginStart="15dp">

            <RelativeLayout
                android:layout_
                android:layout_>




            <TextView

                android:lineSpacingExtra="5dp"
                android:id="@+id/nameTxt"
                android:text="Sylhet Students Association"
                android:textStyle="bold"
                android:textSize="18sp"
                android:paddingLeft="77dp"
                android:paddingTop="22dp"
                android:textColor="@android:color/black"
                android:layout_
                android:layout_
                android:typeface="serif"/>

            </RelativeLayout>   
        </LinearLayout>
    </RelativeLayout>
</androidx.cardview.widget.CardView>

【讨论】:

以上是关于我希望图像和文本一起水平,图片在文本上方,在 Android Studio 的 RecycleView 和 CardView的主要内容,如果未能解决你的问题,请参考以下文章

在SSRS中将Group标头放在组上方而不是旁边

将鼠标悬停在图像上时需要 CSS 效果,以获取另一个图像和/或文本以显示在其上方

如何在cardview中对齐文本和图像?

PHP GD - 水平居中对齐文本并减小字体大小以将其保留在图像内

仅在文本链接悬停 CSS 上显示图像

UIScrollView 忽略约束