Android Studio 制作聊天界面实践(Kotlin版)

简介: Android Studio 制作聊天界面实践(Kotlin版)

Android Studio 制作聊天界面实践


我们先看看效果


image.png


先创建文件,在阿里网站找到聊天气泡图片,https://www.iconfont.cn/

image.png

把图片放入到drawable里面,在bulid.gradle中写入,classpath 'com.android.tools.build:gradle:3.4.1'(要用RecyclerView)



image.png


然后在activity_main.xml中写



<LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:background="@drawable/message_left"/>


发现图片被强行压缩了

image.png

然后开始写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完成了


image.png


相关文章
|
1月前
|
SQL 人工智能 Dart
Android Studio的插件生态非常丰富
Android Studio的插件生态非常丰富
44 1
|
1月前
|
Ubuntu Linux Android开发
Android Studio支持多种操作系统
Android Studio支持多种操作系统
60 1
|
2月前
|
缓存 搜索推荐 Android开发
安卓开发中的自定义控件实践
【10月更文挑战第4天】在安卓开发的海洋中,自定义控件是那片璀璨的星辰。它不仅让应用界面设计变得丰富多彩,还提升了用户体验。本文将带你探索自定义控件的核心概念、实现过程以及优化技巧,让你的应用在众多竞争者中脱颖而出。
|
18天前
|
搜索推荐 Android开发 开发者
安卓应用开发中的自定义控件实践
在安卓应用开发的广阔天地中,自定义控件如同璀璨的星辰,点亮了用户界面设计的夜空。它们不仅丰富了交互体验,更赋予了应用独特的个性。本文将带你领略自定义控件的魅力,从基础概念到实际应用,一步步揭示其背后的原理与技术细节。我们将通过一个简单的例子——打造一个具有独特动画效果的按钮,来展现自定义控件的强大功能和灵活性。无论你是初学者还是资深开发者,这篇文章都将为你打开一扇通往更高阶UI设计的大门。
|
1月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
49 8
|
1月前
|
数据可视化 开发工具 Android开发
Android Studio
Android Studio
90 1
|
2月前
|
存储 前端开发 测试技术
Android kotlin MVVM 架构简单示例入门
Android kotlin MVVM 架构简单示例入门
38 1
|
2月前
|
调度 Android开发 开发者
构建高效Android应用:探究Kotlin多线程优化策略
【10月更文挑战第11天】本文探讨了如何在Kotlin中实现高效的多线程方案,特别是在Android应用开发中。通过介绍Kotlin协程的基础知识、异步数据加载的实际案例,以及合理使用不同调度器的方法,帮助开发者提升应用性能和用户体验。
64 4
|
1月前
|
前端开发 Android开发 UED
安卓应用开发中的自定义控件实践
【10月更文挑战第35天】在移动应用开发中,自定义控件是提升用户体验、增强界面表现力的重要手段。本文将通过一个安卓自定义控件的创建过程,展示如何从零开始构建一个具有交互功能的自定义视图。我们将探索关键概念和步骤,包括继承View类、处理测量与布局、绘制以及事件处理。最终,我们将实现一个简单的圆形进度条,并分析其性能优化。
|
2月前
|
JSON 调度 数据库
Android面试之5个Kotlin深度面试题:协程、密封类和高阶函数
本文首发于公众号“AntDream”,欢迎微信搜索“AntDream”或扫描文章底部二维码关注,和我一起每天进步一点点。文章详细解析了Kotlin中的协程、扩展函数、高阶函数、密封类及`inline`和`reified`关键字在Android开发中的应用,帮助读者更好地理解和使用这些特性。
34 1