TableLayout 外的边距
Margin outside TableLayout
我制作了这个 table 布局,但如您所见,它有一些我不知道如何删除的边距:https://imgur.com/a/qKcaJ92
另一个问题是最后一行是打开的。这是我的 xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:id="@+id/slidelinearlayout">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/tl"
android:layout_width="170dp"
android:layout_height="180dp"
android:layout_marginLeft="750dp"
android:layout_marginTop="150dp"
android:layout_marginRight="0dp"
android:background="@android:color/white"
android:padding="16dp"
tools:context=".MainActivity">
<TableRow
android:id="@+id/tr_item_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Flessibilità" />
<TextView
android:id="@+id/f_item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="@+id/tr_item_2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Fluidità" />
<TextView
android:id="@+id/fl_item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="@+id/tr_item_3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/item_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Originalità" />
<TextView
android:id="@+id/o_item_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="@+id/tr_item_4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/item_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Elaborazione" />
<TextView
android:id="@+id/el_item_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="@+id/tr_item_5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/item_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Titolo" />
<TextView
android:id="@+id/t_item_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
</TableLayout>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/tl_2"
android:layout_width="300dp"
android:layout_height="130dp"
android:layout_marginLeft="750dp"
android:layout_marginTop="370dp"
android:background="@android:color/white"
android:padding="16dp"
tools:context=".MainActivity">
<TableRow
android:id="@+id/tr_item_6"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/t1_item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Tempo di reazione" />
<TextView
android:id="@+id/tempo_item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="@+id/tr_item_7"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/t2_item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Tempo di completamento" />
<TextView
android:id="@+id/tempo_item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="@+id/tr_item_8"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/n_cancellature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Numero cancellature" />
<TextView
android:id="@+id/n_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
</TableLayout>
</RelativeLayout>
你知道我该如何解决吗?如您所见,所有标签都已关闭。我使用 RelativeLayout 在屏幕上的任意位置设置元素,这可能是问题的一部分吗?
PS:对于边距问题,我什至尝试调整 table 的大小,但没有任何改变
您在 Table 布局中使用了不必要的边距,这使得您的布局从屏幕上移开。使 Table 布局分别为 layout_width="Match_parent" & 布局高度="Wrap_Content"。
同时尽量避免您提到的以下边距。
android:layout_width="300dp"
android:layout_height="130dp"
android:layout_marginLeft="750dp"
android:layout_marginTop="370dp"
以上可以改写为
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="0"
android_gravity:center
您没有看到您想要的布局,因为您在视图上使用了固定尺寸:
不同的 phone 有不同的屏幕尺寸,在您的布局中,您在视图上使用固定尺寸(例如,固定尺寸为 android:layout_marginTop="150dp"
)结果是,在一个屏幕(您的 android 工作室预览屏幕)上可能看起来不错的内容在另一个屏幕(您的实际 phone)上可能看起来不太好。
如果您想在所有设备上以相同的方式查看您的 table,您可以使用 ConstraintLayout with guidelines 来实现您想要的外观:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="@+id/textView5"
app:layout_constraintEnd_toStartOf="@+id/textView4"
android:background="@color/cardview_dark_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="@+id/textView5"
app:layout_constraintEnd_toEndOf="parent"
android:background="@color/cardview_dark_background"
app:layout_constraintStart_toEndOf="@+id/textView5"
app:layout_constraintTop_toTopOf="@+id/textView5" />
<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="1"
app:layout_constraintBottom_toTopOf="@+id/textView"
app:layout_constraintEnd_toStartOf="@+id/textView6"
app:layout_constraintStart_toStartOf="parent"
android:background="@color/colorAccent"
app:layout_constraintTop_toTopOf="@+id/guideline" />
<TextView
android:id="@+id/textView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="@+id/textView"
app:layout_constraintEnd_toEndOf="parent"
android:background="@color/colorAccent"
app:layout_constraintStart_toEndOf="@+id/textView"
app:layout_constraintTop_toTopOf="@+id/textView" />
<TextView
android:id="@+id/textView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="@+id/guideline2"
android:background="@color/colorAccent"
app:layout_constraintEnd_toStartOf="@+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<TextView
android:id="@+id/textView6"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="2"
app:layout_constraintBottom_toBottomOf="@+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
android:background="@color/cardview_dark_background"
app:layout_constraintStart_toEndOf="@+id/textView3"
app:layout_constraintTop_toTopOf="@+id/textView3" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".3" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".5" />
</androidx.constraintlayout.widget.ConstraintLayout>
看起来像这样:(箭头指向指南以便更好地理解)
现在,我知道乍一看这可能看起来像很多工作,有些人可能想知道这是否真的值得付出努力,但这就是为什么我相信 ConstraintLayout 是构建 UI:
的正确方法
真的很人性化
ConstraintLayout 非常简单易学。
一旦你学会了它,你会发现你节省了大量的开发时间,因为制作你的UI非常快。
约束布局旨在支持不同的屏幕尺寸,因此无需为每个屏幕尺寸构建布局。
我制作了这个 table 布局,但如您所见,它有一些我不知道如何删除的边距:https://imgur.com/a/qKcaJ92 另一个问题是最后一行是打开的。这是我的 xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:id="@+id/slidelinearlayout">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/tl"
android:layout_width="170dp"
android:layout_height="180dp"
android:layout_marginLeft="750dp"
android:layout_marginTop="150dp"
android:layout_marginRight="0dp"
android:background="@android:color/white"
android:padding="16dp"
tools:context=".MainActivity">
<TableRow
android:id="@+id/tr_item_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Flessibilità" />
<TextView
android:id="@+id/f_item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="@+id/tr_item_2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Fluidità" />
<TextView
android:id="@+id/fl_item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="@+id/tr_item_3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/item_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Originalità" />
<TextView
android:id="@+id/o_item_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="@+id/tr_item_4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/item_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Elaborazione" />
<TextView
android:id="@+id/el_item_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="@+id/tr_item_5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/item_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Titolo" />
<TextView
android:id="@+id/t_item_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
</TableLayout>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/tl_2"
android:layout_width="300dp"
android:layout_height="130dp"
android:layout_marginLeft="750dp"
android:layout_marginTop="370dp"
android:background="@android:color/white"
android:padding="16dp"
tools:context=".MainActivity">
<TableRow
android:id="@+id/tr_item_6"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/t1_item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Tempo di reazione" />
<TextView
android:id="@+id/tempo_item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="@+id/tr_item_7"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/t2_item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Tempo di completamento" />
<TextView
android:id="@+id/tempo_item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="@+id/tr_item_8"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="@+id/n_cancellature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Numero cancellature" />
<TextView
android:id="@+id/n_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
</TableLayout>
</RelativeLayout>
你知道我该如何解决吗?如您所见,所有标签都已关闭。我使用 RelativeLayout 在屏幕上的任意位置设置元素,这可能是问题的一部分吗? PS:对于边距问题,我什至尝试调整 table 的大小,但没有任何改变
您在 Table 布局中使用了不必要的边距,这使得您的布局从屏幕上移开。使 Table 布局分别为 layout_width="Match_parent" & 布局高度="Wrap_Content"。
同时尽量避免您提到的以下边距。
android:layout_width="300dp"
android:layout_height="130dp"
android:layout_marginLeft="750dp"
android:layout_marginTop="370dp"
以上可以改写为
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="0"
android_gravity:center
您没有看到您想要的布局,因为您在视图上使用了固定尺寸:
不同的 phone 有不同的屏幕尺寸,在您的布局中,您在视图上使用固定尺寸(例如,固定尺寸为 android:layout_marginTop="150dp"
)结果是,在一个屏幕(您的 android 工作室预览屏幕)上可能看起来不错的内容在另一个屏幕(您的实际 phone)上可能看起来不太好。
如果您想在所有设备上以相同的方式查看您的 table,您可以使用 ConstraintLayout with guidelines 来实现您想要的外观:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="@+id/textView5"
app:layout_constraintEnd_toStartOf="@+id/textView4"
android:background="@color/cardview_dark_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="@+id/textView5"
app:layout_constraintEnd_toEndOf="parent"
android:background="@color/cardview_dark_background"
app:layout_constraintStart_toEndOf="@+id/textView5"
app:layout_constraintTop_toTopOf="@+id/textView5" />
<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="1"
app:layout_constraintBottom_toTopOf="@+id/textView"
app:layout_constraintEnd_toStartOf="@+id/textView6"
app:layout_constraintStart_toStartOf="parent"
android:background="@color/colorAccent"
app:layout_constraintTop_toTopOf="@+id/guideline" />
<TextView
android:id="@+id/textView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="@+id/textView"
app:layout_constraintEnd_toEndOf="parent"
android:background="@color/colorAccent"
app:layout_constraintStart_toEndOf="@+id/textView"
app:layout_constraintTop_toTopOf="@+id/textView" />
<TextView
android:id="@+id/textView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="@+id/guideline2"
android:background="@color/colorAccent"
app:layout_constraintEnd_toStartOf="@+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<TextView
android:id="@+id/textView6"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="2"
app:layout_constraintBottom_toBottomOf="@+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
android:background="@color/cardview_dark_background"
app:layout_constraintStart_toEndOf="@+id/textView3"
app:layout_constraintTop_toTopOf="@+id/textView3" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".3" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".5" />
</androidx.constraintlayout.widget.ConstraintLayout>
看起来像这样:(箭头指向指南以便更好地理解)
现在,我知道乍一看这可能看起来像很多工作,有些人可能想知道这是否真的值得付出努力,但这就是为什么我相信 ConstraintLayout 是构建 UI:
的正确方法真的很人性化
ConstraintLayout 非常简单易学。
一旦你学会了它,你会发现你节省了大量的开发时间,因为制作你的UI非常快。
约束布局旨在支持不同的屏幕尺寸,因此无需为每个屏幕尺寸构建布局。