均匀划分表格元素之间的宽度

发布于 2024-09-28 15:15:03 字数 2105 浏览 3 评论 0原文

我正在尝试制作一个表格来显示这样的内容：

 ________
|__|__|__|
|__|__|__|

所有框都需要均匀分割，底行的中间框将有一个非常大的图像，该图像将被强制变成较小的尺寸。这是我当前的 XML 布局，但我最终得到的布局如下：

 ________
|_|____|_|
|_|____|_|

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">

    <TableRow>
        <TextView
            android:layout_column="1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Unused"
            android:padding="3dip" />
        <TextView
            android:layout_column="2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Top Center"
            android:padding="3dip" />
        <TextView
            android:layout_column="3"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Unused"
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_column="1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="----&gt;" />
        <ImageView
            android:id="@+id/mainImg"
            android:layout_column="2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
        />
        <TextView
            android:layout_column="3"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="&lt;----" />
    </TableRow>
</TableLayout>

我做错了什么？

原文

I am trying to make a table to display something like this:

 ________
|__|__|__|
|__|__|__|

All boxes need to be split evenly, and the middle box in the bottom row will have a very large image that will be forced into a smaller size. This is my current XML layout, but I wind up with a layout like this:

 ________
|_|____|_|
|_|____|_|

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">

    <TableRow>
        <TextView
            android:layout_column="1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Unused"
            android:padding="3dip" />
        <TextView
            android:layout_column="2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Top Center"
            android:padding="3dip" />
        <TextView
            android:layout_column="3"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Unused"
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_column="1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="---->" />
        <ImageView
            android:id="@+id/mainImg"
            android:layout_column="2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
        />
        <TextView
            android:layout_column="3"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="<----" />
    </TableRow>
</TableLayout>

What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

望笑 2024-10-05 15:15:03

您必须使用带有权重的线性布局。

尝试一下，您可能需要添加更多内容，但它应该可以帮助您入门。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
    <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        </LinearLayout>    
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
</LinearLayout>

You have to use linear layouts with weights.

Try this out, you may have to add some more stuff, but it should get you started.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
    <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        </LinearLayout>    
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
</LinearLayout>

回复收藏 0 原文

栖迟 2024-10-05 15:15:03

我不确定你做错了什么。我过去尝试过像您这样的表格布局，但无法使其正常工作。我发现使用相对布局可以更轻松地完成像您这样的布局。

您将左框设置为 left_align，将右框设置为 right_align，等等。然后为它们提供一个与您当前使用的屏幕尺寸相对应的倾角值，它们将在其他屏幕尺寸上正确更新。

不幸的是，一旦连续超过 3 个（比如 4 或 5 个盒子），此修复就不再起作用。

编辑：
根据 Mal 的评论，似乎另一种选择是在他的 XML 代码中使用相对布局。

我将发布我的原始修复以供参考。我还忽略了这实际上是框架布局内的相对布局。

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >  

    <Button
            android:id="@+id/start"
            android:layout_width="110dip"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
        android:text="@string/title_start" />

    <Button
        android:id="@+id/options"
        android:layout_width="110dip"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:text="@string/title_options" />   

    <Button
        android:id="@+id/scores"
        android:layout_width="110dip"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="@string/title_scores" />  

</RelativeLayout>

I’m not sure what you’re doing wrong. I tried a table layout like yours in the past and could not get it to work properly. I’ve found accomplishing a layout like yours to be easier using a relative layout.

You set the left box to left_align, the right box to right_align, etc. Then give them all a dip value to correspond with the size screen you are currently using and they will update correctly across other screen sizes.

Unfortunately, once you get beyond 3 in a row (say 4 or 5 boxes), this fix no longer works.

Edit:
As per Mal's comment it appears an alternative is to use a relative layout with his XML code.

I will post my original fix for reference. I also neglected to mention this is actually a relative layout inside a frame layout.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >  

    <Button
            android:id="@+id/start"
            android:layout_width="110dip"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
        android:text="@string/title_start" />

    <Button
        android:id="@+id/options"
        android:layout_width="110dip"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:text="@string/title_options" />   

    <Button
        android:id="@+id/scores"
        android:layout_width="110dip"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="@string/title_scores" />  

</RelativeLayout>

回复收藏 0 原文

一指流沙 2024-10-05 15:15:03

在 RowLayout 的按钮/子元素中尝试 android:layout_weight="1"

在此处输入图像描述

     <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/button9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str1"  
            android:layout_weight="1"/>

        <Button
            android:id="@+id/button10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str2"  
            android:layout_weight="1"/>

        <Button
            android:id="@+id/button11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str3"  
            android:layout_weight="1"/>

        <Button
            android:id="@+id/button12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/strMinus"  
            android:layout_weight="1"/>

    </TableRow>

Try android:layout_weight="1" in your button/child elements of RowLayout

enter image description here

     <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/button9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str1"  
            android:layout_weight="1"/>

        <Button
            android:id="@+id/button10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str2"  
            android:layout_weight="1"/>

        <Button
            android:id="@+id/button11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str3"  
            android:layout_weight="1"/>

        <Button
            android:id="@+id/button12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/strMinus"  
            android:layout_weight="1"/>

    </TableRow>

回复收藏 0 原文

坏尐絯 2024-10-05 15:15:03

更新： Android 百分比支持库帮助我们使用其百分比属性均匀地划分任何 Android 小部件。

代码和概念
Github 演示

<android.support.percent.PercentRelativeLayout
    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">
    <TextView
        android:id="@+id/fifty_huntv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ff7acfff"
        android:text="20% - 50%"
        android:textColor="@android:color/white"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_toRightOf="@id/fifty_huntv"
        android:background="#ffff5566"
        android:text="80%-50%"
        app:layout_heightPercent="80%"
        app:layout_widthPercent="50%"
        />

</android.support.percent.PercentRelativeLayout>

真的很棒。

Update: Android Percent Support Library helps us to divide evenly any android widgets using its percentage attribute.

Code and Concept
Github Demo

<android.support.percent.PercentRelativeLayout
    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">
    <TextView
        android:id="@+id/fifty_huntv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ff7acfff"
        android:text="20% - 50%"
        android:textColor="@android:color/white"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_toRightOf="@id/fifty_huntv"
        android:background="#ffff5566"
        android:text="80%-50%"
        app:layout_heightPercent="80%"
        app:layout_widthPercent="50%"
        />

</android.support.percent.PercentRelativeLayout>

Really Awesome.

回复收藏 0 原文

~没有更多了~