GridLayout та рядок / стовпчик проліт горе

121

Android Блог розробники після впровадженняGridLayout показує цю схему , як прольоти впливають на автоматичний розподіл індексу:

автоматичне розподіл індексу

Я намагаюся реально реалізувати це за допомогою GridLayout. Ось що я маю досі:

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.commonsware.android.gridlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    app:orientation="horizontal"
    app:columnCount="8">

    <Button
        app:layout_columnSpan="2"
        app:layout_rowSpan="2"
        android:layout_gravity="fill_horizontal"
        android:text="@string/string_1"/>

  <Button
    app:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="@string/string_2"/>

  <Button
    app:layout_rowSpan="4"
    android:text="@string/string_3"/>

  <Button
    app:layout_columnSpan="3"
    app:layout_rowSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="@string/string_4"/>

  <Button
    app:layout_columnSpan="3"
    android:layout_gravity="fill_horizontal"
    android:text="@string/string_5"/>

  <Button
    app:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="@string/string_6"/>

  <android.support.v7.widget.Space
    app:layout_column="0"
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

</android.support.v7.widget.GridLayout>

Мені довелося вводити <Space>елементи для того, щоб кожен стовпчик мав мінімальну ширину, інакше у мене буде купа стовпців нульової ширини.

Однак, навіть із ними я отримую таке:

зразок GridLayout

Зокрема:

  • Незважаючи на те android:layout_gravity="fill_horizontal", мої віджети зі стовпцями стовпців не заповнюють проміжні стовпці

  • Незважаючи на android:layout_rowSpanзначення, рядки нічого не охоплюють

Чи може хтось відтворити діаграму з повідомлення в блозі за допомогою GridLayout?

Дякую!

android  android-gridlayout 
— CommonsWare
джерело
178
Я думаю, навіть ви задаєте питання :)
— StackOverflowed

Відповіді:

76

Це здається досить хакітним, але мені вдалося отримати правильний вигляд, додавши додатковий стовпець і рядок поза тим, що потрібно. Потім я заповнив додатковий стовпець пробілом у кожному рядку, визначаючи висоту, і заповнив додатковий рядок пробілом у кожному стовпчику, визначаючи ширину. Для додаткової гнучкості я думаю, що ці розміри простору можна встановити в коді, щоб забезпечити щось подібне до ваг. Я спробував додати скріншот, але у мене немає необхідної репутації.

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="9"
android:orientation="horizontal"
android:rowCount="8" >

<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill"
    android:layout_rowSpan="2"
    android:text="1" />

<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="2" />

<Button
    android:layout_gravity="fill_vertical"
    android:layout_rowSpan="4"
    android:text="3" />

<Button
    android:layout_columnSpan="3"
    android:layout_gravity="fill"
    android:layout_rowSpan="2"
    android:text="4" />

<Button
    android:layout_columnSpan="3"
    android:layout_gravity="fill_horizontal"
    android:text="5" />

<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="6" />

<Space
    android:layout_width="36dp"
    android:layout_column="0"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="1"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="2"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="3"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="4"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="5"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="6"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="7"
    android:layout_row="7" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="0" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="1" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="2" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="3" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="4" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="5" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="6" />

</GridLayout>

скріншот

— kturney
джерело
7
Ну, IMHO, що настільки менш хакітний, ніж інше рішення, представлене на сьогоднішній день, - принаймні, тут розміри жорстких проводів є в Spaceелементах. Я додав скріншот для майбутніх читачів. Дякую!
— CommonsWare
Чому rowCountвстановлено значення 8? Нам потрібно 4 ряди (розмір найбільший rowSpan) плюс додатковий для того, Spaceщоб це було 5. Що я пропускаю?
— цікавотехніка
Я щойно пішов з підрахунками рядків і стовпців із малюнка в оригінальному запитанні (яке саме з блогу Android Dev). Потім я додав 1 до числа рядків і стовпців, щоб звільнити пробіли зовнішнього кордону. Він також повинен добре працювати лише з 5 рядів.
— kturney
5
Я вважаю, що це рішення працює лише на <Gridlayout>відміну від<android.support.v7.widget.GridLayout>
— Дідія
Як я можу встановити динамічно row_span і span span ... це буде працювати?
17 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:columnCount="8"
        android:rowCount="7" >

        <TextView
            android:layout_width="50dip"
            android:layout_height="50dip"
            android:layout_columnSpan="2"
            android:layout_rowSpan="2"
            android:background="#a30000"
            android:gravity="center"
            android:text="1"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="50dip"
            android:layout_height="25dip"
            android:layout_columnSpan="2"
            android:layout_rowSpan="1"
            android:background="#0c00a3"
            android:gravity="center"
            android:text="2"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="25dip"
            android:layout_height="100dip"
            android:layout_columnSpan="1"
            android:layout_rowSpan="4"
            android:background="#00a313"
            android:gravity="center"
            android:text="3"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="75dip"
            android:layout_height="50dip"
            android:layout_columnSpan="3"
            android:layout_rowSpan="2"
            android:background="#a29100"
            android:gravity="center"
            android:text="4"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="75dip"
            android:layout_height="25dip"
            android:layout_columnSpan="3"
            android:layout_rowSpan="1"
            android:background="#a500ab"
            android:gravity="center"
            android:text="5"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="50dip"
            android:layout_height="25dip"
            android:layout_columnSpan="2"
            android:layout_rowSpan="1"
            android:background="#00a9ab"
            android:gravity="center"
            android:text="6"
            android:textColor="@android:color/white"
            android:textSize="20dip" />
    </GridLayout>

