iis服务器助手广告
返回顶部
首页 > 资讯 > 移动开发 >AndroidRecycleView和线型布局制作聊天布局
  • 217
分享到

AndroidRecycleView和线型布局制作聊天布局

2024-04-02 19:04:59 217人浏览 独家记忆
摘要

目录一、首先在主布局中,用帧布局来填充 RecycleView 和 两个模拟发送消息的Button二、在一个布局中,加载左边好友发送消息的布局,然后是自己发送消息的右边布局三、在Ms

一、首先在主布局中,用帧布局来填充 RecycleView 和 两个模拟发送消息的Button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".item_recycleview.MainActivityrecycle">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/test_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/test_click1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginLeft="20dp"
            android:layout_marginBottom="150dp"
            android:text="模拟插入对方消息" />
<EditText
    android:id="@+id/input_me"
    android:layout_gravity="bottom"
    android:layout_marginLeft="220dp"
    android:layout_marginBottom="190dp"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:hint="请输入消息"/>
        <Button
            android:id="@+id/test_click"
            android:layout_width="203Dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginLeft="220dp"
            android:layout_marginBottom="150dp"
            android:text="插入我发送的消息" />
    </FrameLayout>

</LinearLayout>

如下图所示:

主布局

二、在一个布局中,加载左边好友发送消息的布局,然后是自己发送消息的右边布局

 <?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

    </data>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/from_use"
                android:background="#FF0067"
                android:layout_width="wrap_content"
                android:layout_height="24dp"
                android:text="张三:"
                android:layout_marginLeft="10dp"
                android:textColor="@color/black"
                android:textSize="18dp" />

            <TextView
                android:id="@+id/from_mesg"
                android:background="@drawable/Good"
                android:layout_width="wrap_content"
                android:textSize="20sp"
                android:gravity="left|center"
                android:maxWidth="332dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:layout_height="wrap_content"
                android:textColor="@color/black"
                android:text="报告李四,我收到你的消息了"
                tools:ignore="RtlHardcoded" />

        </LinearLayout>
    </LinearLayout>
</layout>

如图所示:

左布局

右边的布局

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

    </data>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/from_self_mesg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="65dp"
                android:background="@drawable/blue_p"
                android:gravity="left|center"
                android:maxWidth="332dp"
                android:paddingLeft="10dp"
                android:text="好的!!你最近过得怎么样?"
                android:textColor="@color/black" />

            <TextView
                android:id="@+id/from_self"
                android:background="@color/purple_700"
                android:layout_width="wrap_content"
                android:layout_height="23dp"
                android:layout_alignParentRight="true"
                android:text="李四"
                android:layout_marginRight="8dp"
                android:textColor="@color/black"
                android:textSize="15dp" />

        </RelativeLayout>
    </LinearLayout>
</layout>

如图所示:

在这里插入图片描述

三、在MsgRecyclerViewActivity 中绑定控件和适配器

package com.example.mychat_layout.updata;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.example.mychat_layout.R;
import java.util.ArrayList;
import java.util.List;

public class MsgRecyclerViewActivity extends AppCompatActivity {
    private List<Msg> msgList = new ArrayList<>();
    private EditText inputText;
    private Button send, mTestClick;
    private RecyclerView msgRecyclerView;
    private MsgAdapter adapter;
    private RecyclerView mTestView;
    private Button mTestClick1;
    private EditText mInputMe;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_activityrecycle);
        initView();
    }
    private void initView() {
        //编辑文字
        mInputMe = (EditText) findViewById(R.id.input_me);
        msgRecyclerView = (RecyclerView) findViewById(R.id.test_view);
        mTestClick = (Button) findViewById(R.id.test_click);
        //初始化布局管理器
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        msgRecyclerView.setLayoutManager(layoutManager);
        //初始化适配器
        adapter = new MsgAdapter(msgList);
        msgRecyclerView.setAdapter(adapter);
        send = findViewById(R.id.test_click1);//左

    }
    @Override
    protected void onResume() {
        super.onResume();
        send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //此处的content的内容可以来自服务器接收到的消息,不能再主线程运行
                Msg msg = new Msg("很好笑", Msg.TYPEE_RECEIVED);
                msg.setFromname("张三");
                msgList.add(msg);
                adapter.notifyItemInserted(msgList.size() - 1);//当有新消息时,刷新RecyclerView中的显示
                msgRecyclerView.scrollToPosition(msgList.size() - 1); //将RecyclerView定位到最后一行

            }
        });
        mTestClick.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                String me_send=mInputMe.getText().toString().trim();
                Msg msg = new Msg(me_send, Msg.TYPE_SENT);
                msg.setToname("李四");
                msgList.add(msg);
                adapter.notifyItemInserted(msgList.size() - 1);//当有新消息时,刷新RecyclerView中的显示
                msgRecyclerView.scrollToPosition(msgList.size() - 1); //将RecyclerView定位到最后一行
                Log.e("ok", "onClick: " + "插入");
                mInputMe.setText("");
            }
        });
    }
}


