You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

实现类Telegram聊天页面:键盘弹出时仅消息区上滑且输入栏固定

实现类似Telegram的聊天页面布局与键盘适配方案

核心问题分析

你当前的布局用NestedScrollView嵌套RecyclerView,且给RecyclerView设置了固定高度640dp,这会导致两个关键问题:

  • 滚动冲突:RecyclerView的原生滚动会被外层NestedScrollView干扰,输入栏无法固定在底部
  • 布局适配失效:固定高度无法随键盘弹出动态调整可用空间

解决方案步骤

1. 重构布局结构

直接用ConstraintLayout作为根布局,移除NestedScrollView,让RecyclerView填充输入栏上方的剩余空间,输入栏固定在屏幕底部。修改后的布局如下:

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".view.MessageActivity">

        <!-- App Bar 固定在顶部,保持不动 -->
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent">

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"/>
        </com.google.android.material.appbar.AppBarLayout>

        <!-- 消息列表,填充AppBar和输入栏之间的所有空间 -->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/messageRecycler"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintTop_toBottomOf="@id/appBar"
            app:layout_constraintBottom_toTopOf="@id/bottom"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <!-- 底部输入栏,固定在屏幕底部 -->
        <LinearLayout
            android:id="@+id/bottom"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@drawable/back"
            android:gravity="center"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

            <EditText
                android:id="@+id/writeMessage"
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:layout_marginHorizontal="10dp"
                android:layout_weight="6"
                android:hint="@string/type_here"
                android:importantForAutofill="no"
                android:inputType="text"
                android:padding="5dp"
                tools:ignore="Suspicious0dp"/>

            <ImageView
                android:id="@+id/sendImage"
                android:layout_width="0dp"
                android:layout_height="45dp"
                android:layout_gravity="center"
                android:layout_marginEnd="5dp"
                android:layout_weight="1"
                android:background="@drawable/send"
                android:contentDescription="@string/todo"/>
        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

2. 配置WindowSoftInputMode

在AndroidManifest.xml的MessageActivity标签中添加窗口属性,确保键盘弹出时系统调整布局大小而非平移:

<activity
    android:name=".view.MessageActivity"
    android:windowSoftInputMode="adjustResize|stateHidden"/>
  • adjustResize:键盘弹出时,系统会自动调整布局高度,让输入栏始终停留在键盘上方
  • stateHidden:默认启动页面时隐藏键盘,可根据需求改为stateVisible

3. 简化RecyclerView滚动逻辑

移除原有的复杂布局监听逻辑,改用更精准的滚动控制:

// 初始化RecyclerView布局管理器(设置reverseLayout=true让新消息在底部)
val myLayoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, true)
binding.messageRecycler.layoutManager = myLayoutManager

// 监听布局变化,处理键盘弹出时的滚动
binding.messageRecycler.addOnLayoutChangeListener { _, _, _, _, bottom, _, _, _, oldBottom ->
    // 仅当键盘弹出(bottom < oldBottom)且当前处于列表底部时,自动滚动到底部
    val isAtBottom = myLayoutManager.findLastCompletelyVisibleItemPosition() == messageArrayList.size - 1
    if (bottom < oldBottom && isAtBottom) {
        binding.messageRecycler.post {
            binding.messageRecycler.smoothScrollToPosition(messageArrayList.size - 1)
        }
    }
}

// 发送消息后直接滚动到底部
fun sendMessage() {
    // 添加消息到messageArrayList的逻辑...
    binding.messageRecycler.smoothScrollToPosition(messageArrayList.size - 1)
}

关键说明

  • 移除NestedScrollView:RecyclerView本身具备完整的滚动能力,嵌套会导致触摸事件冲突,且无法实现输入栏固定
  • 动态高度设置:给RecyclerView设置layout_height="0dp",配合约束让它填充剩余空间,键盘弹出时会自动挤压RecyclerView的高度,输入栏保持在底部
  • 滚动逻辑简化:仅在必要场景(键盘弹出且已在底部)自动滚动,避免不必要的位置跳转,完全匹配Telegram的交互逻辑

内容的提问来源于stack exchange,提问作者Kanan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.06 14:45:58