Android仿QQ即时聊天软件开发(一)---页面搭建

写在前面

这个暑假大家伙都待在家里，属实闷得慌，想找点事情做，于是乎就想起了这么一个好玩的Demo，以前也发过一篇关于java基于socket通信的文章，在那篇文章中也完成了即时聊天的功能，都是只能在黑窗口下进行，这就有点不雅观了，所以接下来我就写了个带聊天界面的即时通讯软件，看了许多，就QQ模仿起来比较方便，所以就先模仿QQ来一波吧。功能还不是特别完善，大家就将就将就哈，谢谢！

效果展示
My_QQ_TWO.gif

登录界面

功能：
1.提供用户输入账号、密码并且登录。
2.用户注册页面入口。
3.找回密码页面入口。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".LoginActivity"
    android:background="@mipmap/bg_login_01">

    <LinearLayout
        android:id="@+id/ll_title_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginStart="25dp"
        android:layout_marginTop="90dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/icon_qq" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text_oo"
            android:textColor="@android:color/white"
            android:textSize="32sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="25dp"
        android:layout_marginEnd="25dp"
        android:layout_below="@id/ll_title_layout"
        android:layout_marginTop="83dp"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/underline"
            android:orientation="horizontal">

            <EditText
                android:id="@+id/et_input_account"
                style="@style/LoginEditTextTheme"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/input_account_edit_text_height"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_marginEnd="10dp"
                android:layout_toStartOf="@+id/iv_clear_account"
                android:hint="@string/input_account"
                android:inputType="number" />

            <ImageView
                android:id="@+id/iv_clear_account"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_toStartOf="@id/cb_login_drop_down"
                android:layout_centerVertical="true"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:src="@mipmap/clear" />

            <CheckBox
                android:id="@+id/cb_login_drop_down"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:background="@drawable/account_drop_down"
                android:button="@null"/>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rl_password_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="@drawable/underline">

            <EditText
                android:id="@+id/et_input_password"
                style="@style/LoginEditTextTheme"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/input_account_edit_text_height"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_marginEnd="10dp"
                android:layout_toStartOf="@id/iv_clear_password"
                android:hint="@string/input_password"
                android:inputType="textPassword"
                android:longClickable="false"
                />

            <ImageView
                android:id="@+id/iv_clear_password"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_toStartOf="@id/iv_login_open_eye"
                android:layout_centerVertical="true"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:src="@mipmap/clear" />

            <CheckBox
                android:id="@+id/iv_login_open_eye"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:background="@drawable/password_eye"
                android:button="@null" />

        </RelativeLayout>

        <Button
            android:id="@+id/btn_login"
            android:layout_width="match_parent"
            android:layout_height="38dp"
            android:layout_marginTop="22dp"
            android:text="@string/login"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            android:background="@drawable/bg_btn_login"
            style="?android:attr/borderlessButtonStyle" />

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

            <TextView
                android:id="@+id/tv_forget_password"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:text="@string/login_forget_password"
                style="@style/ClickableTextView" />

            <TextView
                android:id="@+id/tv_register_account"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_marginTop="20dp"
                android:text="@string/login_register"
                style="@style/ClickableTextView"/>

        </RelativeLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_terms_of_service_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="42.7dp">

        <TextView
            android:id="@+id/login_read_and_apply"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/login_message"
            android:textColor="@android:color/white"
             />

        <TextView
            android:id="@+id/tv_terms_of_service"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="start|center_vertical"
            android:text="@string/login_terms_of_service"
            android:textColor="@drawable/bg_hypertext"
            style="@style/ClickableTextView"/>

    </LinearLayout>

</RelativeLayout>

用户注册页面

<?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="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/bg_btn_login"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="新用户注册"
            android:textColor="@color/white"
            android:textSize="20sp"/>

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@color/white"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <EditText
                android:id="@+id/et_user_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:paddingTop="2dp"
                android:paddingBottom="2dp"
                android:paddingLeft="6dp"
                android:hint="@string/register_nickname"
                android:singleLine="true"
                android:maxLength="15"
                android:background="#ffffff"
                android:textSize="18sp" />
        </LinearLayout>


        <LinearLayout
            android:background="@color/white"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:paddingTop="2dp"
                android:paddingBottom="2dp"
                android:paddingLeft="6dp"
                android:singleLine="true"
                android:hint="@string/register_inputFirstPsd"
                android:inputType="textPassword"
                android:maxLength="15"
                android:background="#ffffff"
                android:id="@+id/et_psw"
                android:textSize="18sp" />
        </LinearLayout>

        <LinearLayout
            android:background="@color/white"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:paddingTop="2dp"
                android:paddingBottom="2dp"
                android:paddingLeft="6dp"
                android:singleLine="true"
                android:hint="@string/register_inputAgainPsd"
                android:inputType="textPassword"
                android:maxLength="15"
                android:background="#ffffff"
                android:id="@+id/et_psw_again"
                android:textSize="18sp" />
        </LinearLayout>

        <LinearLayout
            android:background="@color/white"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal">
            <TextView
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginLeft="10dp"
                android:paddingLeft="6dp"
                android:gravity="left"
                android:text="@string/register_gender"
                android:textSize="18sp" />
            <RadioGroup
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="2.6"
                android:id="@+id/SexRadio"
                android:paddingLeft="5dp">

                <RadioButton
                    android:id="@+id/mainRegisterRdBtnFemale"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="女生" />

                <RadioButton
                    android:id="@+id/mainRegisterRdBtnMale"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="-33dp"
                    android:layout_marginLeft="120dp"
                    android:text="男生"/>
            </RadioGroup>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <EditText
                android:id="@+id/register_address"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:paddingTop="2dp"
                android:paddingBottom="2dp"
                android:paddingLeft="6dp"
                android:hint="@string/register_address"
                android:singleLine="true"
                android:maxLength="15"
                android:background="#ffffff"
                android:textSize="18sp" />
        </LinearLayout>

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp" >
        <Button
            android:id="@+id/btn_register"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="40dp"
            android:textColor="@color/white"
            android:text="注册"
            android:textSize="24sp"
            android:background="@drawable/bg_btn_login" />
    </RelativeLayout>

