CoordinatorLayout layout_anchorGravity 不起作用？

Question

我正在尝试进行布局设计。在其中我设置了 anchorGravity 两个视图卡视图和工厂。 但晶圆厂位置正确，但卡片视图位置不正确。 我还附上了两张图片用于说明。 为什么会这样？ 我该如何解决？

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent">


<androidx.cardview.widget.CardView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_margin="25dp"
    android:src="@drawable/ic_outline_done_24"
    app:borderWidth="0dp"
    app:cardBackgroundColor="@color/colorAccent"
    app:elevation="6dp"
    app:layout_anchor="@id/left_layout"
    app:layout_anchorGravity="top|right">

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:src="@drawable/add"
        app:tint="@color/colorPrimary" />
</androidx.cardview.widget.CardView>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab_category"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="25dp"
    android:background="@color/blue"
    android:fitsSystemWindows="true"
    android:src="@drawable/ic_outline_done_24"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal"
    app:layout_anchor="@id/right_layout"
    app:layout_anchorGravity="top|right">

</com.google.android.material.floatingactionbutton.FloatingActionButton>


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

    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/account_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:background="@color/smallFont"
            android:orientation="vertical">

            <TextView
                android:id="@+id/accout_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="20dp"
                android:text="title"
                android:textColor="@color/white"
                android:textSize="20dp">

            </TextView>

            <TextView
                android:id="@+id/account_amount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:text="@string/amount"
                android:textColor="@color/white" />
        </LinearLayout>


    </LinearLayout>

    <LinearLayout
        android:id="@+id/right_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/cat_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="50dp"
            android:background="@color/blue"
            android:orientation="vertical">

            <TextView
                android:id="@+id/cat_title_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="20dp"
                android:text="Title"
                android:textColor="@color/white"
                android:textSize="20sp">

            </TextView>

            <TextView
                android:id="@+id/category_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:text="sub title"
                android:textColor="@color/white" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

我正在尝试不同的解决方案，但可以解决这个问题。

Answer 1

指定top|right 并锚定重力会将视图居中定位在锚视图的右上角/右上角。但是，如果锚视图与协调器布局的一侧对接，则被锚定的视图将向内移动。这是一个例子：

<androidx.coordinatorlayout.widget.CoordinatorLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">

    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="match_parent"
        android:layout_height="84dp"
        android:background="@android:color/holo_green_light"
        android:orientation="vertical" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="16dp"
        android:background="@android:color/holo_blue_light"
        app:layout_anchor="@id/left_layout"
        app:layout_anchorGravity="top|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

这就像您的 FAB。一切似乎都正常。现在让我们缩小 LinearLayout 的宽度并将其向下移动到布局的垂直中心，使其远离 CoordinatorLayout 的两侧。 （宽度的变化和移动到垂直中心是布局的唯一变化。）

<androidx.coordinatorlayout.widget.CoordinatorLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">

    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="200dp"
        android:layout_height="84dp"
        android:layout_gravity="center_vertical"
        android:background="@android:color/holo_green_light"
        android:orientation="vertical" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="16dp"
        android:background="@android:color/holo_blue_light"
        app:layout_anchor="@id/left_layout"
        app:layout_anchorGravity="top|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

如果指定的锚定没有碰到 CoordinatorLayout 的一侧，这就是它的作用。

如果我们将android:layout_gravity="bottom" 添加到视图中，那么这就是我们所看到的：

这样更好，但边距在哪里？以及为什么它仍然有效（某种程度上）？

如果可以的话，我建议你将left_layout LinearLayout 包裹在一个 FrameLayout 中，并使用布局重力来定位视图。

<androidx.coordinatorlayout.widget.CoordinatorLayout x
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">

    <FrameLayout
        android:layout_gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/left_layout"
            android:layout_width="200dp"
            android:layout_height="84dp"
            android:layout_gravity="center_vertical"
            android:background="@android:color/holo_green_light"
            android:orientation="vertical" />

        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="16dp"
            android:layout_gravity="top|end"
            android:background="@android:color/holo_blue_light" />

    </FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>