</RelativeLayout>

ScreenShot

— HandlerExploit
джерело
2
Дякую! Цікаво, що якщо я переключусь на GridLayoutпакет Android Support, макет порушиться, що дозволяє припустити, що ці два не повністю сумісні. Крім того, я дуже сподіваюся, що є спосіб зробити це, що не передбачає розмірів віджетів, які мають жорстку проводку. Я дозволю трохи розгорнути цей список, щоб побачити, які інші відповіді (якщо такі є), але я прийму ваші, якщо нічого кращого не з’явиться. Знову дякую!
— CommonsWare
4
"якщо я перейду на GridLayout з пакета Android Support, макет зламається" - фактично це була моя помилка, не перетворюючи потрібні android:атрибути на app:ті, використовуючи простір імен XML резервного порту . Це працює з резервом.
— CommonsWare
Я знайшов спосіб динамічного розміру деяких з них, але лише тоді, коли повна ширина стовпців або рядків вже визначена суміжними видами. Я не думаю, що вони працюють, як роблять ваги, і розподіляють простір однаково залежно від визначених прольотів. Це не ідеально, але він ідеально підходить для того, що мені потрібно в моєму поточному проекті.
— HandlerExploit
Ну, ваш приклад більше схожий на підхід AbsoluteLayout, змішаний з одним для RelativeLayout, чи не так? Це ні динамічно, ні портативно. Чому саме для цього вам потрібна GridLayout? У будь-якому разі, GridLayout - це, чи то зламаний, чи незакінчений ...
— Бондакс
@Bondax Ця реалізація чітко визначає елемент сітки як по висоті, ширині, ширині стовпця та проміжку стовпця. Макет сітки буде плавати вашими елементами сітки в обмеженому просторі, коли різні сітки визначаються до сітки (ширина екрану). Це було вимогою до проекту, і це вирішило це питання ідеально.
— HandlerExploit
6

На своїх стовпцях потрібно встановити як layout_gravity, так і layout_columntWeight

<android.support.v7.widget.GridLayout
    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="wrap_content">

    <TextView android:text="سوم شخص"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        />

    <TextView android:text="دوم شخص"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        />

    <TextView android:text="اول شخص"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        />
 </android.support.v7.widget.GridLayout>
— Хоссен Шахдуст
джерело
2

Бібліотека підтримки Android V7 GridLayout полегшує розподіл зайвого простору, враховуючи принцип ваги. Щоб натягнути стовпчик, переконайтесь, що компоненти всередині нього визначають вагу або силу тяжіння. Щоб запобігти розтягуванню стовпчика, переконайтесь, що один із компонентів колони не визначає вагу чи силу тяжіння. Не забудьте додати залежність для цієї бібліотеки. Додайте com.android.support:gridlayout-v7:25.0.1 у build.gradle.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout 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"
app:columnCount="2"
app:rowCount="2">

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="First"
    app:layout_columnWeight="1"
    app:layout_rowWeight="1" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="Second"
    app:layout_columnWeight="1"
    app:layout_rowWeight="1" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="Third"
    app:layout_columnWeight="1"
    app:layout_rowWeight="1" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"        
    app:layout_columnWeight="1"
    app:layout_rowWeight="1"
    android:text="fourth"/>

</android.support.v7.widget.GridLayout>
— Перміта
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.