将列表视图中的所有列对齐

Question

将列表视图中的所有列对齐

3

我想知道如何对齐行中的所有列。我正在使用 ListView，在其中显示游戏药品列表。每行的列大小不同。我希望看到每个列都具有相同的宽度，但列表整体宽度不同。

正如您从图片中看到的那样，这些列没有对齐。我画了线来更清楚地表达我的意思。您还可以看到按钮离另一列太近了。图片上的箭头表示我想让这些按钮放在行的末尾。

我的实现使用以下样式:

<!-- List style for the drug sell list -->
<style name="traderY.List">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_alignParentLeft">true</item>
    <item name="android:layout_alignParentTop">true</item>
</style>

<!-- Header style for quantity column -->
<style name="traderY.HeaderQuantityText">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.15</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:padding">4dip</item>
    <item name="android:layout_margin">4dip</item>
    <item name="android:textColor">#EDEFF0</item>
</style>

<!-- Header style for cost column -->
<style name="traderY.HeaderCostText">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.20</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:padding">4dip</item>
    <item name="android:layout_margin">4dip</item>
    <item name="android:textColor">#EDEFF0</item>
</style>

<!-- Header style for name column -->
<style name="traderY.HeaderNameText">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.45</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:padding">4dip</item>
    <item name="android:layout_margin">4dip</item>
    <item name="android:textColor">#EDEFF0</item>
</style>

<!-- Row style for quantity column -->
<style name="traderY.QuantityListText">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.15</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:padding">4dip</item>
    <item name="android:layout_margin">4dip</item>
    <item name="android:textColor">#000000</item>
</style>

<!-- Row style for cost column -->
<style name="traderY.CostListText">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.20</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:padding">4dip</item>
    <item name="android:layout_margin">4dip</item>
    <item name="android:textColor">#000000</item>
</style>

<!-- Row style for name column -->
<style name="traderY.NameListText">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.45</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:padding">4dip</item>
    <item name="android:layout_margin">4dip</item>
    <item name="android:textColor">#000000</item>
</style>

<!-- Row style for button column -->
<style name="traderY.ListButton" parent="@android:style/Widget.Button">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.20</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:gravity">center</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">0.6</item>
    <item name="android:background">@drawable/custom_btn_black_pearl</item>
    <item name="android:padding">4dip</item>
</style>

如您所见，我使用这两个项目来设置或尝试设置列宽：

<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">0.20</item>

我看到可以使用权重来设置宽度。我基本上使用了设置百分比的相同值。如果我理解正确，weight 值表示与其他组件之间的比率。我在 Stack Overflow 的一个问题中找到了这个解决方案，并在几个教程中也找到了它。我发现其中一个教程在这里。

为了更好地说明，以下是所有组件的布局，从包含列表视图的片段开始。

片段布局

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

  <TextView
    android:id="@+id/money"
    style="@style/traderY.TextCenter" />

  <TextView
    android:id="@+id/location"
    style="@style/traderY.TextCenter" />

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/junkie_icon"/>

  <ListView
    android:id="@+id/drug_list"
    style="@style/traderY.List"
    android:layout_weight="1"/>

  <TableRow
    style="@style/traderY.ButtonRow">

    <Button
        android:id="@+id/nothing"
        style="@style/traderY.ButtonCenter"
        android:text="@string/exit"/>

  </TableRow>

</LinearLayout>

这是标题布局。如您所见，我省略了最后一列按钮，因为不需要为其显示标题：

<?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"
  android:layout_weight="1"
  android:background="#000000">

  <TextView
    android:text="@string/header_quantity"
    style="@style/traderY.HeaderQuantityText" />

  <TextView
    android:text="@string/header_cost"
    style="@style/traderY.HeaderCostText" />

  <TextView
    android:text="@string/header_name"
    style="@style/traderY.HeaderNameText" />

</LinearLayout>

这是我使用的每行布局：

<?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">

  <TextView
    android:id="@+id/drug_quantity"
    style="@style/traderY.QuantityListText" />

  <TextView
    android:id="@+id/drug_cost"
    style="@style/traderY.CostListText" />

  <TextView
    android:id="@+id/drug_name"
    style="@style/traderY.NameListText" />

  <Button
    android:id="@+id/drug_sell_btn"
    android:text="@string/sell_drugs_action"
    style="@style/traderY.ListButton"/>

</LinearLayout>

那些是我使用的样式/布局，我不在代码中更改任何这些属性。因此，问题只能出现在我的XML文件中。有人知道我在这里做错了什么吗？也许我的调查是错误的，我无法完成它。我将感激任何帮助或评论以解决这个问题。如果这甚至不可能，请让我知道。

- Jernej K

3个回答

0

增加样式“@style/traderY.QuantityListText”的字重。将其设为0.2或0.3。

- Sanjay Kakadiya

0

将您的文本视图放入LinearLayout中，并将其设置为填充parentView。这样，所有按钮都将对齐到右侧。

<?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_weight="1"
   android:layout_width="0dp"
   android:layout_height="wrap_content" />

    <TextView
      android:id="@+id/drug_quantity"
      style="@style/traderY.QuantityListText" />

   <TextView
     android:id="@+id/drug_cost"
     style="@style/traderY.CostListText" />

   <TextView
     android:id="@+id/drug_name"
     style="@style/traderY.NameListText" />
</LinearLayout>

<Button
  android:id="@+id/drug_sell_btn"
  android:text="@string/sell_drugs_action"
  style="@style/traderY.ListButton"/>

</LinearLayout>

- Iulian Popescu

1

在这种情况下，他还应该删除“Sell”按钮上的layout_weight属性，而是改为使用wrap_content属性。 - Karakuri

你说得对，他应该这样做，但因为有很多代码在不同的地方需要追踪，我错过了这个。好观点。 - Iulian Popescu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jernej K · Accepted Answer

我发现我的解决方案是正确的。 weight 属性起了作用。由于某种未知原因，gradle 在构建应用程序时没有看到这些更改。或者可能是模拟器的问题。这不是第一次发生这样的事情。我将不得不调查为什么会发生这种情况。