Question

在创建列表视图布局时，建议使用相对布局和最小图像和文本来保持布局尽可能简单，还是可以使用几个按钮（可能是一个或两个图像）使它们变得更加迷人和tablelayouts中的一些文字？

我正在尝试最小化点击/触摸以获取相关信息，并为用户提供更好的UI，而不是沼泽标准列表。

我试图研究它，但无法找到设计布局和列表视图限制的指南。

有些东西告诉我，如果结果集增长到20以上，下面的xml是listview经历窒息的原因吗？

谢谢。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="@color/White" android:gravity="center">
<TableLayout android:layout_height="wrap_content" android:id="@+id/tableLayout1" android:layout_width="fill_parent">
    <TableRow android:id="@+id/tableRow1" android:layout_height="wrap_content" android:layout_width="fill_parent">
        <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/linearLayout2">
            <ImageView android:layout_marginRight="10px" android:layout_width="60dip" android:layout_marginTop="4px" android:id="@+id/icon" android:layout_height="60dip" android:src="@drawable/indian" android:layout_marginLeft="4px"></ImageView>
            <TableLayout android:layout_height="match_parent" android:id="@+id/tableLayout2" android:layout_width="fill_parent">
                <TableRow android:id="@+id/tableRow5" android:layout_height="wrap_content" android:layout_width="fill_parent">
                    <TextView android:focusableInTouchMode="false" android:paddingTop="5dip" android:textColor="@color/Black" android:id="@+id/title" android:textSize="18dip" android:layout_height="wrap_content" android:maxLines="10" android:layout_gravity="left" android:focusable="false" android:layout_width="fill_parent" android:text="@+id/label"></TextView>
                </TableRow>
                <TableRow android:id="@+id/tableRow6" android:layout_width="wrap_content" android:layout_height="wrap_content">
                    <TextView android:textColor="@color/Black" android:layout_height="wrap_content" android:id="@+id/distanceText" android:textSize="12dip" android:layout_width="wrap_content" android:gravity="center" android:layout_gravity="left" android:text="TextView"></TextView>
                </TableRow>
            </TableLayout>
        </LinearLayout>
    </TableRow>
    <TableRow android:id="@+id/tableRow2" android:layout_height="wrap_content" android:layout_width="wrap_content" android:paddingBottom="15dip">
        <LinearLayout android:id="@+id/linearLayout3" android:layout_width="wrap_content" android:layout_height="wrap_content">
            <TableLayout android:layout_height="match_parent" android:id="@+id/tableLayout3" android:layout_width="fill_parent">
                <TableRow android:layout_height="match_parent" android:id="@+id/tableRow8" android:layout_width="fill_parent">
                    <ImageView android:id="@+id/introImage" android:layout_height="wrap_content" android:layout_width="fill_parent" android:scaleType="fitStart" android:paddingLeft="8dip"></ImageView>
                </TableRow>
                <TableRow android:id="@+id/tableRow4" android:layout_width="wrap_content" android:layout_height="wrap_content">
                    <TextView android:linksClickable="true" android:textColor="@color/Black" android:layout_height="wrap_content" android:focusable="false" android:text="more" android:autoLink="all" android:textColorLink="@color/Aqua" android:textSize="12dip" android:clickable="true" android:paddingRight="5dip" android:id="@+id/intro" android:paddingTop="5dip" android:focusableInTouchMode="false" android:paddingLeft="5dip" android:layout_width="wrap_content"></TextView>
                </TableRow>
                <TableRow android:id="@+id/tableRow7" android:layout_width="wrap_content" android:layout_height="wrap_content">
                    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/description" android:text="description" android:visibility="invisible" android:paddingLeft="5dip" android:paddingRight="5dip" android:textColor="@color/Black" android:textSize="12dip" android:autoLink="all" android:clickable="true" android:linksClickable="true" android:textColorLink="@color/DarkGray"></TextView>
                </TableRow>
            </TableLayout>
        </LinearLayout>
    </TableRow>
    <TableRow android:id="@+id/tableRow3" android:layout_height="wrap_content" android:layout_width="fill_parent" android:background="@drawable/listviewmenu" android:layout_gravity="center_horizontal" android:gravity="center_horizontal">
        <LinearLayout android:layout_height="wrap_content" android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_gravity="center" android:gravity="center">
            <Button android:id="@+id/mapClick" android:layout_height="wrap_content" android:text="@string/map_info" android:layout_width="wrap_content" android:background="@drawable/actionbutton" android:textColor="@color/White" android:textColorHighlight="@color/AntiqueWhite" android:textStyle="bold" android:gravity="center"></Button>
            <Button android:id="@+id/moreClick" android:layout_height="wrap_content" android:text="@string/more_info" android:layout_width="wrap_content" android:textColor="@color/White" android:textColorHighlight="@color/Aqua" android:textStyle="bold" android:gravity="center" android:background="@drawable/actionmore"></Button>
        </LinearLayout>
    </TableRow>
