android仿微信朋友圈點選評論自動定位到相關行
阿新 • • 發佈：2019-02-08
開啟你的微信朋友圈，點選評論，你就會發現有一個小細節：文字輸入框的高度恰好定位到這條資訊的底部位置
這個實現起來其實很簡單，咱們就來看看吧
最簡單的RecyclerView
依然是先實現RecyclerView。跟朋友圈一樣，我們也把頭給加上去，這樣我們在點第一條資訊的時候，效果會更好一些
資訊內容簡單些，反正我們就看看效果
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation 頭部也很簡單，就一張圖片作為區分
<?xml version="1.0" 訊息內容就以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()
}
}
}來看看最終效果
