Оптимизация макета просмотра списка Android

Question

При создании макета в виде списка целесообразно сделать макеты максимально простыми с относительными макетами и минимальным количеством изображений и текста, или можно сделать их немного более изящными с помощью пары кнопок, возможно, изображения или двух. и какой-нибудь текст внутри таблиц?

Я пытаюсь свести к минимуму клики / прикосновения, чтобы получить доступ к соответствующей информации, и дать пользователю более приятный пользовательский интерфейс для игры, в отличие от стандартного списка болот.

Я пытался исследовать его, но не могу найти руководящие указания по макету дизайна и ограничениям для списков.

Что-то подсказывает мне, что приведенный ниже xml является причиной удушения при просмотре списка, если набор результатов вырастает до значения, превышающего, скажем, 20?

Спасибо.

<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 s лучше всего подходят для строк ListView, поскольку для рендеринга требуется всего один проход, в отличие от вложенных LinearLayout s (как уже упоминалось * 1007).* здесь ).Однако, если вам нужно выйти за рамки простого и включить в свои ряды немного причудливых вещей, платформа предоставит вам несколько хитростей.

1. Используйте оптимизацию convertView -т. е. в методе getView() вашего Adapter проверьте, является ли параметр convertView нулевым.Если это не так, просто используйте этот объект и измените его новыми значениями вместо того, чтобы надувать новое.
2. Даже если вы используете вариант 1 выше, используйте шаблон ViewHolder, чтобы не только избежать инфляции;но также оптимизировать шаг «изменение строки новыми значениями».Это описано в этом разговоре .