</TableLayout>

Answer 1

以下是相同的布局，但只使用一个RelativeLayout：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/white" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="60dip"
        android:layout_height="60dip"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="4px"
        android:layout_marginRight="10px"
        android:layout_marginTop="4px"
        android:src="@android:drawable/dialog_frame" >
    </ImageView>

    <TextView
        android:id="@+id/title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/icon"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:maxLines="10"
        android:paddingTop="5dip"
        android:text="@+id/label"
        android:textColor="@android:color/black"
        android:textSize="18dip" >
    </TextView>

    <TextView
        android:id="@+id/distanceText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:layout_gravity="left"
        android:layout_toRightOf="@+id/icon"
        android:gravity="center"
        android:text="TextView"
        android:textColor="@android:color/black"
        android:textSize="12dip" >
    </TextView>

    <ImageView
        android:id="@+id/introImage"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/icon"
        android:paddingLeft="8dip"
        android:scaleType="fitStart" >
    </ImageView>

    <TextView
        android:id="@+id/intro"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/introImage"
        android:autoLink="all"
        android:clickable="true"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:linksClickable="true"
        android:paddingLeft="5dip"
        android:paddingRight="5dip"
        android:paddingTop="5dip"
        android:text="more"
        android:textColor="@android:color/black"
        android:textColorLink="@android:color/primary_text_light"
        android:textSize="12dip" >
    </TextView>

    <TextView
        android:id="@+id/description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/intro"
        android:autoLink="all"
        android:clickable="true"
        android:linksClickable="true"
        android:paddingLeft="5dip"
        android:paddingRight="5dip"
        android:text="description"
        android:textColor="@android:color/black"
        android:textColorLink="@android:color/darker_gray"
        android:textSize="12dip"
        android:visibility="invisible" >
    </TextView>

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:background="@android:drawable/dialog_frame" >

        <Button
            android:id="@+id/mapClick"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/dialog_frame"
            android:text="map_info"
            android:textColor="@android:color/white"
            android:textColorHighlight="@android:color/secondary_text_light"
            android:textStyle="bold" >
        </Button>

        <Button
            android:id="@+id/moreClick"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/dialog_frame"
            android:gravity="center"
            android:text="more_info"
            android:textColor="@android:color/white"
            android:textColorHighlight="@android:color/primary_text_light"
            android:textStyle="bold" >
        </Button>
    </LinearLayout>
</RelativeLayout>

我刚刚更改了color，string和drawable引用，看它是否有效！

RelativeLayout rulez！

Answer 2

建议保持ListView项目的布局简单 - 我的意思是快速表现。简单并不意味着无聊：）

RelativeLayout最适合ListView的行，因为它们只需要传递一个传递，而不是嵌套LinearLayout（如上所述here）。但是，如果你必须超越简单并在你的行中包含一些花哨的东西，平台提供了一些技巧来帮助你。

使用convertView优化 - 即，在getView()的{{1}}方法中，检查Adapter参数是否为空。如果不是那么只使用该对象，并使用新值修改它而不是膨胀新值。
即使您使用上面的选项1，使用convertView模式不仅可以避免通货膨胀;而且还优化了“用新值修改行”步骤。这在this talk。

Android listview布局优化

2 个答案: