如何显示底部布局下方 50% 和底部布局上方 50% 的视图？

Question

我想显示一个视图，其中 50% 应覆盖锚点视图，其余 50% 应显示在视图上方。如果底部布局向上移动则发送媒体图标也向上移动

喜欢 Whatsapp 中的发送按钮。如何实现？

这是我的 XML 代码

    <?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_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/color_black"
    tools:context=".activities.MediaPreviewActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/media_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/color_white"/>


    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_20"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/back_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginStart="@dimen/margin_10"
            android:contentDescription="@null"
            app:srcCompat="@drawable/ic_back_arrow_white" />

        <com.contusfly.views.CircularImageView
            android:id="@+id/image_chat_picture"
            android:layout_width="@dimen/margin_30"
            android:layout_height="@dimen/margin_30"
            android:layout_marginStart="@dimen/margin_15"
            android:layout_toEndOf="@+id/back_arrow"
            android:contentDescription="@null"
            app:srcCompat="@drawable/ic_profile" />

        <ImageView
            android:id="@+id/delete_media"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:contentDescription="@null"
            android:padding="@dimen/margin_5"
            app:srcCompat="@drawable/ic_delete_media" />
    </RelativeLayout>

    <ImageView
        android:id="@+id/send_media"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@null"
        android:src="@drawable/ic_send_media"
        app:layout_constraintBottom_toTopOf="@+id/bottom_layout"
        app:layout_constraintEnd_toEndOf="parent" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/bottom_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:background="@color/color_black_opacity_55"
        android:focusable="true"
        android:focusableInTouchMode="true"
        app:layout_constraintBottom_toBottomOf="parent">
        
        <ImageView
            android:id="@+id/emoji"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_18"
            android:layout_marginEnd="@dimen/margin_15"
            android:layout_marginBottom="@dimen/margin_18"
            android:contentDescription="@null"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="@+id/image_caption"
            app:layout_constraintEnd_toStartOf="@+id/image_caption"
            app:layout_constraintStart_toStartOf="parent"
            app:srcCompat="@drawable/ic_emoji" />


        <io.github.rockerhieu.emojicon.EmojiconEditText
            android:id="@+id/image_caption"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_10"
            android:layout_marginBottom="@dimen/margin_10"
            android:background="@null"
            android:fontFamily="@font/sf_ui_display_regular"
            android:hint="@string/title_hint_caption"
            android:inputType="textMultiLine|textCapSentences"
            android:maxLines="6"
            android:paddingTop="@dimen/margin_15"
            android:paddingBottom="@dimen/margin_15"
            android:textColor="@color/color_white"
            android:textColorHint="@color/color_text_hint"
            android:textSize="@dimen/text_size_16"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/emoji" />
        
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

我想在上方显示 send_media 图像视图 bottom_layout 谁知道如何实现这个？

Answer 1

假设您所指的按钮是 send_media 您必须将其约束更改为：

<ImageView
    android:id="@+id/send_media"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@null"
    android:src="@drawable/ic_send_media"
    app:layout_constraintTop_toTopOf="@+id/bottom_layout"
    app:layout_constraintBottom_toTopOf="@+id/bottom_layout"
    app:layout_constraintEnd_toEndOf="parent" />

这样顶部和底部都被限制在 bottom_layout 的顶部，给你想要的结果。

如何显示底部布局下方 50% 和底部布局上方 50% 的视图？

How to show view 50% below bottom layout and 50% above bottom layout?

android

android-view

layout-anchor

android-constraintlayout