如何将listview项目显示为电子商务应用程序中的项目?

时间:2016-09-06 14:01:25

标签: android xml android-layout listview android-cardview

我是android开发者的新手,我正在开发一个项目来显示像这样的listview项目

picture

我的问题是:

如何编写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>

2 个答案:

答案 0 :(得分:2)

只需在您的成绩单中添加编译'com.android.support:cardview-v7:24.1.1',并在线性布局下的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>

你可以根据需要设置曲线和角落,你必须做正常列表视图的其余部分。

答案 1 :(得分:-1)

在Photo中不仅是列表视图,还有卡片视图,这里是链接Creating Lists and Cards以了解如何创建cardview