四、设置适配器

package com.example.mychat_layout.updata;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.example.mychat_layout.R;

import java.util.ArrayList;
import java.util.List;

public class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.MyViewHolder> {
    public List<Msg> msgList=new ArrayList<>();

    public static class MyViewHolder extends RecyclerView.ViewHolder{
        LinearLayout leftLayout;
        LinearLayout rightLayout;
        TextView leftMsg,rightMsg;
        TextView leftMsg_use,rightMsg_use;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            leftLayout=(LinearLayout)itemView.findViewById(R.id.chat_left);
            rightLayout=(LinearLayout)itemView.findViewById(R.id.chat_right);

            leftMsg=(TextView)itemView.findViewById(R.id.from_mesg);
            leftMsg_use=(TextView)itemView.findViewById(R.id.from_use);

            rightMsg=(TextView)itemView.findViewById(R.id.from_self_mesg);
            rightMsg_use=(TextView)itemView.findViewById(R.id.from_self);
        }
    }

    public MsgAdapter(List<Msg> data){ //构造函数
        msgList=data;
    }

    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.item_chat,parent,false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) { //替换视图内容

        Msg msg=msgList.get(position);
        if (msg.getType()==Msg.TYPEE_RECEIVED)
        {
            //如果收到的消息,则显示左边的消息布局,将右边的消息布局隐藏
            holder.leftLayout.setVisibility(View.VISIBLE);
            holder.rightLayout.setVisibility(View.GONE);
            holder.leftMsg_use.setText(msg.getFromname());
            holder.leftMsg.setText(msg.getContent());
        }
        else if(msg.getType()==Msg.TYPE_SENT)
        {
            //如果是发出的消息,则显示右边的消息布局,将左边的消息布局隐藏
            holder.rightLayout.setVisibility(View.VISIBLE);
            holder.leftLayout.setVisibility(View.GONE);
            holder.rightMsg_use.setText(msg.getToname());
            holder.rightMsg.setText(msg.getContent());
        }
    }

    @Override
    public int getItemCount() {
        return msgList.size();
    }
}


消息的实体类

package com.example.mychat_layout.updata;

public class Msg {
    public static final int TYPEE_RECEIVED=0;
    public static final int TYPE_SENT=1;
    private String content;
    private String toname;

    public String getToname() {
        return toname;
    }

    public void setToname(String toname) {
        this.toname = toname;
    }

    public String getFromname() {
        return fromname;
    }

    public void setFromname(String fromname) {
        this.fromname = fromname;
    }

    private String fromname;
    private int type;

    public Msg(String content, int type)
    {
        this.content=content;
        this.type=type;
    }
    public String getContent()
    {
        return content;
    }
    public int getType()
    {
        return type;
    }
}


最后打工告成
部分逻辑思想来自简书的网友大佬,本人只是简单的加工了其他逻辑,部分逻辑思想来自简书的网友大佬,本人只是简单的加工了其他逻辑,部分逻辑思想来自简书的网友大佬,本人只是简单的加工了其他逻辑

总结

到此这篇关于Android RecycleView和线型布局制作聊天布局的文章就介绍到这了,更多相关Android制作聊天布局内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: AndroidRecycleView和线型布局制作聊天布局

