GridLayout และ Row / Column Span Woe


121

การแนะนำบล็อกโพสต์ของนักพัฒนา AndroidGridLayoutจะแสดงแผนภาพนี้ว่าช่วงเวลาส่งผลต่อการจัดสรรดัชนีอัตโนมัติอย่างไร:

การจัดสรรดัชนีอัตโนมัติ

ฉันกำลังพยายามนำสิ่งนั้นไปใช้จริงโดยใช้ไฟล์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ค่า แต่ก็ไม่มีอะไรครอบคลุมแถว

ใครสามารถทำซ้ำไดอะแกรมจากโพสต์บล็อกโดยใช้ a GridLayout?

ขอบคุณ!


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>

ภาพหน้าจอ


7
IMHO ที่แฮ็กน้อยกว่าโซลูชันอื่น ๆ ที่นำเสนอในปัจจุบันอย่างน้อยที่สุดที่นี่ขนาดสายแข็งอยู่ในSpaceองค์ประกอบ ฉันเพิ่มภาพหน้าจอสำหรับผู้อ่านในอนาคต ขอบคุณ!
CommonsWare

ทำไมถึงrowCountตั้งค่าเป็น 8? เราต้องการ 4 แถว (ขนาดใหญ่สุดrowSpan) บวกอีกอันSpaceที่ควรจะเป็น 5 ฉันขาดอะไรไป?
curioustechizen

ฉันเพิ่งไปพร้อมกับการนับแถวและคอลัมน์จากรูปภาพในคำถามเดิม (ซึ่งมาจากบล็อกโพสต์ของ Android dev) จากนั้นฉันก็เพิ่ม 1 ในการนับแถวและคอลัมน์เพื่อให้มีที่ว่างสำหรับ Spaces ขอบนอก ควรใช้งานได้ดีเพียง 5 แถวเช่นกัน
kturney

5
ฉันพบว่าโซลูชันนี้ใช้ได้กับ<Gridlayout>เมื่อเทียบกับ<android.support.v7.widget.GridLayout>
Didia

ฉันจะตั้งค่า 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>

ภาพหน้าจอ


2
ขอบคุณ! สิ่งที่น่าสนใจคือถ้าฉันเปลี่ยนไปGridLayoutใช้แพ็คเกจจาก Android Support เค้าโครงจะแตกแสดงว่าทั้งสองเข้ากันไม่ได้อย่างสมบูรณ์ นอกจากนี้ฉันหวังเป็นอย่างยิ่งว่าจะมีวิธีดำเนินการที่ไม่เกี่ยวข้องกับขนาดการเดินสายไฟที่ยากลำบากของวิดเจ็ต ฉันจะปล่อยให้อ่านกันสักหน่อยเพื่อดูว่ามีคำตอบอะไรอีกบ้าง (ถ้ามี) แต่ฉันจะยอมรับคุณถ้าไม่มีอะไรดีขึ้นมา ขอบคุณอีกครั้ง!
CommonsWare

4
"ถ้าฉันเปลี่ยนไปใช้ GridLayout จากแพ็กเกจ Android Support เค้าโครงจะแตก" - จริงๆแล้วนั่นเป็นความผิดของฉันเองที่ไม่แปลงandroid:แอตทริบิวต์ที่ต้องการเป็นแอตทริบิวต์app:โดยใช้เนมสเปซ XML ของ backport มันทำงานร่วมกับ backport
CommonsWare

ฉันพบวิธีที่จะทำให้บางส่วนมีขนาดแบบไดนามิก แต่ก็ต่อเมื่อความกว้างเต็มของคอลัมน์หรือแถวถูกกำหนดโดยมุมมองที่อยู่ติดกันแล้ว ฉันไม่คิดว่ามันทำงานเหมือนน้ำหนักและกระจายพื้นที่อย่างเท่าเทียมกันขึ้นอยู่กับช่วงที่กำหนด มันไม่สมบูรณ์แบบ แต่ทำงานได้ดีกับสิ่งที่ฉันต้องการในโครงการปัจจุบันของฉัน
HandlerExploit

ตัวอย่างของคุณก็เหมือนกับ aproach ของ AbsoluteLayout ผสมกับหนึ่งสำหรับ RelativeLayout ใช่หรือไม่? นี่ไม่ใช่แบบไดนามิกหรือแบบพกพา ทำไมคุณถึงต้องการ GridLayout สำหรับสิ่งนี้? อย่างไรก็ตาม GridLayout คือ imho เสียหรือยังไม่เสร็จ ...
Bondax

@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

ไลบรารี GridLayout รองรับ Android V7 ทำให้การกระจายพื้นที่ส่วนเกินเป็นเรื่องง่ายโดยรองรับหลักการของน้ำหนัก ในการยืดเสาให้ตรวจสอบให้แน่ใจว่าส่วนประกอบภายในนั้นกำหนดน้ำหนักหรือแรงโน้มถ่วง เพื่อป้องกันไม่ให้คอลัมน์ยืดออกตรวจสอบให้แน่ใจว่าส่วนประกอบอย่างใดอย่างหนึ่งในคอลัมน์ไม่ได้กำหนดน้ำหนักหรือแรงโน้มถ่วง อย่าลืมเพิ่มการอ้างอิงสำหรับไลบรารีนี้ เพิ่ม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>

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.