</LinearLayout>

找回密码界面

<?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="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/bg_btn_login"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/forget_password"
            android:textColor="@color/white"
            android:textSize="20sp"/>

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@color/white"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <EditText
                android:id="@+id/et_user_number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:paddingTop="2dp"
                android:paddingBottom="2dp"
                android:paddingLeft="6dp"
                android:hint="@string/input_account"
                android:singleLine="true"
                android:inputType="number"
                android:maxLength="15"
                android:background="#ffffff"
                android:textSize="18sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <EditText
                android:id="@+id/et_user_phoneNumber"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:paddingTop="2dp"
                android:paddingBottom="2dp"
                android:paddingLeft="6dp"
                android:hint="@string/findpsd_phone"
                android:singleLine="true"
                android:inputType="text"
                android:maxLength="15"
                android:background="#ffffff"
                android:textSize="18sp" />
        </LinearLayout>

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp" >
        <Button
            android:id="@+id/btn_findpsd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="40dp"
            android:textColor="@color/white"
            android:text="找回密码"
            android:textSize="24sp"
            android:background="@drawable/bg_btn_login" />
    </RelativeLayout>
</LinearLayout>

聊天界面

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:fitsSystemWindows="true"
    android:background="@drawable/bg_pinone"
    tools:context="com.skyworth.ice.login.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/bg_btn_login"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/send_message"
            android:textColor="@color/white"
            android:textSize="20sp"/>

    </RelativeLayout>


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10"
        android:overScrollMode="never"
        android:scrollbars="vertical" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <!--在EditText上增加了一个布局，用他来控制EditText的点击事件（当点击的时候，手动请求焦点）-->
        <FrameLayout
            android:layout_width="1dp"
            android:layout_height="wrap_content"
            android:layout_weight="10">

            <EditText
                android:id="@+id/et"
                android:layout_width="match_parent"
                android:layout_height="37dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="7dp"
                android:background="@drawable/shape_corner_white"
                android:hint="@string/client_content"
                android:inputType="text"
                android:paddingLeft="10dp"
                android:paddingTop="2dp"
                android:paddingBottom="1dp"
                android:singleLine="true"
                android:textSize="16dp" />

            <LinearLayout
                android:id="@+id/layout_edit"
                android:layout_width="match_parent"
                android:layout_height="54dp"
                android:orientation="vertical" />

        </FrameLayout>


        <Button
            android:id="@+id/btn"
            android:layout_width="10dp"
            android:layout_height="37dp"
            android:layout_margin="7dp"
            android:layout_weight="2"
            android:background="@drawable/bg_btn_login_normal"
            android:text="@string/client_submit" />

    </LinearLayout>
</LinearLayout>
大致的页面搭建工作差不多就这些，每个页面的功能、以及实现功能的原理会在后面的文章中详细介绍，请持续关注哟！！
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,372评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,368评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,415评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,157评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,171评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,125评论 1赞 297
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,028评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,887评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,310评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,411评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,004评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2赞 353

推荐阅读更多精彩内容

  • 吃货地图产品需求文档
    吃货地图产品需求文档 V1.0-2015/03/30 1概述 1.1产品概述及目标 概述：“吃货地图”是一款基于i...
    michaelshan阅读 5,851评论 1赞 46
  • Week 1# 微信体验报告
    大家好，这是第一周的产品体验报告，本次对象是微信。选它的理由很简单：我每天点开它的频率不下20次，在“我最常用ap...
    Grocery阅读 1,180评论 1赞 12
  • 印章怎么盖?(转)
    书画家用印始于元代赵孟頫，印章，一方面与书画配合形成作品不可或缺的一部分，一方面表示信用，故书画家不加盖印章，会影...
    微笑着生活一一秀琴阅读 2,319评论 0赞 0
  • 命运之歌
    《见识》字数:755 命运之歌 001命运来敲门 现实，梦想，苦难，命运的钟声。 生命是父母所赐，无论富贵与贫穷，...
    朗月微光阅读 503评论 0赞 15
  • Android自定义View可以转动的小圆球球
    废话少说 直接上码： 自定义view部分。 import android.content.Context; imp...
    EasyLife90阅读 1,195评论 0赞 0