目前還只能自言自語,日后會考慮使用圖靈機器人的API寫一個完整的AI聊天程序
效果
image
image
布局源碼
整體布局activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="16dp"
android:text="只會說一句話的聊天機器人"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="18sp" />o
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bottom_background">
<EditText
android:id="@+id/editText"
style="@style/Widget.AppCompat.AutoCompleteTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="@null"
android:layout_gravity="center"
android:hint="@string/hint_text"
android:maxLines="2" />
<Button
android:id="@+id/send_button"
style="@style/Widget.AppCompat.Button.Borderless.Colored"
android:textColor="#42D363"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/send" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
左聊天氣泡布局msg_left_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="100dp"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_margin="5dp"
android:background="@drawable/left_chat">
<TextView
android:id="@+id/leftText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="#191919"
android:textSize="16dp" />
</LinearLayout>
</FrameLayout>
右聊天氣泡布局msg_right_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="5dp"
android:background="@drawable/right_chat">
<TextView
android:id="@+id/rightText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textColor="#fff"
android:textSize="16dp" />
</LinearLayout>
</FrameLayout>
邏輯實現(xiàn)MainActivity.kt
package com.example.chatui
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.LinearLayout
import android.widget.TextView
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.activity_main.*
import org.w3c.dom.Text
import java.lang.IllegalArgumentException
//定義消息的實體類
class Msg(val content:String,val type:Int){
//定義靜態(tài)成員
companion object{
const val RIGHT = 0
const val LEFT = 1
}
};
class MainActivity : AppCompatActivity() {
//建立消息數(shù)據(jù)列表
private val msgList = ArrayList<Msg>()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
supportActionBar?.hide() //隱藏頂部狀態(tài)欄
initMsg() //初始化聊天機器人的見面語
recyclerView.layoutManager = LinearLayoutManager(this) //布局為線性垂直
val adapter = MsgAdapter(msgList) //建立適配器實例
recyclerView.adapter = adapter //傳入適配器
send_button.setOnClickListener{
val content:String = editText.text.toString() //獲取輸入框的文本
if(content.isNotEmpty()){
msgList.add(Msg(content,Msg.RIGHT)) //將輸入的消息及其類型添加進消息數(shù)據(jù)列表中
adapter.notifyItemInserted(msgList.size-1) //為RecyclerView添加末尾子項
recyclerView.scrollToPosition(msgList.size-1) //跳轉(zhuǎn)到當前位置
editText.setText("") //清空輸入框文本
}
}
}
fun initMsg(){
msgList.add(Msg("Hello",Msg.LEFT))
}
}
class MsgAdapter(val msgList:List<Msg>):RecyclerView.Adapter<RecyclerView.ViewHolder>(){
//載入右聊天框布局控件
inner class RightViewHolder(val view: View):RecyclerView.ViewHolder(view){
val rightMsg: TextView = view.findViewById(R.id.rightText)
}
//載入左聊天框布局控件
inner class LeftViewHolder(val view:View):RecyclerView.ViewHolder(view){
val leftMsg:TextView = view.findViewById(R.id.leftText)
}
//獲取消息類型(左或者右),返回到onCreateViewHolder()方法的viewType參數(shù)里面
override fun getItemViewType(position: Int): Int {
val msg = msgList[position] //根據(jù)當前數(shù)據(jù)源的元素類型
return msg.type
}
//根據(jù)viewType消息類型的不同,構(gòu)建不同的消息布局(左&右)
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
if(viewType==Msg.LEFT){
val leftView = LayoutInflater.from(parent.context).inflate(R.layout.msg_left_layout,parent,false)
return LeftViewHolder(leftView) //返回控件+布局
}else{
val rightView = LayoutInflater.from(parent.context).inflate(R.layout.msg_right_layout,parent,false)
return RightViewHolder(rightView)
}
}
//對聊天控件的消息文本進行賦值
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
val msg = msgList[position]
when(holder){
is LeftViewHolder -> holder.leftMsg.text = msg.content
is RightViewHolder -> holder.rightMsg.text = msg.content
else -> throw IllegalArgumentException()
}
}
//返回項數(shù)
override fun getItemCount(): Int {
return msgList.size
}
}
