自定义 Listview 奇怪的 UI 故障

Question

我正在努力为我的 android 应用程序中的列表视图调试一个奇怪的 UI 故障。 99% 的情况下，一切看起来和工作正常，但我的列表视图时不时地表现得很奇怪。当您重新启动应用程序时，列表视图看起来又正常了。

有谁知道这是否是一个已知的 android 错误？

它只是随机发生的事实（我试图找出一种模式但不能）让我害怕。我无法在网上找到任何关于类似问题的信息。希望我只是在谷歌上搜索了错误的搜索词。

任何建议/帮助将不胜感激。

提前致谢。

Listview 通常的样子：

列表视图时不时的样子：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="horizontal"
          android:layout_width="match_parent"
          android:layout_height="@dimen/tile_height_padded"
          android:descendantFocusability="blocksDescendants"
          android:layout_margin="0dp"
          android:padding="@dimen/padding_list">

<!--This is the clickable background of the item-->
<ImageView
        android:id="@+id/imageview_poi_tile_detail_button_detail"
        android:background="@color/ca"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="0dp"
        android:layout_toLeftOf="@+id/imageview_poi_tile_map_button"/>

<!--This is the Grey vertical line next to the icon on the left-->
<ImageView
    android:id="@+id/delimiter_poi_tile"
    android:layout_width="@dimen/delimiter_size"
    android:layout_height="@dimen/tile_description_height"
    android:layout_marginTop="@dimen/margin_list_vertical"
    android:layout_marginBottom="@dimen/margin_list_vertical"
    android:background="@color/git"
    android:layout_toRightOf="@id/imageview_poi_tile_icon"/>

<!--This is the red map button on the right-->
<ImageView
    android:id="@id/imageview_poi_tile_map_button"
    android:background="@color/lr"
    android:src="@drawable/map"
    android:scaleType="fitCenter"
    android:padding="@dimen/image_button_padding"
    android:layout_width="@dimen/button_size"
    android:layout_height="match_parent"
    android:layout_alignParentRight="true"/>

<!--This is the marker Icon on the left-->
<ImageView
        android:id="@+id/imageview_poi_tile_icon"
        android:src="@drawable/poidefaultgit"
        android:scaleType="fitStart"
        android:padding="@dimen/image_button_padding"
        android:background="@color/ca"
        android:layout_width="@dimen/button_size"
        android:layout_height="@dimen/tile_description_height"
        android:layout_margin="0dp"/>

<!--This is the bold title text, eg. BARONS-->
<TextView
        android:id="@+id/textview_poi_tile_type"
        android:background="@color/ca"
        android:paddingLeft="@dimen/padding_list"
        android:layout_margin="0dp"
        android:gravity="left|top"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textStyle="bold"
        android:text="Poi Type"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="@color/git"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tile_title_height"
        android:layout_toRightOf="@id/delimiter_poi_tile"
        android:layout_toLeftOf="@+id/textview_poi_tile_distance"/>

<!--This is the address that is shown, eg 3 ADDERLEY ST, CAPE TOWN,-->
<TextView
        android:id="@+id/textview_poi_tile_description"
        android:background="@color/ca"
        android:paddingLeft="@dimen/padding_list"
        android:layout_margin="0dp"
        android:gravity="left|top"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Address"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="@color/git"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/textview_poi_tile_type"
        android:layout_toRightOf="@id/delimiter_poi_tile"
        android:layout_toLeftOf="@id/imageview_poi_tile_map_button"/>

<!--This will display a string when the gps is on, not shown in image as gps was off in screenshot-->
<TextView
        android:id="@id/textview_poi_tile_distance"
        android:background="@color/ca"
        android:textColor="@color/lr"
        android:text=""
        android:paddingRight="@dimen/padding_list"
        android:layout_margin="0dp"
        android:gravity="left|top"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/imageview_poi_tile_map_button"/>

    @Override
    public View getView(int position, View convertView, ViewGroup parent)
    {
        TextView description;
        TextView type;
        TextView distance;
        ImageView imageView;
        ImageView mapIcon;
        ImageView clickableArea;

        if(convertView == null)
        {
            convertView = LayoutInflater.from(context).inflate(R.layout.listitem_poi, parent, false);

            description = (TextView) convertView.findViewById(R.id.textview_poi_tile_description);
            type = (TextView) convertView.findViewById(R.id.textview_poi_tile_type);
            distance = (TextView) convertView.findViewById(R.id.textview_poi_tile_distance);
            imageView = (ImageView) convertView.findViewById(R.id.imageview_poi_tile_icon);
            mapIcon = (ImageView) convertView.findViewById(R.id.imageview_poi_tile_map_button);
            clickableArea = (ImageView) convertView.findViewById(R.id.imageview_poi_tile_detail_button_detail);

            convertView.setTag(new ViewHolder(description, type, distance, imageView, mapIcon, clickableArea));
        }
        else
        {
            ViewHolder viewHolder = (ViewHolder) convertView.getTag();

            description = viewHolder.description;
            type = viewHolder.type;
            distance = viewHolder.distance;
            imageView = viewHolder.imageView;
            mapIcon = viewHolder.mapIcon;
            clickableArea = viewHolder.clickableArea;
        }

        final int finalIndex = position;
        final PointOfInterest poi = getItem(position);

        description.setText(poi.getDescription());
        type.setText(poi.getName());

        imageView.setImageResource(R.drawable.poidefaultgit);

        distance.setText(poi.getDistance()); 

        return convertView;
    }

