Android Studio 制作聊天界面实践
我们先看看效果
先创建文件，在阿里网站找到聊天气泡图片，https://www.iconfont.cn/
把图片放入到drawable里面，在bulid.gradle中写入，classpath 'com.android.tools.build:gradle:3.4.1'（要用RecyclerView）
然后在activity_main.xml中写
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:background="@drawable/message_left"/>
发现图片被强行压缩了
然后开始写activity_main.xml了
<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#d8e0e8"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:background="@drawable/message_left"/><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recyclerView"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><EditTextandroid:id="@+id/inputText"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:hint="Type something here"android:maxLines="2"/><Buttonandroid:id="@+id/send"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Send"/></LinearLayout></LinearLayout>
然后在app -> src -> main -> com -> 里面新建Msg类文件 写入代码
packagecom.example.uibestpracticeclassMsg(valcontent: String, valtype: Int) { companionobject { constvalTYPE_RECEIVED=0constvalTYPE_SENT=1 } }
然后在app -> src -> main -> res -> layout -> 里面新建message_left_item.xml文件 写入代码
<?xmlversion="1.0"encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content"android:padding="10dp"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"android:background="@drawable/message_left"><TextViewandroid:id="@+id/leftMsg"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_margin="10dp"android:textColor="#fff"/></LinearLayout></FrameLayout>
然后在app -> src -> main -> res -> layout -> 里面新建message_rigtn_item.xml文件 写入代码
<?xmlversion="1.0"encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content"android:padding="10dp"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:background="@drawable/message_right"><TextViewandroid:id="@+id/rightMsg"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_margin="10dp"android:textColor="#000"/></LinearLayout></FrameLayout>
然后在app -> src -> main -> com -> 里面新建MsgAdapter类文件、MsgViewHolder.kt、Result 写入代码
packagecom.example.uibestpracticeimportandroid.view.LayoutInflaterimportandroid.view.ViewGroupimportandroidx.recyclerview.widget.RecyclerViewclassMsgAdapter(valmsgList: List<Msg>) : RecyclerView.Adapter<MsgViewHolder>() { overridefungetItemViewType(position: Int): Int { valmsg=msgList[position] returnmsg.type } overridefunonCreateViewHolder(parent: ViewGroup, viewType: Int) =if (viewType==Msg.TYPE_RECEIVED) { valview=LayoutInflater.from(parent.context).inflate(R.layout.msg_left_item, parent, false) LeftViewHolder(view) } else { valview=LayoutInflater.from(parent.context).inflate(R.layout.msg_right_item, parent, false) RightViewHolder(view) } overridefunonBindViewHolder(holder: MsgViewHolder, position: Int) { valmsg=msgList[position] when (holder) { isLeftViewHolder->holder.leftMsg.text=msg.contentisRightViewHolder->holder.rightMsg.text=msg.content } } overridefungetItemCount() =msgList.size}
packagecom.example.uibestpracticeimportandroid.view.Viewimportandroid.widget.TextViewimportandroidx.recyclerview.widget.RecyclerViewsealedclassMsgViewHolder(view: View) : RecyclerView.ViewHolder(view) classLeftViewHolder(view: View) : MsgViewHolder(view) { valleftMsg: TextView=view.findViewById(R.id.leftMsg) } classRightViewHolder(view: View) : MsgViewHolder(view) { valrightMsg: TextView=view.findViewById(R.id.rightMsg) } packagecom.example.uibestpracticesealedclassResultclassSuccess(valmsg: String) : Result() classFailure(valerror: Exception) : Result() fungetResultMsg(result: Result) =when (result) { isSuccess->result.msgisFailure->"Error is ${result.error.message}"}
最后修改MainActivity，写上代码
packagecom.example.uibestpracticeimportandroidx.appcompat.app.AppCompatActivityimportandroid.os.Bundleimportandroid.view.Viewimportandroidx.recyclerview.widget.LinearLayoutManagerimportkotlinx.android.synthetic.main.activity_main.*classMainActivity : AppCompatActivity(), View.OnClickListener { privatevalmsgList=ArrayList<Msg>() privatelateinitvaradapter: MsgAdapteroverridefunonCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) initMsg() vallayoutManager=LinearLayoutManager(this) recyclerView.layoutManager=layoutManagerif (!::adapter.isInitialized) { adapter=MsgAdapter(msgList) } recyclerView.adapter=adaptersend.setOnClickListener(this) } overridefunonClick(v: View?) { when (v) { send-> { valcontent=inputText.text.toString() if (content.isNotEmpty()) { valmsg=Msg(content, Msg.TYPE_SENT) msgList.add(msg) adapter.notifyItemInserted(msgList.size-1) // 当有新消息时，刷新RecyclerView中的显示recyclerView.scrollToPosition(msgList.size-1) // 将RecyclerView定位到最后一行inputText.setText("") // 清空输入框中的内容 } } } } privatefuninitMsg() { valmsg1=Msg("Hello guy.", Msg.TYPE_RECEIVED) msgList.add(msg1) valmsg2=Msg("Hello. Who is that?", Msg.TYPE_SENT) msgList.add(msg2) valmsg3=Msg("This is Tom. Nice talking to you. ", Msg.TYPE_RECEIVED) msgList.add(msg3) } }
点击运行，ok完成了
