expandablelistview 中的自定义图标尺寸失真

Question

我有一个需要自定义箭头的可扩展列表视图。我尝试将 groupIndicator 设置为这样的选择器：

<ExpandableListView
            android:id="@+id/home_drawer_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:childDivider="@android:color/transparent"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp"
            android:groupIndicator="@drawable/expandable_list_view_selector" />

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/arrow_down" android:state_expanded="true" />
   <item android:drawable="@drawable/arrow_right" />
</selector>

但是，由于某种原因，这会扭曲箭头的尺寸，请参见下文：

知道为什么它们会被扭曲，以及如何解决吗？

Answer 1

事实证明，问题在于我在组标题中的 TextView 上设置了填充，然后扭曲了图像。我发现整个默认组标题和自定义指示器使用起来非常麻烦，如果不扭曲图像，您根本无法真正自定义行，所以我最终使用了组标题的自定义视图。

将 ExpandableListView 的 groupIndicator 设置为@null：

<ExpandableListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:groupIndicator="@null" />

添加一个自定义组头，在我的例子中是 ListViewGroupHeader.axml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/padding">
    <ImageView
        android:id="@+id/group_header_arrow"
        android:src="@drawable/arrow_right"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="10dp" />
    <TextView
        android:id="@+id/group_header_title"
        android:layout_toRightOf="@+id/group_header_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/black"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_centerVertical="true" />
</RelativeLayout>

在适配器的 GetGroupView 方法中设置自定义布局，关闭要显示的图像的 isExpanded 属性：

var layoutInflater = (LayoutInflater)ApplicationContext.Activity.GetSystemService (Context.LayoutInflaterService);
            var view = layoutInflater.Inflate(Resource.Layout.ListViewGroupHeader, null);
            var arrowImageView = view.FindViewById<ImageView> (Resource.Id.group_header_arrow);
            var titleTextView = view.FindViewById<TextView> (Resource.Id.group_header_title);

            arrowImageView.SetImageResource (isExpanded ? Resource.Drawable.arrow_down : Resource.Drawable.arrow_right);
            titleTextView.Text = title;
            if (isExpanded && colorExpandedBlue) {
                arrowImageView.SetImageResource (Resource.Drawable.arrow_down_blue);
                titleTextView.SetTextColor (ApplicationContext.Activity.Resources.GetColor (Resource.Color.standard_blue));
            }
            return view;

Answer 2

我做了一个更简单的解决方案，不是很优雅，但很有效。使用了一个图层列表，将可绘制资源定位在顶部和底部填充，这会产生一个可扩展列表视图的预期比例的可绘制对象。填充量可能与您的看法不同... 我使用的图标是在https://material.io/icons/下载的

创建两层列表drawable：

在drawable中文件ic_expand_more_expandable_list.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_expand_less_white_24dp"
        android:top="8dp"
        android:bottom="8dp"
 />
</layer-list>

在drawable中文件ic_expand_more_expandable_list.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_expand_more_white_24dp"
        android:top="8dp"
        android:bottom="8dp"
 />
</layer-list>

然后使用 then 作为你的状态：

drawable 中的文件 group_arrow.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_expand_less_expandable_list"
        android:state_expanded="true" />
    <item android:drawable="@drawable/ic_expand_more_expandable_list" />
</selector>

然后将其添加为 ExpandableListView 的分组指示符

android:groupIndicator="@drawable/group_arrow"

它在所有经过测试的分辨率下都能完美运行。