android - 自定义 Listview 奇怪的 UI 故障

Question

我正在努力为我的 Android 应用程序中的 ListView 调试一个奇怪的 UI 故障。 99% 的时间一切看起来和工作都应该如此，但有时我的 ListView 表现得很奇怪。当您重新启动应用程序时， ListView 看起来又正常了。

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

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

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

提前致谢。

Listview 通常的样子:

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 有时不会根据可用空间适本地调整其子项的大小。如果 child 的一侧没有正确地限制在某处，它会很快让某些东西被剪掉。另外，我认为 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 中，并根据内容的大小进行包装。依靠它来水平放置所有东西。然后只将 TextViews 包裹在 Relativelayout 中。只需让 TextViews 在下方和彼此的一侧对齐。让 RelativeLayout 担心实际将它们相应地居中。它经过加权以确保它可以拉伸(stretch)以水平填充任何剩余空间。

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