热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android仿微信朋友圈点击评论自动定位到相关行功能

这篇文章主要介绍了android仿微信朋友圈点击评论自动定位到相关行功能的实现,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

最近闲来无事,随便看看各种UI实现的代码

本文涉及到的相关代码已经上传到 https://github.com/r17171709/android_demo/tree/master/WeixinEditText

打开你的微信朋友圈,点击评论,你就会发现有一个小细节:文本输入框的高度恰好定位到这条信息的底部位置

这个实现起来其实很简单,咱们就来看看吧

最简单的RecyclerView

依然是先实现RecyclerView。跟朋友圈一样,我们也把头给加上去,这样我们在点第一条信息的时候,效果会更好一些

信息内容简单些,反正我们就看看效果

<&#63;xml version="1.0" encoding="utf-8"&#63;>

  
  

头部也很简单,就一张图片作为区分

<&#63;xml version="1.0" encoding="utf-8"&#63;>

  

消息内容就以string作为信息数据类型,头的数据类型为TopClass

data class TopClass(val value: String)

实现一个adapter

class MainAdapter(private val beans: ArrayList, val context: Context) : RecyclerView.Adapter() {
  var height = 0
  enum class TYPE(val value: Int) {
    TOP(0), NORMAL(1)
  }
  override fun onCreateViewHolder(parent: ViewGroup&#63;, viewType: Int): RecyclerView.ViewHolder {
    when(viewType) {
      TYPE.NORMAL.value -> {
        val view = LayoutInflater.from(context).inflate(R.layout.adapter_main, parent, false)
        return MainNormalViewHolder(view)
      }
      TYPE.TOP.value -> {
        val view = LayoutInflater.from(context).inflate(R.layout.adapter_top, parent, false)
        return MainTopViewHolder(view)
      }
    }
    throw Exception()
  }
  override fun getItemCount() = beans.size
  override fun onBindViewHolder(holder: RecyclerView.ViewHolder&#63;, position: Int) {
    if (holder != null) {
      when(getItemViewType(position)) {
        TYPE.NORMAL.value -> {
          (holder as MainNormalViewHolder).setText(beans[position] as String)
          holder.clickComment(holder.layoutPosition)
        }
        TYPE.TOP.value -> {}
      }
    }
  }
  override fun getItemViewType(position: Int): Int {
    when(beans[position]) {
      is String -> return TYPE.NORMAL.value
      is TopClass -> return TYPE.TOP.value
    }
    return super.getItemViewType(position)
  }
  inner class MainNormalViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    fun setText(text: String) {
      itemView.tv_title.text = text
    }
    fun clickComment(position: Int) {
      itemView.tv_comment.setOnClickListener {
        (context as MainActivity).showInputComment(itemView.tv_comment, position)
      }
    }
  }
  inner class MainTopViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}

这样一个列表就完成了

输入框的产生

这里有一个关键的地方,如何将EditText悬浮在键盘上,并且RecyclerView不会被挤上去。这里我们可以使用Dialog,同时在布局中要使用ScrollView来进行占位

<&#63;xml version="1.0" encoding="utf-8"&#63;>

  
  
  
  
    
    

只有ScrollView进行配合,才能实现我们的效果。

来看看效果

列表的滚动

输入框也有了,这时候就差滚动了。我们可以通过smoothScrollBy来让RecyclerView按X或者Y轴进行滚动。那我们这里到底应该滚动多少距离才对呢?,咱们来计算一下吧

图中红色部分为键盘展现之前某条信息评论区所在位置;蓝色部分为键盘,当键盘打开的时候,我们需要将红色的部分移动到黄色的位置。这样黄色顶部与红色顶部中间的区域高度,就是RecyclerView需要滚动的数值这样就好办了,我们使用getLocationOnScreen去获取差值,再加上评论区域高度就行了

fun showInputComment(commentView: View, position: Int) {
  // RV中评论区起始Y的位置
  val rvInputY = getY(commentView)
  val rvInputHeight = commentView.height
  dialog = Dialog(this, android.R.style.Theme_Translucent_NoTitleBar)
  dialog!!.setContentView(R.layout.dialog_comment)
  dialog!!.show()
  val handler = object : Handler() {}
  handler.postDelayed({
    // 对话框中的输入框Y的位置
    val dialogY = getY(dialog!!.findViewById(R.id.dialog_layout_comment))
    rv_main.smoothScrollBy(0, rvInputY - (dialogY - rvInputHeight))
  }, 300)
}
private fun getY(view: View): Int {
  val rect = IntArray(2)
  view.getLocationOnScreen(rect)
  return rect[1]
}

来看看效果

但是还有几个小问题,如果是点击最后一行的话,会因为滚动空间不足而不能实现相同的效果,并且按返回键的时候,键盘先消失,然后再按一次之后Dialog才消失。

针对第一个问题,我们直接添加一个空View作为列表最后一项即可,并且高度要等于输入框的高度;第二个问题也很简单,就是监听键盘弹出与隐藏时View高度发生的变化

data class BottomClass(val value: String)

点击的时候再添加

