当前位置:   article > 正文

安卓实现微信聊天气泡

安卓实现微信聊天气泡

一搜没一个能用的,我来:

布局文件:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:layout_width="match_parent"
  5. android:layout_height="wrap_content">
  6. <TextView
  7. android:id="@+id/history_time"
  8. app:layout_constraintTop_toTopOf="parent"
  9. app:layout_constraintLeft_toLeftOf="parent"
  10. app:layout_constraintRight_toRightOf="parent"
  11. android:text="05月25日 22:14"
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"/>
  14. <com.xmkjsoft.xhgh.self.CircularImageView
  15. android:src="@color/main_color"
  16. android:id="@+id/head_img"
  17. app:layout_constraintTop_toBottomOf="@id/history_time"
  18. app:layout_constraintLeft_toLeftOf="parent"
  19. android:layout_width="40dp"
  20. android:layout_height="40dp"/>
  21. <!-- 聊天气泡中的内容,如文本、图片等 -->
  22. <TextView
  23. app:layout_constraintTop_toTopOf="@id/head_img"
  24. app:layout_constraintLeft_toRightOf="@id/head_img"
  25. app:layout_constraintRight_toRightOf="parent"
  26. android:background="@drawable/left_chat_bubble"
  27. android:layout_marginRight="20dp"
  28. android:id="@+id/message_text_left"
  29. android:layout_width="0dp"
  30. android:paddingLeft="20dp"
  31. android:paddingTop="5dp"
  32. android:paddingBottom="5dp"
  33. android:layout_height="wrap_content"
  34. android:text="这是一个左这是一个左这是一个左这是一个这是一个左这是一个左这是一个一个这是一个左这是一个左"
  35. android:textColor="@color/white"
  36. android:textSize="16sp" />
  37. <!--右消息-->
  38. <com.xmkjsoft.xhgh.self.CircularImageView
  39. android:layout_marginTop="20dp"
  40. android:src="@color/main_color"
  41. android:id="@+id/head_img_right"
  42. app:layout_constraintTop_toBottomOf="@id/message_text_left"
  43. app:layout_constraintRight_toRightOf="parent"
  44. android:layout_width="40dp"
  45. android:layout_height="40dp"/>
  46. <!-- 聊天气泡中的内容,如文本、图片等 -->
  47. <TextView
  48. app:layout_constraintTop_toTopOf="@id/head_img_right"
  49. app:layout_constraintRight_toLeftOf="@id/head_img_right"
  50. app:layout_constraintLeft_toLeftOf="parent"
  51. android:background="@drawable/right_chat_bubble"
  52. android:layout_marginLeft="20dp"
  53. android:id="@+id/message_text_right"
  54. android:layout_width="0dp"
  55. android:paddingRight="10dp"
  56. android:paddingLeft="10dp"
  57. android:paddingTop="5dp"
  58. android:paddingBottom="5dp"
  59. android:layout_height="wrap_content"
  60. android:text="这是一个左这是一个左这是一个左这是一个这是一个左这是一个左这是一个一个这是一个左这是一个左"
  61. android:textColor="@color/white"
  62. android:textSize="16sp" />
  63. <!-- <TextView-->
  64. <!-- android:background="@drawable/left_chat_bubble"-->
  65. <!-- android:layout_marginLeft="20dp"-->
  66. <!-- android:text="你好6666666666"-->
  67. <!-- -->
  68. <!-- android:layout_width="wrap_content"-->
  69. <!-- android:layout_height="wrap_content"/>-->
  70. </androidx.constraintlayout.widget.ConstraintLayout>

左边气泡 drawable 文件:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item>
  4. <layer-list>
  5. <item android:left="8dp">
  6. <shape>
  7. <corners android:radius="4dp" />
  8. <solid android:color="@color/main_color" />
  9. </shape>
  10. </item>
  11. </layer-list>
  12. </item>
  13. <item
  14. android:gravity="left|top"
  15. android:top="10dp">
  16. <rotate
  17. android:fromDegrees="45"
  18. android:pivotX="50%"
  19. android:pivotY="135%">
  20. <shape android:shape="rectangle">
  21. <size
  22. android:width="8dp"
  23. android:height="8dp" />
  24. <solid android:color="@color/main_color" />
  25. </shape>
  26. </rotate>
  27. </item>
  28. </layer-list>

右边气泡 drawable 文件:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item>
  4. <layer-list>
  5. <item android:right="8dp">
  6. <shape>
  7. <corners android:radius="4dp" />
  8. <solid android:color="#4CAF50" />
  9. </shape>
  10. </item>
  11. </layer-list>
  12. </item>
  13. <item
  14. android:gravity="right|top"
  15. android:top="0dp">
  16. <rotate
  17. android:fromDegrees="45"
  18. android:pivotX="-135%"
  19. android:pivotY="50%">
  20. <shape android:shape="rectangle">
  21. <size
  22. android:width="8dp"
  23. android:height="8dp" />
  24. <solid android:color="#4CAF50" />
  25. </shape>
  26. </rotate>
  27. </item>
  28. </layer-list>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/805923
推荐阅读
相关标签
  

闽ICP备14008679号