Использование ImageView для создания 2D-карты значков

Question

Так что я немного изо всех сил пытаюсь создать 2D карту значков, где каждый значок имеет размер 48x48 пикселей, а карта - сетку 9x9 (таким образом, размер 432x432 пикселей). Я безуспешно пытался начать с GridView и с тех пор решил попробовать использовать AbsoluteView внутри LinearView. Вот начало XML-файла (пока я не добавил все 81 значок, просто для краткости этого вопроса):

<AbsoluteLayout
     xmlns:android="http://schemas.android.com/apk/res/android" 
      android:orientation="vertical" 
      android:layout_width="442px" 
      android:layout_height="442px"
      android:padding="5px"
      android:layout_gravity="center_horizontal"
      android:background="#008000"
>
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="0px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="48px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="96px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="144px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="192px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="240px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="288px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="336px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="384px"
        android:layout_y="0px"
        />



    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="0px"
        android:layout_y="48px"
        />              

</AbsoluteLayout>

Когда я пытаюсь это сделать в Eclipse, это выглядит совершенно идеально. Когда я загружаю это на свой Samsung Captivate, это просто неправильно. Как будто иконки растягиваются, хотя я указал точные размеры в пикселях.

Я уверен, что, возможно, я совершаю какую-то ошибку, но независимо от того, что я пытаюсь, я не могу заставить иконки / рисованные элементы отображаться в их точных размерах. Если кто-то может указать, что я делаю неправильно, я был бы очень признателен.

Спасибо.

Итак, я изменил XML-файл, чтобы попытаться использовать TableLayout следующим образом:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    >

    <TableRow>
            <LinearLayout
              xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
                android:paddingTop="0px">

            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            </LinearLayout>
    </TableRow>
</TableLayout>

Даже если бы я указал точные размеры ImageViews, они все равно растягивались, так что отображалось только около 5 значков.

Answer 1

AbsoluteLayout ограничен. Есть много лучших способов сделать это с помощью AbsoluteLayout.

GridView будет хорошо работать, если вам не важно, сколько элементов в каждой строке. Это простой способ справиться с экранами нескольких размеров.

Если вам нужно ровно 9 в каждой строке, вы можете использовать TableLayout . См. TableLayout учебник для хорошего введения.

По сути, я бы создал TableLayout с 9 строками. Каждая строка будет содержать горизонтальный LinearLayout с 9 ImageViews.

Чтобы предотвратить растяжение изображения, убедитесь, что для scaleType установлено значение fitXY, а для layout_width и layout_height ImageViews и LinearLayouts установлено значение WRAP_CONTENT.

Вам также необходимо учитывать множество различных плотностей экрана, доступных на телефонах. Изображение 48x48 пикселей может работать нормально на одной плотности, но, вероятно, не будет хорошо смотреться на телефоне с высокой плотностью и большим размером экрана. См. с поддержкой нескольких размеров экрана для хорошего обзора. По сути, вы хотите иметь разные ресурсы изображения для разных плотностей экрана.

Answer 2

Я не уверен, что прав, но мне пришло в голову две идеи, когда я прочитал ваш вопрос.

Вы, вероятно, попробовали первый вариант. Если значки уже имеют желаемое измерение, не добавляйте layout_width и height в XML (Во всяком случае, это не имеет смысла, потому что значки идеально подходят для вашего ImageView's).

Второй, около единицы пикселя. Недавно я читал, что использование px в качестве единицы измерения не рекомендуется для Android. Вместо px, используйте dp (плотность пикселей, я думаю) для размеров и sp (масштабировать пиксели) для размера шрифта. Возможно, размеры пикселей на вашем телефоне не работают должным образом: P

Надеюсь, это поможет вам: D