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'
.