如何在键盘上方显示底视图而不在Android中调整布局大小答案

【问题标题】：How show bottom view above key board without resizing layouts in Android如何在键盘上方显示底视图而不在Android中调整布局大小
【发布时间】：2021-06-11 07:02:23
【问题描述】：

我开发了一个像 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 行为

如何实现这样的？

【问题讨论】：

您可以在AndroidManifest.xml 的此活动标签中尝试将adjustResize 替换为android:windowSoftInputMode 而不是adjustPan。 adjustPan 将内容向上移出屏幕，adjustResize 调整内容大小以为键盘腾出空间，这似乎是第二种情况。您还可以通过将 TopBar 固定在其位置并将其他内容（ImageView、EditText）放在ScrollView 中来玩布局，然后只有ScrollView 会向上移动。

标签： android android-manifest android-constraintlayout android-softkeyboard

【解决方案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>

输出：

【讨论】：

如果我们在线性布局中显示 viewpager 将不起作用
它正在工作，我们必须为 viewpager 设置手动高度