如何根据屏幕大小调整表格布局中的元素大小？

我在LinearLayout中有一个TableLayout，它是一个4x4网格。我希望每个单元格都是一个正方形，并且我希望大小根据屏幕大小（或分配给TableLayout的大小）进行缩放。我总是希望屏幕上显示所有12个方格。实质上，我希望每个ImageView的layout_height和layout_wight值为父级值的1/4。现在我已经将它们设置为100dp。我需要使用layout_weight值做些什么吗？如何根据屏幕大小调整表格布局中的元素大小？

编辑：好了，使用layout_weight="1"我所有的ImageView对象我能得到宽度都成为可用空间的1/4，但现在他们已经0的高度。我怎么能得到的高度也是layout_weight的函数？

这是我的XML：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 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" 
    tools:context="com.package.name.MainActivity"> 

    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/tableLayout1" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" > 

     <!-- 1st row --> 
     <TableRow 
      android:id="@+id/tableRow1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:padding="5dip" > 

      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorAccent"/> 
      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorPrimary"/> 
      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorAccent"/> 
      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorPrimary"/> 

     </TableRow> 

     <!-- 2nd row --> 
     <TableRow 
      android:id="@+id/tableRow2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:padding="5dip" > 

      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorPrimary"/> 
      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorAccent"/> 
      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorPrimary"/> 
      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorAccent"/> 

     </TableRow> 


     <!-- 3rd row --> 
     <TableRow 
      android:id="@+id/tableRow3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:padding="5dip" > 

      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorAccent"/> 
      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorPrimary"/> 
      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorAccent"/> 
      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorPrimary"/> 

     </TableRow> 

     <!-- 4th row --> 
     <TableRow 
      android:id="@+id/tableRow4" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:padding="5dip" > 

      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorPrimary"/> 
      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorAccent"/> 
      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorPrimary"/> 
      <ImageView 
       android:layout_height="100dp" 
       android:layout_width="100dp" 
       android:src="@color/colorAccent"/> 

     </TableRow> 

    </TableLayout> 


</LinearLayout>

它看起来像这样，与最右边的列没有完全显示。我知道这是因为我把它们都设置为100dp，但只给目前我在这里的想法：

来源

2017-08-09 intA

您正在使用图像视图。你有没有图像放入图像视图，或者你只是用它们来获取颜色到正方形？ – Cheticamp

我将最终获得图像，颜色现在只是一个占位符。我有点废弃这个想法，而是使用'GridLayout'来代替。 – intA

我想说如果你的图像有1x1的比例，你可以在ImageViews上指定adjustViewBounds =“true”，单元格将是方形的。 – Cheticamp

您可以使用1android:stretchColumns="*"

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/tableLayout1" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:stretchColumns="*"> 
</TableLayout>

你可以使用LinearLayout。

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:id="@+id/tableLayout1" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorAccent"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorPrimary"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorAccent"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorPrimary"/> 

</LinearLayout> 

<!-- 2nd row --> 
<LinearLayout 
    android:id="@+id/tableRow2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 

     android:src="@color/colorPrimary"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorAccent"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorPrimary"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorAccent"/> 

</LinearLayout> 


<!-- 3rd row --> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:id="@+id/tableLayout3" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorAccent"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorPrimary"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorAccent"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorPrimary"/> 

</LinearLayout> 

<!-- 4th row --> 
<LinearLayout 
    android:id="@+id/tableRow4" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 

     android:src="@color/colorPrimary"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorAccent"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorPrimary"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_weight="1" 
     android:src="@color/colorAccent"/> 
</LinearLayout> 
</LinearLayout>

来源

2017-08-10 01:55:04 KeLiuyue

如何根据屏幕大小调整表格布局中的元素大小？

回答

相关问题