如何在电子商务应用程序中将列表视图项目显示为项目？

Question

我是 android 开发的新手，我正在开发一个项目来显示这样的列表视图项目

我的问题是：

如何写XML布局来大致实现图中的布局？

我做了一些研究和工作，但没有找到任何答案。

这是我的自定义布局代码

     <?xml version="1.0" encoding="utf-8"?>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:background="@drawable/list_bg">

    <ImageView
        android:id="@+id/adPic"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="5dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher"/>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/adPic"
        android:layout_gravity="center_vertical"
        >



        <TextView
            android:id="@+id/adTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_toLeftOf="@+id/adPrice"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingBottom="5dp"
            android:text=""
            android:alpha=".87"
            android:textSize="14dp"
            android:textColor="@color/row_black"
            android:maxLines="2"
            android:layout_marginLeft="10dp"
            />

        <TextView
            android:id="@+id/adPrice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingBottom="5dp"
            android:text=""
            android:alpha=".87"
            android:textSize="15dp"
            android:textColor="@color/row_blue"
            android:layout_marginRight="5dp"
            android:singleLine="true"
            />

        <TextView
            android:id="@+id/adDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/adTitle"
            android:layout_below="@+id/adTitle"
            android:singleLine="true"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingBottom="5dp"
            android:text=""
            android:alpha=".87"
            android:textSize="10dp"
            android:textColor="@color/row_gray"
            android:layout_marginRight="10dp"

            />
    </RelativeLayout>

</LinearLayout>

Answer 1

在照片中，不仅是列表视图，还是卡片视图，这里是linkCreating Lists and Cards学习如何创建卡片视图

Answer 2

只需将此 compile 'com.android.support:cardview-v7:24.1.1' 添加到你的 gradel 和你的 xml 中，在你的线性布局下这样做

  <android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/list_bg"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/adPic"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="5dp"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_toRightOf="@+id/adPic">


            <TextView
                android:id="@+id/adTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_marginLeft="10dp"
                android:layout_toLeftOf="@+id/adPrice"
                android:alpha=".87"
                android:maxLines="2"
                android:paddingBottom="5dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:text=""
                android:textColor="@color/row_black"
                android:textSize="14dp" />

            <TextView
                android:id="@+id/adPrice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="5dp"
                android:alpha=".87"
                android:paddingBottom="5dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:singleLine="true"
                android:text=""
                android:textColor="@color/row_blue"
                android:textSize="15dp" />

            <TextView
                android:id="@+id/adDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/adTitle"
                android:layout_below="@+id/adTitle"
                android:layout_marginRight="10dp"
                android:alpha=".87"
                android:paddingBottom="5dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:singleLine="true"
                android:text=""
                android:textColor="@color/row_gray"
                android:textSize="10dp"

                />
        </RelativeLayout>

    </LinearLayout>
</android.support.v7.widget.CardView>

您可以根据需要设置曲线和圆角，其余的操作与普通列表视图一样。

如何在电子商务应用程序中将列表视图项目显示为项目？

How to display listview items as items in e-commerce app?

xml

android

listview

android-layout

android-cardview