Блог

Я пытаюсь сделать дизайн макета .В которой я установил якорную гравитацию двух видов: вид карты и fab. но fab-это правильное положение, но вид карты-неправильное положение. Я также прилагаю два изображения для объяснения. Почему это происходит ?
Как я могу это решить ?

 <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>
 

Я пытаюсь найти другое решение, но могу решить эту проблему.

Указание и гравитация привязки 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>
 

Это похоже на твою сказку. Все, кажется, ведет себя прилично. Теперь давайте уменьшим ширину линейной компоновки и переместим ее вниз к вертикальному центру макета, чтобы отодвинуть ее от сторон компоновки. (Изменение ширины и перемещение к вертикальному центру-это единственные изменения в компоновке.)

 <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>
 

Это то, что делает указанная привязка, если она не упирается в одну из сторон области координат.

Если мы добавим android:layout_gravity="bottom" в представление, то это то, что мы видим:

Это лучше, но где маржа? И почему это все равно работает (вроде как)?

Если вы можете, я предлагаю вам обернуть left_layout линейную разметку в рамку и использовать гравитацию макета для позиционирования представления.

 <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>