GridLayout 및 행 / 열 범위 문제


121

소개GridLayout 하는 Android 개발자 블로그 게시물 은 스팬이 자동 색인 할당에 미치는 영향에 대한 다음 다이어그램을 보여줍니다.

자동 인덱스 할당

실제로 사용하여 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>각 열의 너비가 최소인지 확인하기 위해 요소 를 도입 해야했습니다. 그렇지 않으면 너비가 0 인 열이 여러 개있을 것입니다.

그러나 그들과 함께하더라도 나는 이것을 얻습니다.

GridLayout 샘플

특히 :

  • 그럼에도 불구하고 android:layout_gravity="fill_horizontal"열 범위가있는 위젯은 범위 열을 채우지 않습니다.

  • android:layout_rowSpan값 에도 불구하고 행에 걸친 것은 없습니다.

누구든지 사용하여 블로그 게시물의 다이어그램을 재현 할 수 있습니까 GridLayout?

감사!


178
난 당신이 질문 : 질문 같아요
StackOverflowed

답변:


76

꽤 험난한 느낌이 들지만 필요한 것 이상으로 추가 열과 행을 추가하여 올바른 모양을 얻을 수있었습니다. 그런 다음 추가 열을 높이를 정의하는 각 행의 Space로 채우고 추가 행을 너비를 정의하는 각 열의 Space로 채웠습니다. 유연성을 높이기 위해 이러한 공간 크기를 코드에서 설정하여 가중치와 유사한 것을 제공 할 수 있다고 생각합니다. 스크린 샷을 추가하려고했지만 필요한 평판이 없습니다.

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

스크린 샷


7
글쎄요, IMHO는 지금까지 제시된 다른 솔루션보다 점진적으로 덜 해커입니다. 적어도 여기서는 하드 와이어 크기가 Space요소에 있습니다. 향후 독자를 위해 스크린 샷을 추가했습니다. 감사!
CommonsWare

rowCount8로 설정된 이유는 무엇 입니까? 우리는 4 개의 행 (가장 큰 것의 크기 rowSpan)과 Space5가되어야 하는 여분 의 행 이 필요합니다. 내가 무엇을 놓치고 있습니까?
curioustechizen 2012-08-10

나는 원래 질문 (안드로이드 개발자 블로그 게시물 자체)의 그림에서 행과 열 수를 가지고 갔다. 그런 다음 행 및 열 수에 1을 추가하여 외부 경계 공간을위한 공간을 확보했습니다. 5 행으로도 잘 작동합니다.
kturney

5
나는이 솔루션이 <Gridlayout>반대로 작동한다는 것을 <android.support.v7.widget.GridLayout>
알았

어떻게 동적으로 row_span과 column 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


2
감사! 흥미로운 점은 GridLayoutAndroid 지원 패키지에서로 전환하면 레이아웃이 깨져서 둘이 완전히 호환되지 않는다는 것입니다. 또한 나는 위젯의 하드 와이어 링 크기를 포함하지 않는이 작업을 수행하는 방법이 있기를 정말로 바라고 있습니다. 다른 답변 (있는 경우)을 확인하기 위해이 롤을 잠시 두겠습니다.하지만 더 나은 답변이 없으면 수락하겠습니다. 다시 한 번 감사드립니다!
CommonsWare

4
"Android 지원 패키지에서 GridLayout으로 전환하면 레이아웃이 깨집니다."실제로 는 백 포트의 XML 네임 스페이스를 사용하여 필요한 android:속성을 속성으로 변환하지 않은 것이 내 잘못이었습니다 app:. 백 포트와 함께 작동합니다.
CommonsWare

나는 그들 중 일부를 동적으로 크기를 조정하는 방법을 찾았지만 열 또는 행의 전체 너비가 이미 인접한 뷰에 의해 정의 된 경우에만 가능합니다. 나는 그들이 가중치처럼 작동하고 정의 된 범위에 따라 공간을 균등하게 분배한다고 생각하지 않습니다. 완벽하지는 않지만 현재 프로젝트에서 필요한 것에 완벽하게 작동합니다.
HandlerExploit 2012 년

글쎄, 당신의 예는 AbsoluteLayout의 aproach와 RelativeLayout의 aproach가 혼합 된 것과 비슷합니다. 이것은 동적이거나 이식성이 없습니다. 이를 위해 GridLayout이 정확히 필요한 이유는 무엇입니까? 어쨌든, GridLayout과는 이럴는 중 ... 깨지거나 미완성입니다
Bondax

@Bondax이 구현은 높이, 너비, 열 너비 및 열 범위 모두에서 그리드 항목을 명확하게 정의합니다. 그리드 (화면 너비)에 다른 너비가 정의 된 경우 그리드 레이아웃은 제한된 공간 내에서 그리드 항목을 플로팅합니다. 이것은 프로젝트의 요구 사항이었으며 문제를 완벽하게 해결했습니다.
HandlerExploit 2013 년

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 라이브러리는 무게 원칙을 수용하여 초과 공간 배포를 쉽게 만듭니다. 기둥을 늘리려면 기둥 내부의 구성 요소가 무게 또는 중력을 정의하는지 확인하십시오. 기둥이 늘어나는 것을 방지하려면 기둥의 구성 요소 중 하나가 무게 또는 중력을 정의하지 않도록하십시오. 이 라이브러리에 대한 종속성을 추가해야합니다. build.gradle에 com.android.support:gridlayout-v7:25.0.1 을 추가 합니다 .

<?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>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.