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

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

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

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

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

最简单的RecyclerView

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

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <TextView
    android:id="@+id/tv_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="12sp" />
  <TextView
    android:id="@+id/tv_comment"
    android:text="评论"
    android:textSize="14sp"
    android:layout_margin="5dip"
    android:textColor="@color/colorAccent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent" android:layout_height="300dip">
  <ImageView
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"/>
</RelativeLayout>

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

data class TopClass(val value: String)

实现一个adapter

class MainAdapter(private val beans: ArrayList<Any>, val context: Context) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
  var height = 0
  enum class TYPE(val value: Int) {
    TOP(0), NORMAL(1)
  }
  override fun onCreateViewHolder(parent: ViewGroup?, 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?, 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来进行占位

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1">
  </ScrollView>
  <View
    android:layout_width="match_parent"
    android:layout_height="0.5dip"
    android:background="#666666"></View>
  <LinearLayout
    android:id="@+id/dialog_layout_comment"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1"/>
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="确认"/>
  </LinearLayout>
</LinearLayout>

只有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<LinearLayout>(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<LinearLayout>(R.id.dialog_layout_comment))
  if (position == arrays.size - 1) {
    arrays.add(BottomClass(""))
    adapter?.height = dialog!!.findViewById<LinearLayout>(R.id.dialog_layout_comment).height
    adapter?.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?.notifyDataSetChanged()
      }
      dialog?.dismiss()
    }
  }
}

来看看最终效果

总结

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

(0)

