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


相关文章
|
3月前
|
SQL 人工智能 Dart
Android Studio的插件生态非常丰富
Android Studio的插件生态非常丰富
196 1
|
3月前
|
Ubuntu Linux Android开发
Android Studio支持多种操作系统
Android Studio支持多种操作系统
192 1
|
24天前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
76 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
3天前
|
Android开发 开发者 Kotlin
Android实战经验之Kotlin中快速实现MVI架构
MVI架构通过单向数据流和不可变状态,提供了一种清晰、可预测的状态管理方式。在Kotlin中实现MVI架构,不仅提高了代码的可维护性和可测试性,还能更好地应对复杂的UI交互和状态管理。通过本文的介绍,希望开发者能够掌握MVI架构的核心思想,并在实际项目中灵活应用。
21 8
|
23天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
48 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
4月前
|
缓存 搜索推荐 Android开发
安卓开发中的自定义控件实践
【10月更文挑战第4天】在安卓开发的海洋中,自定义控件是那片璀璨的星辰。它不仅让应用界面设计变得丰富多彩,还提升了用户体验。本文将带你探索自定义控件的核心概念、实现过程以及优化技巧,让你的应用在众多竞争者中脱颖而出。
|
1月前
|
编译器 Android开发 开发者
Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
Lambda表达式和匿名函数都是Kotlin中强大的特性,帮助开发者编写简洁而高效的代码。理解它们的区别和适用场景,有助于选择最合适的方式来解决问题。希望本文的详细讲解和示例能够帮助你在Kotlin开发中更好地运用这些特性。
38 9
|
2月前
|
搜索推荐 Android开发 开发者
安卓应用开发中的自定义控件实践
在安卓应用开发的广阔天地中,自定义控件如同璀璨的星辰,点亮了用户界面设计的夜空。它们不仅丰富了交互体验,更赋予了应用独特的个性。本文将带你领略自定义控件的魅力,从基础概念到实际应用,一步步揭示其背后的原理与技术细节。我们将通过一个简单的例子——打造一个具有独特动画效果的按钮,来展现自定义控件的强大功能和灵活性。无论你是初学者还是资深开发者,这篇文章都将为你打开一扇通往更高阶UI设计的大门。
|
3月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
95 8
|
3月前
|
数据可视化 开发工具 Android开发
Android Studio
Android Studio
275 1

热门文章

最新文章

  • 1
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    Android历史版本与APK文件结构
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 4
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 5
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 6
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 9
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 10
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