Как показать вид снизу над клавиатурой без изменения размера макетов в Android

#android #android-manifest #android-constraintlayout #android-softkeyboard

Вопрос:

Я разработал экран предварительного просмотра изображений, такой как 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

перед открытием клавиатуры

после открытия клавиатуры

Как этого добиться?

Комментарии:

1. Вы можете попробовать adjustResize как android:windowSoftInputMode вместо adjustPan в теге этого действия AndroidManifest.xml . adjustPan перемещает содержимое за пределы экрана и adjustResize изменяет размер содержимого, чтобы освободить место для клавиатуры, что, по-видимому, является вторым случаем. Вы также можете поиграть с макетом, зафиксировав верхнюю панель в ее положении и поместив другой контент ( ImageView , EditText ) в a ScrollView , тогда только ScrollView он будет двигаться вверх.

Ответ №1:

Один из вариантов состоит в том, чтобы, например, иметь a LinearLayout , который внутри содержит a 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>
 

Выход :

введите описание изображения здесьвведите описание изображения здесь

Комментарии:

1. Это не работает, если мы показываем viewpager внутри линейной компоновки

2. Это работает, мы должны установить ручную высоту для видоискателя