自定义布局未使用约束布局在列表视图中居中

Posted 2023-04-19

【中文标题】自定义布局未使用约束布局在列表视图中居中

【英文标题】：Custom Layout is not being centered inside a listview using constraintLayout

【发布时间】：2019-11-24 22:50:20

【问题描述】：

我正在尝试将作为自定义视图的列表视图的项目居中到约束布局的中心，但它们只显示在左侧。

我尝试将约束和列表视图的水平偏差设置为 50 和 100，但列表视图仍然没有在中心或除开头以外的任何其他位置显示项目。我尝试使用layout_centerhorizontal="true"，但这也不起作用。请记住，listview 在fragment 内部膨胀，而ViewPager 在内部。

更新： 我通过将 custom_item xml 包装在一个线性布局中来修复它，该布局水平填充整个屏幕并为项目添加水平中心重心。

这是我的 xml：

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/parentConstraint_tutor_fragment_loged"
        android:layout_
        android:layout_
        android:layout_marginTop="32dp"
        android:layout_marginBottom="8dp"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0">

        <ListView
            android:id="@+id/tutorListView"
            android:layout_
            android:layout_
            android:divider="@null"
            android:dividerHeight="0dp"
            android:listSelector="@android:color/transparent"
            android:overScrollMode="never"
            android:scrollbars="none"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

这是 custom_Item：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:layout_gravity="center_horizontal"
    android:background="@drawable/tutor_entry_panel_phones_selector">

    <ImageView
        android:id="@+id/tutorIcon_cell"
        android:layout_
        android:layout_
        android:layout_marginStart="12dp"
        android:layout_marginLeft="12dp"
        android:scaleType="fitCenter"
        android:tint="@color/BlueColor"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/login_tutor_icon" />

    <TextView
        android:id="@+id/userLogin_nameTextV"
        android:layout_
        android:layout_
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="22dp"
        android:layout_marginRight="22dp"
        android:gravity="center"
        android:textColor="@color/BlueColor"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/deleteIconPhones"
        app:layout_constraintStart_toEndOf="@+id/tutorIcon_cell"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/deleteIconPhones"
        android:layout_
        android:layout_
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

我只需要列表视图中的自定义视图位于约束布局的中心。这是当前状态的屏幕截图：

https://ibb.co/88KVQvq

期望的状态将是 custom_item 在中间而不是在约束布局的开头：

https://ibb.co/XbtWJkw

custom_item 快照：

https://ibb.co/rkDXmGs

包含此片段的 viewpager 的蓝图视图（我试图让 custom_item 在 vi​​ewpager 的片段内居中）：

https://ibb.co/XVR02Kq

【问题讨论】：

你为什么给android:layout_width="0dp" android:layout_height="0dp"

@APP 使约束匹配其父大小，那些在父约束内。

【参考方案1】：

如果它是 custom_listView 则更改 custom_layout.xml - （无论您给出的布局名称是什么）并再次检查。

【讨论】：

我添加了custom_view的代码让你可以看到

在自定义列表视图中，您将在自定义布局中设计的内容将在主布局中显示为一行。

是的，我在 custom_xml 中添加了“android:layout_gravity="center_horizo​​ntal" 但它仍然无法正常工作。

【参考方案2】：

首先，<ConstraintLayout ...> 元素中的所有这些参数都是不必要的：

    android:layout_
    android:layout_
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"

它们没有任何意义。这些参数用于inside ConstraintLayout 的元素，而不是Layout 本身。布局填充所有可用空间（在活动的情况下，它是整个屏幕），无论您使用什么布局。一般在width/height中使用match_parent/wrap_content就可以了。

其次，根据您的屏幕，我无法说出 ViewPager 的位置。看起来 ViewPager 本身在整个活动中是左对齐的，但我不确定。如果是的话，那就是所有东西都向左侧挤压的原因。您可以在您的设备上激活开发者选项，然后找到并激活选项显示布局边界，然后您将在所有渲染元素的屏幕边框上看到并查看是否是这种情况。

此外，您的项目没有非常合适的布局。如果你想链接这三个元素，它们都应该有四个layout_constraintXxx_toYyyOf 元素。你可以找到它描述here。我不确定这是您问题的原因，但肯定是可能导致问题的原因。此外，除非你真的需要使用 ConstraintLayout，否则我建议在这里使用 LinearLayout，甚至只是设置了 drawableStart 和 drawableEnd 的纯文本/按钮。它是 TextView 类上的documented（Button 只是 TextView 的子类。）

【讨论】：

我拥有这些参数的原因是因为该约束布局位于另一个约束内按钮的右侧和 tabLayout 的顶部。

啊，好吧...我有一种感觉，您使这些视图变得比应有的复杂。我不确定您的屏幕截图中的视图寻呼机部分是什么，以便我可以帮助您如何简化它。

用viewpager在父布局的蓝图视图中添加了一张图片，也许你理解得更好。我正在尝试将 custom_item 居中在该 viewpager 内的片段（蓝图视图中的大矩形）中。

如果我理解正确的话，在 ViewPager 下你有 Fragment > ListView > ListView item > item 的内容。所以，让 ViewPager 在水平方向占据尽可能多的空间，然后从 Fragment 开始到层次结构的底部，尽可能缩小所有内容，并在可能的情况下将 Fragment 设置为在视图分页器内部水平居中。

稍微替代的方法是使 Fragment 也尽可能宽，然后在 ListView 级别上进行缩小和水平居中。您甚至可以更进一步，使 ListView 水平匹配父项，然后列表视图项中心内的内容水平对齐。无论哪种方式，您都需要从层次结构的顶层获取所有可用空间，然后在某个级别尽可能缩小并居中对齐该级别。