Question

我正在尝试从应用程序重新创建屏幕。我正在使用自定义视图，它将图像视图与3个文本视图结合在一起。然后，我将一堆这些自定义视图插入到滚动视图的线性布局中，但是我只能看到其中的两个，而其余的则不显示（参见图片）。

主要活动的XML：

<?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_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:paddingStart="16sp"
    android:scrollbars="none"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="12sp"
        android:orientation="horizontal">

        <com.example.knigoteka.BenefitView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="12dp"
            app:image="@drawable/jesus"
            app:textCaption="Apply and chat with our hosts"
            app:textAutor = "Vasko Vasilev"
            app:textPrice="420 ДЕН"/>

        <com.example.knigoteka.BenefitView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="12dp"
            app:image="@drawable/jesus"
            app:textAutor = "Vasko Vasilev"
            app:textCaption="Boze Boze"
            app:textPrice="420 ДЕН"/>

        <com.example.knigoteka.BenefitView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="12dp"
            app:image="@drawable/jesus"
            app:textCaption="Apply and chat with our hosts"
            app:textAutor = "Vasko Vasilev"
            app:textPrice="420 ДЕН"/>

        <com.example.knigoteka.BenefitView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="12dp"
            app:image="@drawable/jesus"
            app:textCaption="Apply and chat with our hosts"
            app:textAutor = "Vasko Vasilev"
            app:textPrice="420 ДЕН"/>

    </LinearLayout>
    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

two muppets

更新：

将android：scrollbars属性更改为Vertical似乎可以解决问题，但每行仅放置1张图片。

Answer 1

尝试这种布局

<?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_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:paddingStart="16sp"
    android:scrollbars="none"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">
<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="12sp"
        android:orientation="vertical">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="12sp"
        android:orientation="horizontal">

        <com.example.knigoteka.BenefitView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="12dp"
            app:image="@drawable/jesus"
            app:textCaption="Apply and chat with our hosts"
            app:textAutor = "Vasko Vasilev"
            app:textPrice="420 ДЕН"/>

        <com.example.knigoteka.BenefitView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="12dp"
            app:image="@drawable/jesus"
            app:textAutor = "Vasko Vasilev"
            app:textCaption="Boze Boze"
            app:textPrice="420 ДЕН"/>
</LinearLayout>

  <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="12sp"
        android:orientation="horizontal">

        <com.example.knigoteka.BenefitView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="12dp"
            app:image="@drawable/jesus"
            app:textCaption="Apply and chat with our hosts"
            app:textAutor = "Vasko Vasilev"
            app:textPrice="420 ДЕН"/>

        <com.example.knigoteka.BenefitView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="12dp"
            app:image="@drawable/jesus"
            app:textCaption="Apply and chat with our hosts"
            app:textAutor = "Vasko Vasilev"
            app:textPrice="420 ДЕН"/>
</LinearLayout>
    </LinearLayout>
    </ScrollView>

Answer 2

通过使用RecyclerView和自定义布局解决。自定义布局xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="370px"
android:layout_height="740px"
android:gravity="center"
android:padding="1dp"
android:layout_margin="30dp"
android:background="#000000"
android:id="@+id/parent_layout">


<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="190dp"
     android:layout_marginBottom="2dp"
    tools:src="@color/colorPrimary"
    android:background="#010101"/>



<TextView
    android:id="@+id/caption"
    android:textStyle="bold"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:text="Caption of the Book"
    android:textAlignment="viewStart"
    android:textColor="#666"
    android:textSize="12sp"
    android:singleLine="true"
    android:background="#FFFFFF"
    android:paddingLeft="5dp"
    android:layout_below="@+id/image"/>

<TextView
    android:id="@+id/autor"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:text="Caption of the Book"
    android:textAlignment="viewStart"
    android:textColor="#666"
    android:textSize="12sp"
    android:singleLine="true"
    android:background="#FFFFFF"
    android:paddingLeft="5dp"
    android:layout_below="@+id/caption"/>

<View
    android:id="@+id/line"
    android:layout_width="16dp"
    android:layout_height="1dp"
    android:layout_gravity="center"
    android:layout_below="@+id/autor"
    android:background="#000000" />

<TextView
    android:id="@+id/price"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:text="Price of the Book"
    android:textAlignment="viewEnd"
    android:textColor="#666"
    android:textSize="12sp"
    android:paddingBottom="1dp"
    android:singleLine="true"
    android:background="#FFFFFF"
    android:paddingRight="5dp"
    android:layout_below="@+id/line"/>

布局元素不会转到下一行

2 个答案: