在网格布局中将文本视图与图像视图对齐答案

【问题标题】：Aligning textviews with imageview in a gridlayout在网格布局中将文本视图与图像视图对齐
【发布时间】：2016-11-11 01:57:33
【问题描述】：

我正在尝试将 5 个文本视图与一个图像视图对齐。我创建了一个 2 列和 5 行的网格布局。在第 0 列中有 5 个文本视图，分为 5 行。第 1 列是一个跨越 5 行的图像视图。但我无法得到我想要的布局。请参阅下面的所需布局：

我的代码：

<GridLayout
        android:id="@+id/gridlayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="2"
        android:layout_below="@+id/titel_over_ons">

        <TextView
            android:id="@+id/intro"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_row="0"
            android:layout_column="0"
            android:text="" />

        <ImageView
            android:id="@+id/foto_over_ons"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_row="0"
            android:layout_gravity="end"
            android:contentDescription="@string/dm_design_webdesign_moobiele_applicaties_en_grafische_vormgeving" />

        <TextView
            android:id="@+id/titel_dr"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_gravity="start"
            android:text="" />

        <TextView
            android:id="@+id/tekst_dr"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_row="2"
            android:layout_column="0"
            android:layout_marginTop="10dp" />


        <TextView
            android:id="@+id/titel_service"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_row="3"
            android:layout_column="0"
            android:layout_marginTop="15dp"
            android:text="" />

        <TextView
            android:id="@+id/tekst_service"
            android:layout_width="0dp"
            android:layout_gravity="start"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="0"
            android:layout_marginTop="10dp" />


    </GridLayout>

有人可以帮我解决这个问题吗？谢谢。

【问题讨论】：

相对布局可能会更好，您可以将视图专门放置在其他视图旁边或下方。 developer.android.com/reference/android/widget/…
不要使用网格布局，它不尊重空格和权重。如果必须，请使用 support v7 中的那个。使用具有适当跨度的 TableLayout 轻松实现这一目标
我什至尝试过使用 Tablelayout 但它不支持行跨度
如果你使用GridLayout，每次添加或删除textView都会很困难，这里你不需要GridLayout，你需要2个LinearLayouts或Relative layout

标签： android grid-layout android-gridlayout qgridlayout

【解决方案1】：

此代码将显示平分的 TextView：

（删除背景，它们仅用于视图建议）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="#222" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="#675" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="#989" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="#e34" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="#e76" />




    </LinearLayout>

    <ImageView
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:layout_marginStart="10dp"
        android:background="#eae"
        />



</LinearLayout>]

【讨论】：

【解决方案2】：

您可以使用以下属性之一设置元素的跨度：

android:layout_columnSpan="..."
android:layout_rowSpan="..."

在你的情况下是

android:layout_columnSpan="5"

【讨论】：

【解决方案3】：

使用下面的 xml 代码可以很好地设计这种类型的布局：

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:text="One"
        android:background="@android:color/white"            
        android:layout_weight="1"
        android:gravity="center"/>

    <View
        android:layout_height="5dp"
        android:layout_width="match_parent"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Two"
        android:background="@android:color/white"
        android:layout_weight="1"
        android:gravity="center"/>

    <View
        android:layout_height="5dp"
        android:layout_width="match_parent"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Three"
        android:background="@android:color/white"
        android:layout_weight="1"
        android:gravity="center"/>

    <View
        android:layout_height="5dp"
        android:layout_width="match_parent"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Four"
        android:background="@android:color/white"
        android:layout_weight="1"
        android:gravity="center"/>

    <View
        android:layout_height="5dp"
        android:layout_width="match_parent"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Five"
        android:background="@android:color/white"
        android:layout_weight="1"
        android:gravity="center"/>        

</LinearLayout>

<View
    android:layout_width="5dp"
    android:layout_height="match_parent"/>

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:layout_weight="1"
    android:background="@drawable/ic_launcher"/>

</LinearLayout>

【讨论】：