Android 如何在不调整布局大小的情况下在键盘上方显示底部视图

Question

我开发了一个像 WhatsApp 一样的图像预览屏幕问题是当点击打开的描述编辑文本键盘时它会移动图像视图在键盘上方。我想实现当键盘打开时，底部布局应单独放置在键盘上方，其余布局应保持与 WhatsApp 相同的位置。

<?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="@color/black"
tools:context=".activities.MediaPreviewActivity">

<com.contusfly.views.CustomViewPager
    android:id="@+id/media_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.03" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.97" />

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/margin_20"
    app:layout_constraintEnd_toEndOf="@+id/guideline_right"
    app:layout_constraintStart_toStartOf="@+id/guideline_left"
    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"
        android:background="?attr/selectableItemBackground"
        android:foreground="?android:attr/selectableItemBackgroundBorderless"
        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:background="?attr/selectableItemBackground"
        android:foreground="?android:attr/selectableItemBackgroundBorderless"
        android:padding="@dimen/margin_5"
        app:srcCompat="@drawable/ic_delete_media" />
</RelativeLayout>


<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/bottom_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/color_black_opacity_55"
    android:focusable="true"
    android:focusableInTouchMode="true"
    app:layout_constraintBottom_toBottomOf="parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/left_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.03" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/right_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.97" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group_add_more"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:constraint_referenced_ids="add_more_media, separator_view"
        app:layout_constraintBottom_toBottomOf="@+id/image_caption"
        app:layout_constraintEnd_toStartOf="@+id/emoji"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/image_caption" />

    <ImageView
        android:id="@+id/add_more_media"
        android:layout_width="@dimen/margin_18"
        android:layout_height="@dimen/margin_18"
        android:contentDescription="@null"
        android:background="?attr/selectableItemBackground"
        android:foreground="?android:attr/selectableItemBackgroundBorderless"
        app:layout_constraintBottom_toBottomOf="@+id/image_caption"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toTopOf="@+id/image_caption"
        app:srcCompat="@drawable/ic_add_more_media" />

    <View
        android:id="@+id/separator_view"
        android:layout_width="@dimen/margin_0.5"
        android:layout_height="@dimen/margin_25"
        android:layout_marginStart="@dimen/margin_15"
        android:layout_marginEnd="@dimen/margin_15"
        android:background="@color/color_text_hint"
        app:layout_constraintBottom_toBottomOf="@+id/image_caption"
        app:layout_constraintEnd_toStartOf="@+id/emoji"
        app:layout_constraintStart_toEndOf="@+id/add_more_media"
        app:layout_constraintTop_toTopOf="@+id/image_caption" />

    <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:background="?attr/selectableItemBackground"
        android:foreground="?android:attr/selectableItemBackgroundBorderless"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@+id/image_caption"
        app:layout_constraintEnd_toStartOf="@+id/image_caption"
        app:layout_constraintStart_toEndOf="@+id/separator_view"
        app:srcCompat="@drawable/ic_emoji_black" />


    <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_marginEnd="@dimen/margin_60"
        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_toTopOf="@+id/group_to_user"
        app:layout_constraintEnd_toEndOf="@+id/right_guideline"
        app:layout_constraintStart_toEndOf="@+id/emoji" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group_to_user"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:constraint_referenced_ids="image_right_arrow, to_user_text_view"
        app:layout_constraintBottom_toBottomOf="@+id/to_user_text_view"
        app:layout_constraintEnd_toEndOf="@id/right_guideline"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toTopOf="@+id/to_user_text_view" />

    <ImageView
        android:id="@+id/image_right_arrow"
        android:layout_width="@dimen/padding_6"
        android:layout_height="@dimen/margin_9"
        android:layout_marginStart="@dimen/margin_12"
        android:layout_marginTop="@dimen/margin_10"
        android:layout_marginEnd="@dimen/margin_12"
        android:layout_marginBottom="@dimen/margin_10"
        android:contentDescription="@null"
        app:layout_constraintBottom_toBottomOf="@+id/to_user_text_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/to_user_text_view"
        app:srcCompat="@drawable/ic_right_arrow" />

    <TextView
        android:id="@+id/to_user_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/margin_10"
        android:layout_marginTop="@dimen/margin_20"
        android:layout_marginEnd="@dimen/margin_10"
        android:layout_marginBottom="@dimen/margin_10"
        android:fontFamily="@font/sf_ui_display_semi_bold"
        android:includeFontPadding="false"
        android:textColor="@color/color_text_black_bg"
        android:textSize="@dimen/text_size_13"
        app:layout_constraintBottom_toTopOf="@+id/images_preview_list"
        app:layout_constraintStart_toEndOf="@+id/image_right_arrow" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/images_preview_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:visibility="gone"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintBottom_toTopOf="@+id/emojicons" />


    <FrameLayout
        android:id="@+id/emojicons"
        android:layout_width="match_parent"
        android:layout_height="@dimen/margin_250"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<ImageView
    android:id="@+id/send_media"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@null"
    android:background="?attr/selectableItemBackground"
    android:foreground="?android:attr/selectableItemBackgroundBorderless"
    android:src="@drawable/ic_send_media"
    app:layout_constraintBottom_toTopOf="@+id/bottom_layout"
    app:layout_constraintEnd_toEndOf="@id/guideline_right"
    app:layout_constraintTop_toTopOf="@+id/bottom_layout" />
 </androidx.constraintlayout.widget.ConstraintLayout>

和这样的清单文件

  <activity
        android:name=".activities.MediaPreviewActivity"
        android:configChanges="orientation|screenSize|keyboardHidden"
        android:windowSoftInputMode="stateVisible|adjustResize" />

参考当前行为

WhatsApp 行为

如何实现这样的？

Answer 1

例如，一个选项是 LinearLayout，里面包含一个 ScrollView，其中包含您要显示的所有数据，然后在 ScrollView 之外，您可以看到您想要的视图粘在键盘上。

布局示例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >

            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 1"
                />

            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 2"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 3"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 4"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 5"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 6"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 7"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 8"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 9"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 10"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 11"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 12"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 13"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 14"
                />

        </LinearLayout>

    </ScrollView>

    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn"/>

</LinearLayout>

输出：

Android 如何在不调整布局大小的情况下在键盘上方显示底部视图

How show bottom view above key board without resizing layouts in Android

android

android-manifest

android-softkeyboard

android-constraintlayout