一行代码实现QQ聊天列表侧滑栏效果

不得不说DrawerLayout是个好东西!之前一直蠢蠢地用HorizontalScrollView来实现侧滑栏效果,问题那是百出啊,要设置滑动摩擦系数,要考虑右侧菜单栏怎样适配多种屏幕,我太难了!发现DrawerLayout以后才发现新世界~这里就来给大家演示一下效果:
在这里插入图片描述
简直帅得不要不要的!

不多说先上XML布局:
  • 这里需要注意,根布局最好用DrawerLayout,不用这个可能会有焦点等问题~
  • 然后原页面(也就是你正常显示的页面),宽度记得是**match_parent**
  • 侧滑出的菜单栏宽度没有要求,但是android:layout_gravity="end"属性需要设置,这里,end=右边,start=左边,top=上面,bottom=下面,代表菜单栏相对于原页面的位置!
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/DrawLayout"
    android:layout_width="match_parent"
    android:layout_height="60dp">

    <!--原页面-->
    <LinearLayout
        android:id="@+id/view_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginLeft="10dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/img_up" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="60dp"
            android:gravity="center"
            android:text="哈哈哈"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="18sp" />

    </LinearLayout>

    <!--侧滑栏-->
    <LinearLayout
        android:id="@+id/view_Right"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="end">

        <Button
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:text="删除" />

        <Button
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@id/btn_del"
            android:text="置顶" />

    </LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

再来看JAVA代码:

  • 首先给你的DrawerLayout加上一个监听器
  • 然后在onDrawerSlide(滑动事件)里面设置你原页面的平移
  • 原页面平移的距离 = 右侧菜单滑出的距离
  • 距离计算: 右侧菜单栏的宽度(drawerView.getMeasuredWidth()) * 滑出的百分比(slideOffset
  • 最后因为setTranslationX()方法是默认向右边移,而我们这里需要向左,所以我们把所得距离加上负号!
mDrawLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            //滑动事件
            public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
                /** 实现QQ列表侧滑功能
                 * 在addDrawerListener监听器中DrawSlide(滑动监听)事件中设置原页面进行平移
                 * 平移距离等于右侧菜单滑出的距离
                 * 右侧菜单滑出距离计算公式: 右侧菜单布局的宽度 * 滑出百分比
                 * 由于setTranslationX()方法默认是从左往右移,所以这边前面加了一个负号
                 */
                mViewItem.setTranslationX(-(drawerView.getMeasuredWidth()*(slideOffset)));
            }
            @Override
            public void onDrawerOpened(@NonNull View drawerView) {

            }
            @Override
            public void onDrawerClosed(@NonNull View drawerView) {

            }
            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });
  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
由于QQ聊天通讯涉及到网络通讯和服务器端的处理,代码比较复杂。在这里我提供一个简单的实现代码,可以供您参考。 首先,我们需要创建一个登录界面和一个聊天界面的Qt窗口。登录界面包括一个用户名输入框、一个密码输入框和一个登录按钮。聊天界面包括一个消息列表框、一个消息输入框和一个发送按钮。 在登录界面中,我们需要实现登录按钮的槽函数,用于向服务器发送登录请求。在聊天界面中,我们需要实现发送按钮的槽函数,用于向服务器发送消息请求。 以下是一个简单的实现示例: ```cpp // 登录界面槽函数 void MainWindow::on_loginButton_clicked() { // 获取用户名和密码 QString username = ui->usernameEdit->text(); QString password = ui->passwordEdit->text(); // 向服务器发送登录请求 QJsonObject json; json.insert("type", "login"); json.insert("username", username); json.insert("password", password); QJsonDocument doc(json); QByteArray data = doc.toJson(QJsonDocument::Compact); tcpSocket->write(data); } // 聊天界面槽函数 void MainWindow::on_sendButton_clicked() { // 获取消息内容 QString message = ui->messageEdit->text(); // 向服务器发送消息请求 QJsonObject json; json.insert("type", "message"); json.insert("message", message); QJsonDocument doc(json); QByteArray data = doc.toJson(QJsonDocument::Compact); tcpSocket->write(data); } ``` 在这里,我们使用了Qt中的网络模块,通过TCP socket与服务器进行通讯。在登录请求和消息请求中,我们使用了JSON格式的数据进行传输,方便服务器端进行处理。 在服务器端,我们需要解析客户端发送的请求,并且根据请求类型进行相应的处理。以下是一个简单的示例: ```cpp // 处理客户端请求 void Server::onReadyRead() { QTcpSocket *client = qobject_cast<QTcpSocket *>(sender()); if (client == nullptr) { return; } QByteArray data = client->readAll(); QJsonDocument doc = QJsonDocument::fromJson(data); if (doc.isNull()) { return; } QJsonObject json = doc.object(); QString type = json.value("type").toString(); if (type == "login") { QString username = json.value("username").toString(); QString password = json.value("password").toString(); // 处理登录请求 ... } else if (type == "message") { QString message = json.value("message").toString(); // 处理消息请求 ... } } ``` 在这里,我们使用了Qt中的JSON模块,对客户端发送的请求进行解析。根据请求类型,我们可以进行相应的处理,比如登录验证和消息转发等。 当然,这只是一个简单的实现示例,实际的实现还需要考虑诸多细节问题,比如消息的加密和解密、用户在线状态的处理、异常情况的处理等。同时,服务器端的实现也需要考虑并发性和稳定性等问题,建议使用多线程或者异步IO进行实现

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值