30分钟手动实现QQ聊天界面

作者: 奔跑吧李博 | 来源:发表于2017-12-21 12:53 被阅读711次

github代码传送门

先上效果图:


giphy.gif

界面布局设计:


image.png
  1. activity_main.xml布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.chatui.MainActivity"
    android:background="#f4f4f4">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/blue_sky">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="范冰冰"
            android:textColor="@color/white"
            android:textSize="16sp"
            android:layout_centerInParent="true"/>
    </RelativeLayout>

    <android.support.v7.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:orientation="horizontal"
        android:gravity="center_vertical"
        android:padding="8dp">

        <EditText
            android:id="@+id/et_input"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="35dp"
            android:padding="2dp"
            android:background="@drawable/shape_chat_et"/>

        <TextView
            android:layout_width="60dp"
            android:layout_height="35dp"
            android:onClick="sendMsg"
            android:layout_marginLeft="5dp"
            android:background="@drawable/shape_chat_sendbtn"
            android:gravity="center"
            android:textSize="16sp"
            android:textColor="@color/white"
            android:text="发送"/>
    </LinearLayout>

</LinearLayout>

activity_main.xml布局预览:


image.png
  1. item布局
    这里直接用的两种发消息布局在一个item里面,用type来显示隐藏对应类型的消息。扩展功能的话,需要用多布局控制item,如扩展发图片,语音的item。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">

    <RelativeLayout
        android:id="@+id/rl_receive"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/iv_avator_recieve"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@mipmap/avator1"
            android:layout_marginRight="8dp"/>

        <TextView
            android:id="@+id/tv_nickname_recieve"
            android:text="范冰冰"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/iv_avator_recieve"
            android:layout_marginTop="5dp"/>

        <TextView
            android:id="@+id/tv_msg_receive"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/left_messages"
            android:text="你发的"
            android:layout_toRightOf="@id/iv_avator_recieve"
            android:layout_below="@id/tv_nickname_recieve"
            android:layout_marginTop="5dp"
            android:gravity="center"/>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/ll_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right">

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

            <TextView
                android:id="@+id/tv_nickname_send"
                android:text="李晨"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"/>

            <TextView
                android:id="@+id/tv_msg_send"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/right_messages"
                android:text="我发的"
                android:layout_marginTop="5dp"
                android:gravity="center"/>
        </LinearLayout>

        <ImageView
            android:id="@+id/iv_avator_send"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@mipmap/avator2"
            android:layout_marginLeft="8dp"/>
    </LinearLayout>

</LinearLayout>

item布局预览:


image.png
  1. 消息实体类,这里只用了最基础的发送类型和消息内容:
public class MsgContentBean {
    private int type;
    private String content;

    public MsgContentBean(int type, String content) {
        this.type = type;
        this.content = content;
    }

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}
  1. Mainactivity
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import com.zhy.adapter.recyclerview.CommonAdapter;
import com.zhy.adapter.recyclerview.base.ViewHolder;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private ArrayList<MsgContentBean> datas = new ArrayList<>();
    private RecyclerView recyclerView;
    private CommonAdapter<MsgContentBean> adapter;
    private EditText etInput;
    private final int RECIEVE = 1;
    private final int SEND = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }

    private void init() {
        datas.add(new MsgContentBean(RECIEVE,"晚上去看电影啊"));
        datas.add(new MsgContentBean(RECIEVE,"有空吗"));
        datas.add(new MsgContentBean(SEND,"我看看有没有时间吧,我很忙的"));

        etInput = (EditText) findViewById(R.id.et_input);
        recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
        adapter = new CommonAdapter<MsgContentBean>(getApplicationContext(),R.layout.item_chat,datas) {
            @Override
            protected void convert(ViewHolder holder, MsgContentBean msgContentBean, int position) {
                RelativeLayout llRecieve = holder.getView(R.id.rl_receive);
                LinearLayout llSend = holder.getView(R.id.ll_send);
                if(msgContentBean.getType() == 0){
                    llRecieve.setVisibility(View.GONE);
                    llSend.setVisibility(View.VISIBLE);
                    holder.setText(R.id.tv_msg_send,msgContentBean.getContent());
                }else{
                    llRecieve.setVisibility(View.VISIBLE);
                    llSend.setVisibility(View.GONE);
                    holder.setText(R.id.tv_msg_receive,msgContentBean.getContent());
                }

            }
        };
        recyclerView.setAdapter(adapter);
    }

    //点击发送消息
    public void sendMsg(View view){
        String content = etInput.getText().toString().trim();
        datas.add(new MsgContentBean(SEND,content));
        adapter.notifyDataSetChanged();

        etInput.setText("");
        //滚动到底部
        recyclerView.smoothScrollToPosition(datas.size() - 1);
    }
}
注:
  1. activity在manifest中配置android:windowSoftInputMode="adjustPan",输入消息将内容订上去
  2. 不停输入recyclerview始终滚动到底部,使用recyclerView.smoothScrollToPosition(datas.size() - 1)

好了,完成了,是不是可以很快速实现?

相关文章

  • 30分钟手动实现QQ聊天界面

    github代码传送门 先上效果图: 界面布局设计: activity_main.xml布局: activity_...

  • 界面扩散效果

    github 非常强大 手动实现界面扩散

  • Tim与qq的区别

    界面:tim界面相较于qq简洁。 1. qq聊天窗口与软件主体分开,tim聊天窗口在主体内部。 2. qq可以更改...

  • iOS 打电话、唤起微信、QQ

    //跳转到qq聊天界面 + (void)callQQ:(NSString*)qq { if([selfisQQIn...

  • RecyclerView实现倒序列表

    1、写在前面 实现一个聊天界面,就是类似QQ那种,这里是讲一下倒序排列,不实现QQ的各种高级功能 2、ListVi...

  • MFC&Python_QQIM

    QQ即时通讯及聊天室 实现功能:1、客户端可以和服务端进行通讯2、服务端支持多人聊天实现聊天室功能3、界面的友好度...

  • ios 跳转到qq的聊天界面

    实现像网页上QQ客服一样点击某按钮直接调用出聊天工具,在浏览器中可以通过JS代码打开QQ并弹出聊天界面,一般作为客...

  • 实现聊天界面

    主要用的是CoolectionView,目前只能是文字,之前谢过一个是带发送图片的,目前就先发这个仅仅供初学者参考...

  • Flutter 打开QQ聊天界面

    QQ需要开通为客服QQ才可以奥~ Flutter启动其他应用需要安装一个插件: url_launcher 请一定要...

  • APP

    界面不同: 1.TIM有待办 ,而QQ没有 2.QQ只有列表,TIM是列表和聊天框同界面 3.TIM界面有云文件,...

网友评论

    本文标题:30分钟手动实现QQ聊天界面

    本文链接:https://www.haomeiwen.com/subject/mlfowxtx.html