Question

我有一个食谱应用程序的列表视图设计。每个项目包括图像，标题，描述和卡路里数量。我的问题是它没有填满整个屏幕，而是在右侧给出一个滚动条。

如何让它填满屏幕？另外，有没有更好的方法来显示列表项而不使用表？

list.xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fadingEdgeLength="0dp"
        android:fillViewport="true"
        android:overScrollMode="never"
        android:scrollbars="none">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ListView
                android:id="@+id/listViewRecipes"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:dividerHeight="1dp"
                android:padding="10dp"></ListView>

        </RelativeLayout>

    </ScrollView>

</FrameLayout>

list_item.xml：

<?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"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:padding="8dp"
    android:fadingEdgeLength="0dp"
    android:fillViewport="true"
    android:overScrollMode="never"
    android:scrollbars="none">
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="1">

        <TableRow
            android:id="@+id/tableRow1">

            <!-- Image -->
            <ImageView
                android:id="@+id/listViewRecipeImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fillViewport="true"
                android:overScrollMode="never"
                app:srcCompat="@drawable/img_pixel" />
            <!-- //Image -->

            <!-- Title, Introduction -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_marginLeft="6dp"
                android:fadingEdgeLength="0dp"
                android:fillViewport="true"
                android:overScrollMode="never"
                android:scrollbars="none">

                <TextView
                    android:id="@+id/listViewRecipeTitle"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:text="Title"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="@color/colorBlack"/>
                <TextView
                    android:id="@+id/listViewRecipeIntroduction"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="@color/colorBlack"
                    android:text="Introduction"/>
            </LinearLayout>
            <!-- //Title, Introduction -->

            <!-- Numbers -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <TableLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_marginTop="6dp">
                    <TableRow>

                        <TextView
                            android:id="@+id/textViewServingCalories"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textColor="@color/colorDarkGray"
                            android:text="xx" />
                        <TextView
                            android:id="@+id/textViewServingCaloriesKcal"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textColor="@color/colorDarkGray"
                            android:layout_marginLeft="6dp"
                            android:text="@string/kcal_lowercase" />
                    </TableRow>
                </TableLayout>
                <TextView
                    android:id="@+id/textViewServingCaloriesKcalPerServing"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="@color/colorDarkGray"
                    android:text="@string/per_serving_lowercase" />
            </LinearLayout>
            <!-- //Numbers -->
        </TableRow>
    </TableLayout>
</LinearLayout>

Answer 1

这是您代码的修改版本。您需要删除外部scrollView，因为ListView是可滚动的

<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_width="match_parent"
android:layout_height="match_parent">


<ListView
    android:id="@+id/listViewRecipes"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:dividerHeight="1dp"
    android:padding="10dp">

</ListView>

</FrameLayout>

我还删除了表格布局并将其替换为LinearLayout

<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp">

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_weight="3">

    <ImageView
        android:id="@+id/listViewRecipeImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        android:overScrollMode="never"
        app:srcCompat="@drawable/add" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/listViewRecipeTitle"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Title"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/colorBlack"/>

        <TextView
            android:id="@+id/listViewRecipeIntroduction"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@color/colorBlack"
            android:text="Introduction"/>

    </LinearLayout>

</LinearLayout>


<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingTop="8dp"
    android:layout_weight="1">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textViewServingCalories"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@color/colorPrimary"
            android:text="xx" />

        <TextView
            android:id="@+id/textViewServingCaloriesKcal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@color/colorPrimary"
            android:layout_marginLeft="6dp"
            android:text="Carolies" />

    </LinearLayout>

    <TextView
        android:id="@+id/textViewServingCaloriesKcalPerServing"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@color/colorPrimary"
        android:text="Per Server" />

</LinearLayout>

Answer 2

Listview包含内部滚动视图。只需删除滚动视图即可。

要么使用RelativeLayout，要么只使用框架上的Listview。与父母匹配。

制作列表视图拉伸整个屏幕高度

2 个答案: