Gridlayout - размер элемента по сравнению с прошлыми элементами

Введение/выпуск

Я использую мобильное приложение под названием AIDE (и это программа App UI Designer), чтобы создать макет для мобильного приложения, которое я делаю, прежде чем начать его программировать. Планировка почти идеальная. Я бы хотел, чтобы часть playerTwo была в верхней части экрана, перевернутой, чтобы оба игрока могли ее использовать. Затем я бы добавил разделитель посередине, а часть playerOne была бы внизу, с пустым пространством/разделителем посередине. Проблема в том, что разделитель, когда для высоты установлено значение Wrap Content, он чрезмерно выходит за пределы экрана, опускаясь вниз, выталкивая секцию playerOne за пределы экрана.

Что мне нужно

Мне нужно, чтобы разделитель продолжал расширяться по высоте, пока часть playerOne не окажется внизу экрана, а секция playerTwo не окажется вверху.

Что я пробовал

  • Изменение диапазона строк и столбцов каждого элемента
  • Изменение гравитации макета на «Центр», «Заливка», «Заливка по вертикали» и т. д. для различных элементов.
  • Изменение строки и столбца разделителя
  • Изменение гравитации, полей и заполнения разделителя
  • Изменение высоты для соответствия родительскому #P8#

Макет с фиксированной высотой (10 dp)

Макет с фиксированной высотой

Макет с переносом содержимого

Макет с переносом содержимого

XML

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    columnCount="1"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    rowCount="1"
    android:columnCount="3"
    android:layout_gravity="right"
    android:orientation="horizontal"
    android:rowCount="8">

    <!-- Start of Player Two Section -->
    <!-- Current LP -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="8000 LP"
        android:minWidth="100dp"
        android:gravity="center"
        android:rotation="180"
        android:id="@+id/playerTwo_LP"
        android:layout_column="1"
        android:layout_row="0"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"/>
    <!-- Toolkit -->
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="TOOLS"
        android:rotation="180"
        android:id="@+id/playerTwo_toolKit"
        android:layout_row="1"
        android:layout_column="0"/>
    <!-- Cards Tool -->
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="CARDS"
        android:layout_row="1"
        android:layout_column="2"
        android:rotation="180"
        android:id="@+id/playerTwo_CardLibrary"/>
    <!-- Add LP -->
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="ADD LP"
        android:layout_gravity="fill"
        android:rotation="180"
        android:id="@+id/playerTwo_addLP"
        android:layout_row="0"
        android:layout_column="0"/>
    <!-- Lose LP -->
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="LOSE LP"
        android:layout_column="2"
        android:rotation="180"
        android:id="@+id/playerTwo_loseLP"
        android:layout_row="0"/>
    <!-- Player Two Name -->
    <EditText
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:ems="10"
        android:layout_row="2"
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:text="Seto Kaiba"
        android:gravity="center"
        android:id="@+id/playerTwo_name"
        android:textStyle="italic"
        android:rotation="180"/>
    <!-- End of Player Two Section -->
    <View
        android:background="?android:attr/dividerVertical"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_column="0"
        android:layout_columnSpan="3"
        android:layout_row="3"
        android:layout_rowSpan="1"
        android:layout_gravity="center|fill"/>
    <!-- Start of Player One Section -->
    <!-- Player One Name -->
    <EditText
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:ems="10"
        android:layout_row="5"
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:text="Yugi Muto"
        android:gravity="center"
        android:id="@+id/playerOne_name"
        android:textStyle="italic"
        android:rotation="0"/>
    <!-- Current LP -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="8000 LP"
        android:minWidth="100dp"
        android:gravity="center"
        android:rotation="0"
        android:id="@+id/playerOne_LP"
        android:layout_column="1"
        android:layout_row="6"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"/>
    <!-- Toolkit -->
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="TOOLS"
        android:rotation="0"
        android:id="@+id/playerOne_toolKit"
        android:layout_row="6"
        android:layout_column="0"
        android:layout_gravity="center"/>
    <!-- Cards Tool -->
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="CARDS"
        android:layout_row="6"
        android:layout_column="2"
        android:rotation="0"
        android:id="@+id/playerOne_CardLibrary"/>
    <!-- Add LP -->
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="ADD LP"
        android:layout_gravity="fill"
        android:id="@+id/playerOne_addLP"
        android:layout_row="7"
        android:layout_column="0"/>
    <!-- Lose LP -->
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="LOSE LP"
        android:layout_column="2"
        android:id="@+id/playerOne_loseLP"
        android:layout_row="7"/>
    <!-- End of Player One Section -->