handler.postDelayed({
  // 对话框中的输入框Y的位置
  val dialogY = getY(dialog!!.findViewById(R.id.dialog_layout_comment))
  if (position == arrays.size - 1) {
    arrays.add(BottomClass(""))
    adapter&#63;.height = dialog!!.findViewById(R.id.dialog_layout_comment).height
    adapter&#63;.notifyDataSetChanged()
  }
  rv_main.smoothScrollBy(0, rvInputY - (dialogY - rvInputHeight))
}, 300)

关闭Dialog的时候删除这个对象

window.decorView.viewTreeObserver.addOnGlobalLayoutListener {
  val rect = Rect()
  window.decorView.getWindowVisibleDisplayFrame(rect)
  val displayHeight = rect.bottom - rect.top
  val height = window.decorView.height
  val keyboardHeight = height - displayHeight
  if (previousKeyboardHeight != keyboardHeight) {
    val hide = displayHeight.toDouble() / height > 0.8
    if (hide) {
      if (arrays[arrays.size - 1] is BottomClass) {
        arrays.removeAt(arrays.size - 1)
        adapter&#63;.notifyDataSetChanged()
      }
      dialog&#63;.dismiss()
    }
  }
}

来看看最终效果

总结

以上所述是小编给大家介绍的Android仿微信朋友圈点击评论自动定位到相关行功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 本文详细介绍如何在Android模拟器上安装TaintDroid的过程,包括解决源代码链接失效及服务器文件变动等问题,旨在帮助后续用户避免不必要的麻烦。 ... [详细]
  • 每位开发者都应该拥有一个展示自我技能与分享知识的空间——个人技术博客。本文将指导你如何使用静态网站生成器Hexo结合GitHub Pages搭建这样一个平台。 ... [详细]
  • APP数据包捕获挑战
    本文探讨了在使用Burp Suite捕获移动应用数据包时遇到的两大难题,尤其是SSL Pinning安全机制的影响,并提供了一种解决方案。 ... [详细]
  • 本文基于https://major.io/2014/05/13/coreos-vs-project-atomic-a-review/的内容,对CoreOS和Atomic两个操作系统进行了详细的对比,涵盖部署、管理和安全性等多个方面。 ... [详细]
  • 使用Docker部署Gitea自托管Git服务
    Gitea是由Gogs社区分叉而来的开源自托管Git服务,旨在提供一个更加灵活和易于维护的解决方案。本文将详细介绍如何利用Docker容器技术快速部署Gitea。 ... [详细]
  • Flutter 高德地图插件使用指南
    本文档详细介绍了如何在Flutter项目中集成和使用高德地图插件,包括安装、配置及基本使用方法。 ... [详细]
  • WorldWind源代码解析:瓦片调度机制详解
    本文深入探讨了WorldWind项目中的关键组件——瓦片调度策略。通过源代码分析,我们将了解摄像头移动时如何动态调整瓦片的加载与卸载,确保地图渲染的高效与流畅。 ... [详细]
  • 在上一期文章中,我们探讨了FastDev4Android项目中PullToRefreshListView组件的使用方法。本期将继续探讨该框架中的另一个重要组件——ACache数据缓存器,详细介绍其工作原理及如何在项目中有效利用。 ... [详细]
  • 本文档详细介绍了在Vue2项目中集成Vant v2组件库的方法,包括安装步骤、版本选择以及如何参考官方文档进行开发。同时提供了其他常用Vue组件库的链接,供开发者对比选择。 ... [详细]
  • 在现代前端开发中,组件化是提高代码复用性和维护性的关键。本文将通过一个具体的例子,展示如何使用Taro框架来封装一个音乐视频列表组件,重点介绍如何利用弹性布局(Flexbox)实现响应式设计。 ... [详细]
  • Linux 5.3内核正式发布并标记为稳定
    知名Linux内核开发者Greg Kroah-Hartman宣布,最新的Linux 5.3内核已正式标记为稳定版本,适用于大规模部署。该版本带来了多项新特性和改进,包括对最新硬件的支持和性能优化。 ... [详细]
  • 本系列课程全面覆盖Java基础知识,适合初学者系统学习。通过与《JavaGuider-Java篇》结合使用,可有效查漏补缺。后续将深入探讨框架和项目实践。 ... [详细]
  • 本文介绍了一种通过HTML和JavaScript实现的网页分享功能,支持多个社交平台,包括微信、新浪微博、QQ空间等,方便用户将网页内容快速分享至不同的社交网络。 ... [详细]
  • python第一天学习python
    1、python语言可使用的开发工具有:charles、fiddles等。。。2、语言分类:编译型和解释型,编译型如:c、c++、c#。。。。解释型:python、java、php ... [详细]
  • 中文分词是自然语言处理中的一个重要环节,由于中文没有明确的词边界标识,因此分词的准确性直接影响了后续处理的效果。常见的中文分词工具包括IK、jieba和THULAC等。本文将详细介绍如何在Elasticsearch中安装和使用IK分词器。 ... [详细]
author-avatar
cz小屁孩865
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有