本文链接: https://www.lsjlt.com/news/164011.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • AndroidRecycleView和线型布局制作聊天布局
    目录一、首先在主布局中,用帧布局来填充 RecycleView 和 两个模拟发送消息的Button二、在一个布局中,加载左边好友发送消息的布局,然后是自己发送消息的右边布局三、在Ms...
    99+
    2024-04-02
  • AndroidSocket实现多个客户端聊天布局
    本文实例为大家分享了Android Socket实现多个客户端聊天布局的具体代码,供大家参考,具体内容如下 服务器Socket接受到客户端发送的消息之后,转发给容器中的其他Socke...
    99+
    2024-04-02
  • Android Socket怎么实现多个客户端聊天布局
    这篇“Android Socket怎么实现多个客户端聊天布局”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Andr...
    99+
    2023-06-30
  • 如何使用HTML和CSS实现一个简单的聊天页面布局
    随着现代科技的发展,人们越来越依赖于互联网来进行沟通和交流。而在网页中,聊天页面是一种非常常见的布局需求。本文将向大家介绍如何使用HTML和CSS来实现一个简单的聊天页面布局,并给出具体的代码示例。首先,我们需要创建一个HTML文件,可以使...
    99+
    2023-10-21
    CSS样式 HTML布局 聊天页面
  • 【uni-app】uni-app实现聊天页面功能(小程序)——布局篇
    文章目录 前言划分区域问题内容溢出关于调试聊天框 代码实现 前言 在工作中使用uni-app参与开发一个小程序,其中要写一个简单的聊天页面,虽然功能不多(只有一个发送文字的功能),但是其中的细节比较多,也踩过很多坑,...
    99+
    2023-08-16
    uni-app 小程序 前端 vue.js
  • CSS布局clear和clearfix的作用是什么
    clear和clearfix都是用于解决浮动元素会导致父元素高度塌陷的问题。clear属性用于指定一个元素的边框不允许相邻浮动元素出...
    99+
    2023-10-12
    CSS
  • Android studio下的线性布局(LinearLayout)与水平布局(ReativeLayout)详细解析+典型例子及其代码
    一:线性布局 线性布局有水平线性布局:android:orientation="horizontal";和垂直线性布局:android:orientation="vertical"两种布局。 当代码表示android:orientation...
    99+
    2023-09-15
    android studio android ide kotlin
  • Android实训1_动物连连看游戏界面制作_线性布局
    实训1  动物连连看游戏界面制作 【实训名称】 动物连连看游戏界面制作 【实训效果】 【实训目的】 掌握Android中线性布局的使用 【实训素材】 drawable-hdpi文件夹: 【实训素材CSDN资源链接】 http...
    99+
    2023-10-21
    android studio android
  • 怎么用ccs制作一个简单的html布局
    这篇文章将为大家详细讲解有关怎么用ccs制作一个简单的html布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1、创建htmlHtml编辑代码示例<!DOCTYP...
    99+
    2024-04-02
  • 解析响应式布局的作用和优势
    响应式布局的作用及优势解析 随着移动互联网的快速发展,人们对网页的浏览方式也发生了变化。传统的固定布局在不同设备上可能出现显示不完整、排版混乱等问题,影响用户体验。而响应式布局则成为了解决这一问题的最佳方案。本文将从响应式布局的...
    99+
    2024-01-29
    手机
  • CSS 布局:控制元素的位置和流向
    盒模型: CSS 盒模型是一个由内容、内边距、边框和外边距组成的框架,它定义了元素在页面上的位置和尺寸。 内容:元素内部的实际内容,例如文本、图像或视频。 内边距:内容周围的透明区域,提供内容与边框之间的缓冲。 边框:围绕元素的视觉分隔...
    99+
    2024-03-13
    引言: CSS 布局是一门精湛的艺术 它赋予了网页设计师对元素放置和流向的完全控制权。通过各种布局技术 可以创建复杂且响应迅速的网页设计。
  • HTML怎么制作一个简单的面页布局
    这篇文章将为大家详细讲解有关HTML怎么制作一个简单的面页布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。互联网多数的网页都是由html编写的,html配合css布局做...
    99+
    2024-04-02
  • 用Flexbox制作CSS布局实现水平垂直居中
    本篇内容介绍了“用Flexbox制作CSS布局实现水平垂直居中”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2024-04-02
  • 明天和意外谁先来临? 布局“零信任”,不惧“黑天鹅”!
    明天和意外,你永远不知道谁先来临。2020年突如其来的新型冠状病毒打乱了大家原本的生活和工作节奏,“万众一心,共战疫情”成为全国乃至全球人民的主旋律。这场疫情给全球带来的损失可以说是难以估量的,对于一些企业来讲,其影响更是“致命”的。如何保...
    99+
    2023-06-04
  • 小程序怎么制作商品列表流式布局
    这篇“小程序怎么制作商品列表流式布局”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“小程序怎么制作商品列表流式布局”文章吧。流...
    99+
    2023-06-26
  • 如何使用CSS3制作一个简单页面的布局
    这篇文章主要讲解了“如何使用CSS3制作一个简单页面的布局”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用CSS3制作一个简单页面的布局”吧! ...
    99+
    2024-04-02
  • Dreamweaver CS3网页制作中的CSS布局规则是什么
    这篇文章主要讲解了“Dreamweaver CS3网页制作中的CSS布局规则是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Dreamweaver CS3网页制作中的CSS布局规则是什么...
    99+
    2023-06-08
  • 掌握网页性能受绘制和布局的影响
    了解重绘和回流对网页性能的影响,需要具体代码示例 简介:网页的性能是用户体验的关键因素之一。在优化网页性能的过程中,了解重绘和回流的概念及其对网页性能的影响非常重要。本文将详细讲解重绘和回流的含义,并举例说明它们对网页性能的影响...
    99+
    2024-01-26
    性能 重绘 回流
  • 学会使用Android Studio网格布局制作计算器界面
    一、网格布局的介绍 1.1GridLayout布局使用虚细线将布局划分为行、列和单元格,也支持一个控件在行、列上都有交错排列。 1.2可以自己设置布局中组件的排列方式 1.3可以自定义网格布局有多少行、多少列 1.4可以直接设置组件位于某行...
    99+
    2023-10-20
    android studio android ide
  • 剖析响应式布局的工作机制与优越之处
    探秘响应式布局的工作原理与优势 在当今互联网普及的时代,人们使用各种不同尺寸的设备来访问网站,如智能手机、平板电脑和电脑。为了让网站在不同设备上都能够以最佳的方式呈现内容,响应式布局(Responsive Design)应运而生...
    99+
    2024-01-29
    优势:灵活 适应性强 用户体验好
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作