</GridLayout>

person The Gaming Hideout    schedule 13.09.2017    source источник


Ответы (1)


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

Я рекомендую ConstraintLayout. Он почти создан специально для таких макетов. Вы можете сказать ему приятные вещи, такие как «поместите этот вид в верхний правый угол» и «поместите этот другой вид в нижний левый угол». Или «растянуть это представление, чтобы заполнить все пространство между этими двумя другими представлениями».

Вот каким был бы ваш макет, если бы вы переписали его, чтобы использовать ConstraintLayout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <!-- player two section -->
    <Button
        android:id="@+id/playerTwo_addLP"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ADD LP"
        android:rotation="180"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <Button
        android:id="@+id/playerTwo_toolKit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TOOLS"
        android:rotation="180"
        app:layout_constraintTop_toBottomOf="@+id/playerTwo_addLP"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <Button
        android:id="@+id/playerTwo_loseLP"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LOSE LP"
        android:rotation="180"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <Button
        android:id="@+id/playerTwo_CardLibrary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CARDS"
        android:rotation="180"
        app:layout_constraintTop_toBottomOf="@+id/playerTwo_loseLP"
        app:layout_constraintRight_toRightOf="parent"/>

    <TextView
        android:id="@+id/playerTwo_LP"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="8000 LP"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:rotation="180"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/playerTwo_addLP"
        app:layout_constraintRight_toLeftOf="@+id/playerTwo_loseLP"
        app:layout_constraintBottom_toBottomOf="@+id/playerTwo_toolKit"/>

    <EditText
        android:id="@+id/playerTwo_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textStyle="italic"
        android:text="Seto Kaiba"
        android:rotation="180"
        app:layout_constraintTop_toBottomOf="@+id/playerTwo_toolKit"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <!-- player one section -->
    <Button
        android:id="@+id/playerOne_addLP"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ADD LP"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <Button
        android:id="@+id/playerOne_toolKit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TOOLS"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/playerOne_addLP"/>

    <Button
        android:id="@+id/playerOne_loseLP"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LOSE LP"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <Button
        android:id="@+id/playerOne_CardLibrary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CARDS"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/playerOne_loseLP"/>

    <TextView
        android:id="@+id/playerOne_LP"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="8000 LP"
        android:textAppearance="?android:attr/textAppearanceLarge"
        app:layout_constraintTop_toTopOf="@+id/playerOne_toolKit"
        app:layout_constraintLeft_toRightOf="@+id/playerOne_toolKit"
        app:layout_constraintRight_toLeftOf="@+id/playerOne_CardLibrary"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <EditText
        android:id="@+id/playerOne_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textStyle="italic"
        android:text="Yugi Muto"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/playerOne_toolKit"/>

    <!-- divider -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?android:attr/dividerVertical"
        app:layout_constraintTop_toBottomOf="@+id/playerTwo_name"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/playerOne_name"/>

</android.support.constraint.ConstraintLayout>

введите здесь описание изображения

person Ben P.    schedule 13.09.2017
comment
Он выдает ошибки через мой мобильный AIDE, говоря aapt: не найден идентификатор ресурса для атрибута «layout_constraintTop_toTopOf» в пакете «thegaminghideout.yugioh». Это потому, что мой мобильный помощник, возможно, не поддерживает его? Сам макет выводит только текст android.support.constraint.ConstraintLayout - person The Gaming Hideout; 13.09.2017
comment
Я понял. В AIDE (приложение, которое я использую) по умолчанию не были импортированы библиотеки Maven, поэтому мне пришлось вручную добавить их в файл сборки, и теперь все эти ошибки исчезли. Спасибо! - person The Gaming Hideout; 13.09.2017
comment
Когда я использую программу AIDE App UI Designer на своем телефоне, теперь она показывает только текст android.support.constraint.ConstraintLayout. AIDE установил библиотеки Maven, поэтому макет работает правильно, как вы показали. Я отредактирую свой вопрос, чтобы получить скриншот того, как он выглядит; Мне просто интересно, возможно ли, чтобы он правильно отображался, или само приложение его не поддерживает? - person The Gaming Hideout; 14.09.2017