1. Настройка статического интерфейса
К примеру, нам нужно в интерфейсе сделать блок с картинками внизу экрана так, чтобы он занимал 25% высоты экрана. Для того, чтобы делать относительные размеры объектов интерфейса нужно применять LinearLayout в качестве родительского интерфейса, которому задавать параметр android:weightSum="100" (т.е. 100%). Тогда в соответствии с задачей поделим элементы на 75% и 25% соответственно, используя в дочерних объектах параметр android:layout_weight ( т.е. «вес» эелемента). Чем больше «вес» элемента , тем больше места он должен занимать. Параметр, который регулируется этим «весом» задается значением 0. Так как в нашем случае мы будем менять высоту,то задаем дочерним элементам android:layout_height="0dp".
Накидаем следующий родительский интерфейс :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="ru.netunix.scaleimages.MainActivity"
android:weightSum="100"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Hello World!"
android:layout_weight="15"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="60"
android:src="@drawable/q05image"/>
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="25"
android:id="@+id/tableQuestion">
</TableLayout>
</LinearLayout>
При этом желаемая таблица TableLayout с картинками будет занимать именно 25% всей высоты экрана. Зададим идентификатор таблицы в разметке android:id="@+id/tableQuestion".
2. Выравнивание картинок в статическом интерфейсе
Для того чтобы выровнять высоту строк опять воспользуемся LinearLayout и укажем ему android:weightSum="100", а также зададим ему идентификатор в разметке android:id="@+id/subLinear". Таким образом, если в статике у нас будет две строки, которые должны быть одной высоты, то обеим TableRow нужно будет указывать одинаковый «вес» по android:layout_weight="50", и чтобы они отмасштабировались задавать нулевой параметр android:layout_height="0dp".
К, примеру, у нас в таблице должно быть 2 строки и в верхней строке должно быть 3 картинки, а в нижней 2. Опишем интерфейс следующим образом:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="ru.netunix.scaleimages.MainActivity"
android:weightSum="100"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Hello World!"
android:layout_weight="15"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="60"
android:src="@drawable/q05image"/>
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="25"
android:id="@+id/tableQuestion">
<LinearLayout
android:orientation="vertical"
android:weightSum="100"
android:id="@+id/subLinear"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:src="@drawable/q02v1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:src="@drawable/q02v2"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:src="@drawable/q02v3"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:src="@drawable/q02v4"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:src="@drawable/q02v5"/>
</TableRow>
</LinearLayout>
</TableLayout>
</LinearLayout>
Получаем следующего вида рабочий Android интерфейс:
3. Выравнивание динамически добавленных строк и картинок в таблице
К примеру, Вы заранее не знаете какие картинки Вы будите загружать, сколько их, их размер и т.д. Будем наполнять таблицу TableLayout динамически. Удалим из интерфейса все дочерние элементы блока LinearLayout с идентификатором "@+id/subLinear". Получим следующую разметку :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="ru.netunix.scaleimages.MainActivity"
android:weightSum="100"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Hello World!"
android:layout_weight="15"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="60"
android:src="@drawable/q03image"/>
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="25"
android:id="@+id/tableQuestion">
<LinearLayout
android:orientation="vertical"
android:weightSum="100"
android:id="@+id/subLinear"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</TableLayout>
</LinearLayout>
Чтобы динамически наполнить таблицу и получить интрефейс, как на картинке вверху, добавим следующий код в метод onCreate() нашей Activity:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//Разметка отвечающая за равную высоту строк таблицы
LinearLayout mySubLinear = (LinearLayout)findViewById(R.id.subLinear);
//Создаем первую строку
TableRow row = new TableRow(this);
//Выставляем ей параметры в 50% ( так как строк будет 2)
TableRow.LayoutParams rowParams = new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT,0,50.0f);
row.setLayoutParams(rowParams);
//Параметры для ячеек таблицы(картинок).Все должны быть одинаковой ширины.
TableRow.LayoutParams params = new TableRow.LayoutParams(0, TableRow.LayoutParams.MATCH_PARENT,1.0f);
//Подготовка изображения
ImageView imageView1 = new ImageView(this);
Picasso.with(this).load("file:///android_asset/qimages_ru/q02v3.jpg")
.into(imageView1);
//Устанавливаем параметры для изображения
imageView1.setLayoutParams(params);
//Добавляем изображение в первый столбец
row.addView(imageView1);
ImageView imageView2 = new ImageView(this);
Picasso.with(this).load("file:///android_asset/qimages_ru/q02v2.jpg")
.into(imageView2);
imageView2.setLayoutParams(params);
//Добавляем изображение во второй столбец
row.addView(imageView2);
ImageView imageView3 = new ImageView(this);
Picasso.with(this).load("file:///android_asset/qimages_ru/q02v1.jpg")
.into(imageView3);
imageView3.setLayoutParams(params);
//Добавляем изображение в третий столбец
row.addView(imageView3);
//Добавляем первую строку в таблицу
mySubLinear.addView(row);
//Аналогично создаем вторую строку и выставляем ей параметры
TableRow row2 = new TableRow(this);
row2.setLayoutParams(rowParams);
//Наполняем вторую строку
ImageView imageView4 = new ImageView(this);
Picasso.with(this).load("file:///android_asset/qimages_ru/q02v1.jpg")
.into(imageView4);
imageView4.setLayoutParams(params);
row2.addView(imageView4);
ImageView imageView5 = new ImageView(this);
Picasso.with(this).load("file:///android_asset/qimages_ru/q02v2.jpg")
.into(imageView5);
imageView5.setLayoutParams(params);
//Добавляем вторую строку в таблицу
row2.addView(imageView5);
//Добавляем вторую строку в таблицу
mySubLinear.addView(row2);
Один из главных параметров в коде — это rowParams, в котором в случае заранее неизвестного числа строк RowNumber коэффициент «веса» каждой строки надо будет получать делением суммарного коэффициента всех строк в subLinear( у нас это 100) на число строк:
TableRow.LayoutParams rowParams = new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT,0,(100.0f/RowNumber));
В параметрах rowParams не забываем выставить height в 0,чтобы строки получили одинаковую высоту.
Для элементов ячеек (они у нас ImageView) также создаем свои параметры params.Так как коэффициент "веса" у всех картинок будет одинаковым и равен 1, то все столбцы будут одной ширины. Обязательно выставляем параметр width для ячеек в 0, чтобы картинки корректно отмасштабировались.
Остальное видно из комментариев в коде. Организовать добавление строк и (или) ячеек в цикле for не сложно. Для добавления библиотки Picasso в скрипте .gradle добавляем строчку compile 'com.squareup.picasso:picasso:2.5.2'.