Answer 1

我认为有几件事会导致这种情况。根据经验，我注意到 RelativeLayout 有时不会根据可用空间适当地调整其子项的大小。如果孩子的一侧没有在某处正确界定，它会很快让某些东西被剪掉。此外，我认为 TextViews 的某些尺寸不足以显示文本。我在这里做了以下我的头，所以它可能需要一些调整，但是它应该绘制布局的图片来尝试。不幸的是，它不像您当前的 XML 那样平坦，但它应该有望解决您的问题。抱歉，目前没有在计算机上进行测试。

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!--This is the marker Icon on the left-->
    <!--Use margin if you need more space to divider-->
    <ImageView
        android:id="@+id/imageview_poi_tile_icon"
        android:src="@drawable/poidefaultgit"
        android:scaleType="fitStart"
        android:padding="@dimen/image_button_padding"
        android:background="@color/ca"
        android:layout_width="@dimen/button_size"
        android:layout_height="match_parent"/>

    <!--This is the Grey vertical line next to the icon on the left-->
    <!--Use margin to determine how close the line is to the top/bottom of item-->
    <ImageView
        android:id="@+id/delimiter_poi_tile"
        android:layout_width="@dimen/delimiter_size"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/margin_list_vertical"
        android:layout_marginBottom="@dimen/margin_list_vertical"
        android:src="@color/git"
        android:background="@color/ca"/>

    <RelativeLayout
        android:gravity="center_vertical"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="@color/ca">

        <!--This is the bold title text, eg. BARONS-->
        <TextView
            android:id="@+id/textview_poi_tile_type"
            android:paddingLeft="@dimen/padding_list"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textStyle="bold"
            android:text="Poi Type"
            android:ellipsize="end"
            android:maxLines="1"
            android:textColor="@color/git"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <!--This is the address that is shown, eg 3 ADDERLEY ST, CAPE TOWN,-->
        <TextView
            android:id="@+id/textview_poi_tile_description"
            android:paddingLeft="@dimen/padding_list"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Address"
            android:ellipsize="end"
            android:maxLines="1"
            android:textColor="@color/git"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/textview_poi_tile_type"/>

        <!--This will display a string when the gps is on, not shown in image as gps was off in screenshot-->
        <TextView
            android:id="@id/textview_poi_tile_distance"
            android:textColor="@color/lr"
            android:text=""
            android:paddingRight="@dimen/padding_list"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/textview_poi_tile_type"/>
    </RelativeLayout>

    <!--This is the red map button on the right-->
    <ImageButton
        android:id="@id/imageview_poi_tile_map_button"
        android:background="@color/lr"
        android:src="@drawable/map"
        android:scaleType="fitCenter"
        android:padding="@dimen/image_button_padding"
        android:layout_width="@dimen/button_size"
        android:layout_height="match_parent"/>
</LinearLayout>

这里的想法是将整个项目放在一个LinearLayout 中，该LinearLayout 包装到内容的大小。依靠它来水平放置所有东西。然后只将TextViews 包装在Relativelayout 中。只需让TextViews 在下方和彼此的一侧对齐。让RelativeLayout 担心实际上相应地居中它们。它经过加权以确保它可以伸展以水平填充任何剩余空间。

此外，您的地图按钮可以是 ImageButton。您不需要一个单独的视图来获取项目单击事件。根布局本身可以按原样执行。您可能遇到了此设置的问题。查看this post，它告诉您如何在嵌入 ImageButton 时正确地点击一行。

Answer 2

尝试每次都扩充一个新视图，而不是重复使用它们。我知道这不是最好的做法，但在某些时候我遇到了类似的问题，这是唯一有效的方法。

Answer 3

感谢您的帮助。我设法清理了很多布局文件。

发生 UI 故障的原因是加载了错误的样式文件。仅当我在使用该样式之前加载另一个元素时才会发生这种情况。为了解决这个问题，我专门为列表视图创建了一个新样式并将其分配给列表视图元素。