안 드 로 이 드 는 위 챗 모멘트 를 모방 하여 댓 글 을 클릭 하면 자동 으로 관련 줄 기능 을 찾 습 니 다.

요즘 은 한가 해서 여러 가지 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()
    }
  }
}

최종 효과 한번 볼 게 요.

총결산
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 안 드 로 이 드 모방 위 챗 친구 권 에서 댓 글 을 클릭 하면 자동 으로 관련 줄 기능 을 찾 을 수 있 습 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!