相关推荐

  • Android仿微信实现评论功能

    在最近做的项目中有碰到要写类似朋友圈的模块,因为要实现评论点赞功能,这里说下我是怎么实现评论功能的. 首先先放上效果图 这里贴上我的代码: //给评论图标设置点击事件 mIv_header_discuss.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showPopupcomment(); } }); showPopupcomment()方法如下 private Po

  • Android 仿微信朋友圈点赞和评论弹出框功能

    贡献/下载源码:https://github.com/mmlovesyy/PopupWindowDemo 本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框 微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多"按钮,弹出对话框: 点击评论,弹出输入框,添加评论并在页面中实时显示: 微信朋友圈点赞和评论功能 2. 实际效果 本文将建一个 ListView,在其 Item 中简单模仿微信的布局,然后着重实现

  • Android中使用PopupWindow 仿微信点赞和评论弹出

    微信朋友圈的点赞和评论功能,有2个组成部分:左下角的"更多"按钮:点击该按钮后弹出的对话框: PopupWindow,弹出框使用PopupWindow实现,这是点赞和评论的载体,具体要涉及 PopupWindow 点击非窗口位置和再次点击消失以及显示位置的问题(根据相应更多按钮的位置确定 PopupWindow 的显示位置 package com.example.cmm.helloworld; import android.app.AlertDialog; import android

  • Android实现微信朋友圈评论EditText效果

    本文主要讲解实现微信朋友圈评论EditText效果思路,供大家参考,具体内容如下 效果图 当我们点击某一天朋友圈的评论是,列表也会跟随着滑动,使得键盘刚好在我们点击的那条评论上方 getWindow().getDecorView().getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout(

  • Android仿微信朋友圈点赞和评论功能

    最近在做朋友圈的项目,所以写一个Android仿朋友圈点赞和评论功能Demo,代码就是简单实现了一下功能,没有做优化,凑合看 图文排列是用的RecyclerView实现的,弹窗效果是用的自定义的PopupWindow,点赞应该是在本地请求数据库,设置一个flag,获取当前用户的id后,带着id向服务器post一个flag,评论就比较简单了,也是获取当前朋友id(或者昵称),带着内容,向服务器post 贴代码: package com.example.lenovo.dianzandemo; imp

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

    最近闲来无事,随便看看各种UI实现的代码 本文涉及到的相关代码已经上传到 https://github.com/r17171709/android_demo/tree/master/WeixinEditText 打开你的微信朋友圈,点击评论,你就会发现有一个小细节:文本输入框的高度恰好定位到这条信息的底部位置 这个实现起来其实很简单,咱们就来看看吧 最简单的RecyclerView 依然是先实现RecyclerView.跟朋友圈一样,我们也把头给加上去,这样我们在点第一条信息的时候,效果会更好一

  • Android仿微信朋友圈点击加号添加图片功能

    本文为大家分享了类似微信朋友圈,点击+号图片,可以加图片功能,供大家参考,具体内容如下 xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto

  • Android仿微信图片点击全屏效果

    废话不多说,先看下效果: 先是微信的 再是模仿的 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Intent传送,素材内容均来自网络,(感谢聪明的蘑菇) 图片都是Glide异步下的,下的,下的重要的事情说三次,然后就是用动画做放大操作然后显示出来了(并没有做下载原图的实现,反正也是一样 下载下来Set上去而且动画都不需要更简便). OK,我们来看分析下 obj,目录下分别创建了2个对象,一个用来使用来处理显示页面的图片尺寸信息以

  • Android仿微信右上角点击加号弹出PopupWindow

    本文实例为大家分享了Android仿微信右上角点击加号弹出展示的具体代码,供大家参考,具体内容如下 一.要弹出的布局,随便设计 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@drawable/my_ph

  • Android仿微信朋友圈图片选择器

    最近做开发需要解决一个模仿微信朋友圈附加图片的功能,具体要求如下: (1)从手机中最多选择3张图片,可拍照上传: (2)选择的图片可以点击移除然后再添加新图片: (3)可以在手机包含图片的各个文件夹中随意选择等. 本博客主要实现的是以上功能,其他诸如主界面布局.各种控件添加和提交功能等旨在说明问题,只做了简单处理,重点在图片选择添加部分.该功能的实现主要引用了一个图片加载的开源框架universal-image-loader. 其中截图如下: 为了不过于冗余,过滤了部分布局文件和资源文件,在这里

  • Android仿微信朋友圈全文、收起功能的实例代码

    前言 一般在社交APP中都有类似朋友圈的功能,其中发表的动态内容很长的时候不可能让它全部显示.这里就需要做一个仿微信朋友圈全文.收起功能来解决该问题.在网上看到一个例子-->http://www.jb51.net/article/105251.htm,写的很不错,但是有个bug,他这个Demo只有在条目固定的时候才正常,当增加.删除条目的时候会出现全文.收起显示混乱的问题.原因是他使用了固定的position作为key来保存当前显示的状态.这篇文章在他的基础上进行优化. 效果图 具体代码 (详细

  • Android仿微信朋友圈图片查看器

    再看文章之前,希望大家先打开自己的微信点到朋友圈中去,仔细观察是不是发现朋友圈里的有个"九宫格"的图片区域,点击图片又会跳到图片的详细查看页面,并且支持图片的滑动和缩放?这个功能是不是很常用呢?!那么我今天正好做了这个Demo,下面为大家讲解一下.首先按照惯例先看一下效果图吧,尤其不会录制gif动画(哎~没办法,模拟器不支持多点触控,刚好我的手机又没有Root,不能录屏,悲催啊,大家见谅,想要看真实效果的话,烦请移到文章最下方转载文章中进行源码下载,点击下载源码,运行后再看效果哈~~)

  • Android仿微信朋友圈实现滚动条下拉反弹效果

    微信朋友圈上面的图片封面,QQ空间说说上面的图片封面都有下拉反弹的效果,这些都是使用滚动条实现的.下拉,当松开时候,反弹至原来的位置.下拉时候能看到背景图片.那么这里简单介绍一下这种效果的实现. 1.效果图 这部手机显示的分辨率有限,很老的手机调试. 2.具有反弹效果BounceScrollView package com.org.scroll; import android.content.Context; import android.graphics.Rect; import androi

随机推荐