在网格布局中将文本视图与图像视图对齐
Aligning textviews with imageview in a gridlayout
我正在尝试将 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>
有人可以帮我解决这个问题吗?
谢谢。
您可以使用以下属性之一设置元素的跨度:
android:layout_columnSpan="..."
android:layout_rowSpan="..."
你的情况是
android:layout_columnSpan="5"
使用下面的代码 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>
此代码将显示平均分配的 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>]
我正在尝试将 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>
有人可以帮我解决这个问题吗? 谢谢。
您可以使用以下属性之一设置元素的跨度:
android:layout_columnSpan="..."
android:layout_rowSpan="..."
你的情况是
android:layout_columnSpan="5"
使用下面的代码 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>
此代码将显示平均分配的 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>]