Android: выравнивание четырех квадратов

Question

Я пытаюсь выровнять четыре одинаковых по размеру квадрата на экране Android, и теперь я попробовал то, что похоже на миллион различных подходов, но ни один из них, похоже, не работает: (.

На данный момент у меня есть следующее:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:id="@+id/MasterLayout" android:layout_width="wrap_content"     android:layout_height="fill_parent"  android:background="#FFFFFF">
<TableLayout android:layout_width="fill_parent" android:id="@+id/mainlay" android:background="#444444" android:layout_weight="0.2" android:layout_height="wrap_content" android:padding="0dip">
    <TableRow android:layout_weight="1"  android:background="#BBBBBB" android:padding="0dip">
        <ImageView android:id="@+id/ImageView1" android:layout_marginLeft="10px" android:layout_weight="1" android:layout_marginRight="5px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="@drawable/bigbox_new"></ImageView>
        <ImageView android:id="@+id/ImageView2" android:layout_marginLeft="5px" android:layout_weight="1" android:layout_marginRight="10px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="@drawable/bigbox_new"></ImageView>
    </TableRow>
    <TableRow android:layout_weight="1" android:padding="0dip">
        <ImageView android:id="@+id/ImageView3" android:layout_marginLeft="10px" android:layout_weight="1" android:layout_marginRight="5px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="@drawable/bigbox_new"></ImageView>
        <ImageView android:id="@+id/ImageView4" android:layout_marginLeft="5px" android:layout_weight="1" android:layout_marginRight="10px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="@drawable/bigbox_new"></ImageView>
    </TableRow>
</TableLayout>
</LinearLayout>

Это в основном делает работу. Тем не менее, каждое из этих четырех изображений имеет огромный отступ сверху и снизу. Как мне избавиться от этого? Или мне вообще нужно использовать другой тип макета?

Чтобы проиллюстрировать мою проблему, вот картинка. Слева - то, что я получил, справа - то, что мне нужно. Изображение

Большое спасибо!

Ура, Маркус!

Answer 1

Удалите layout_weight из ваших TableRows и установите их layout_height в wrap_content. Затем добавьте пустой TableRow под ними с layout_height, установленным на fill_parent.

Answer 2

Попробуйте установить высоту ImageView для fill_parent, я думаю, что это должно сработать. В любом случае, было бы полезно, если бы ваши XML-свойства были разбиты на строки, остальным нам трудно прочитать одну строку свойств.

Кроме того, почему вы размещаете TableLayout внутри LinearLayout? Если у вас не будет больше элементов внутри этого Линейного, вы можете избавиться от него.

Answer 3

Попробуйте использовать scaleType в качестве centerCrop, если размер изображения больше, то это поможет вам. Но это не лучший способ сделать это, лучше было бы изменить ресурсы изображения.

HTH!