对齐列表视图中的所有列

时间:2016-04-19 15:44:08

标签: android android-layout listview

我想知道如何管理行中的所有列。我正在使用ListView,我在其中显示了我的游戏药物列表。每列的列大小不同。我希望看到每列都具有相同的宽度,直到列表的末尾,但总体上没有相同的宽度。

Current implementation

从图中可以看出,列未对齐。我绘制线条,使我更加明显的是我想要的。您还可以看到按钮要靠近另一列。通过图片上的箭头,我想清楚地说明这些按钮应该放在行的末尾。

我的实现使用以下样式:

<!-- 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问题的解决方案,我在几个教程中找到了它。我找到的其中一个教程是here

为了分享更多光线,这里还有所有组件的布局,从包含列表视图的片段开始。

片段布局

<?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文件中。

有谁知道我在这里做错了什么?也许我的调查是错误的,我不能这样做。我将不胜感激任何帮助或评论来解决这个问题。如果这不可能,请告诉我。

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

增加style =&#34; @ style / traderY.QuantityListText&#34;的权重。使0.2或0.3

答案 2 :(得分: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>