基于Android 的图片社交App 设计

2019-08-21王昕瑞林忠

现代计算机 2019年21期

王昕瑞，林忠

（南京工程学院，南京211167）

0 引言

2018 年1 月31 日，中国互联网络信息中心（CNNIC）在京发布第41 次《中国互联网络发展状况统计报告》，截至2017 年12 月，我国网民规模达7.72 亿，普及率达到55.8%，超过全球平均水平（51.7%）4.1 个百分点，超过亚洲平均水平（46.7%）9.1 个百分点[1]，巨大的网民数量为社交App 的发展提供了基础。因此在我国社交App 的开发仍有巨大市场潜力。

1 研究现状

目前，国内互联网市场社交App 种类繁多，例如市场占有率很高的QQ、微信，以及可以说是国内主要舆论场的微博等。

这些平台的功能都各有侧重：

（1）QQ 和微信主要是熟人社交，通信双方大部分互相认识，结识新朋友这方面功能较弱，并不是特别侧重。

（2）微博主要在于可以让用户了解更多新的当下热点信息，发表个人看法，社交并不是微博的主要功能和目的。

由此可以看出目前社交App 仍有巨大潜力可以挖掘，例如：

（1）这些主流应用对于在网络上结识新朋友的这方面功能不够侧重，存在一些空白。

（2）主流应用对于图像修饰方面仅仅当作是锦上添花，并不是非常重视。

针对这些不足以及空白，设计了一款基于Android的图片社交App，以期提高人们的社交生活质量、扩大社交圈子、激发互联网社交潜力。该App 功能齐全、界面简约，发帖以图片为主要媒介，体现图片社交直观高效的优势。为此这款App 关于图像编辑的功能比较完善，用户可以进行添加图像滤镜、使用贴纸等操作。

2 系统设计

2.1 需求分析

本应用是一个社交应用，设计目的是为了以图片为媒介提高社交效率和交友成功率，基于此小组开发人员展开设计。首先用户要结识新朋友就需要了解到他人生活，进入应用的第一个界面就是动态浏览界面，用户可以浏览到最新和最热的动态。其次用户看到有趣的帖子，就会自然而然的想与发布者进行交流，因此私信功能也是必不可少的（私信界面见图6）。最重要的还有就是对图片的编辑功能，此功能内嵌在动态发布中。其他的就是一个社交软件中必不可少的类似于浏览好友动态、个人中心等功能。

2.2 总体设计

根据用户需求将App 分为主页动态、个人中心与消息三个部分，其中图像编辑功能在个人中心的动态发布页面会有体现，并且用户必须登录以后才能使用相关功能。本系统功能结构如图1 所示。

图1 系统总体结构

（1）主页动态

主页动态设计功能如图2 所示，界面设计如图3所示。该模块又分为两部分最新动态与最热动态。最热动态中又分为十个类型。该模块主要是用于浏览他人动态，通过浏览他人动态的方式找到兴趣相投的朋友，以达到社交的目的。

最新动态模块是显示人们最新发布的动态，动态来源于陌生人，通过浏览动态用户可以找到与自己兴趣相同的朋友，以此进行社交。同时，如果用户同意提供位置权限，那么这个模块中将以发布动态者与用户距离的远近作为一个重要因素，从而改变动态的排序。

最热动态模块用于显示不同兴趣类别下的动态热度排行。在这个模块中把兴趣类别分十个：美食、音乐、宠物、旅行、运动、明星、搞笑、艺术、摄影、影视。用户发布时可以添加标签的方式来进行分类，也可以通过后台的检索算法进行分类。热度高低通过点赞数、评论数、浏览量来综合决定。在这个模块中，用户可以较为精准的根据兴趣找到与自己爱好相投的朋友，提高社交效率。

（2）个人中心

该模块功能设计如图4 所示。个人中心主要分为两个部分，个人中心与账户设置。在个人中心中，用户可以浏览自己的动态，并进行发布动态等操作。在账户设置中，用户可以更改自己的资料、密码，设置私信屏蔽，进行账号切换等操作。

图2 主页动态结构图

图3 主页界面

（3）消息中心

这一模块包含两个部分，如图5 所示。一个是来自其他用户的私信消息，另一个部分是其他用户好友的动态。

私信消息的界面设计如图6 所示，通过ListView和SimpleAdapter 创建私信列表。每一个对话框都有其对应的id，当用户单击对话框时,读取id 就可判断用户在向谁发送消息。发送消息时，将id 与所发送的内容经行打包传至后台即可。

好友动态的浏览的界面设计如图7 所示。界面布局紧凑，用户可以一次浏览尽量多的动态，每一条动态下面都有点赞、评论、转发的按钮，实现方式与私信列表类似。

图4 个人中心结构图

图5 消息结构图

图6 私信列表界面设计

（4）图像编辑

图像编辑是本App 的一大卖点，因此功能比较完善，包括滤镜、贴纸、裁剪、涂鸦、编辑等，其界面设计如图8 所示。

滤镜功能包括有新潮、日系、优雅、绚丽、摩登、清新、森系、不羁、黑白、胶片、优格、怡尚、淡雅、流年等多个类型。裁剪功能可对图片进行如9:16、4:3、1:1、3:4、16:9 的比例裁剪，还可以对图片进行旋转（后文会有展示）。涂鸦功能可通过seekbar 组件改变画笔粗细，通过调色板可以任意调节画笔颜色，还有橡皮擦可以擦去画笔留下的痕迹。编辑功能是对图片的亮度、对比度、饱和度进行编辑。

图7 我的关注界面设计

图8 图像编辑界面

2.3 系统架构

用户用手机与应用交互，应用通过网络向服务器发送或获取数据，服务器从数据库中读取或写入数据。可将整个过程分为客户端与服务端，手机上的应用即为客户端，之前已经介绍；服务器端主要实现两大模块，包括服务端与数据库的数据交互即数据库中数据的存取以及服务端与客户端的数据交互，客户端主要实现从服务器获取数据、数据处理以及将处理好后的数据展示在用户界面上，其中服务端有四个Servlet 如图9 所示，分别实现登录、注册、即时通信和发布动态的功能。

3 系统实现

3.1 对用户数据的操作

在这款社交App 中不可避免的要对用户进行相关操作，例如注册、登录、修改个人信息等。

关于注册，由用户填写用户名、密码等信息，Android 端首先验证填写信息是否合法（如：密码长度是否足够、密码中是否包含不合法字符等）。合法的信息将通过Android Studio 自带的HTTP 协议传输到后台，后台通过MyBatis 框架连通Oracle 数据库。首先检测数据库有没有相同的用户名，如果有，则返回-1，并弹出提示框提醒用户重名，并让用户修改用户名；如果没有，则将这组用户名-密码填入数据库。

关于登录，由用户填写用户名、密码，通过Android前端的验证后传到后端数据库。搜索数据库，若没有该用户名，则返回-1，并弹出提示框提醒用户不存在该用户名；若存在该用户名但是密码错误，则返回0，并弹出提示框提醒用户密码错误；若该组用户名-密码跟数据库里存储的用户名-密码相符，则返回1，并弹出提示框提醒用户登录成功。

关于修改个人信息，用户进入“个人信息”界面，修改个人信息，然后提交。数据库将根据用户的修改情况修改数据库信息。

图9 系统整体架构

图10 服务端模块设计图

3.2 图像编辑功能的实现

下面是对图像编辑功能的展示与介绍。

对于滤镜效果，用户选择不同的滤镜，就会触发不同的事件监听器，而其中每一个滤镜都有自己的编号，根据编号程序就会将选中图片交给相应的滤镜处理，滤镜来自开源的GPUImage 滤镜库。贴纸效果原理与此类似。

对于涂鸦效果,当用户在触摸屏上移动时可在屏幕上绘制任意的图形，实现手绘功能只是一种假象，表面上看起来是用户在触摸屏上随意的画曲线，实际上是在画直线，每条直线都是从上次拖动事件的发生点画到本次拖动事件的发生点。当用户在触摸屏上移动时，每两次拖动事件发生点距离都很小，多条极短的直线连接起来肉眼看起来就是曲线了。借助于Android提供的Path 类，可以非常方便地实现这种效果。

图11

关于裁剪效果，有如下图中的几种裁剪比例，对于不同的裁剪比例都需要绘制不同的裁剪框，获取裁剪框的宽高与坐标位置，最后通过Bitmap 中的createBitmap 方法返回裁剪得到的图像。

关于旋转效果，旋转效果是通过Matrix 类实现的，Matrix 是Android 提供的一个矩阵工具类，Matrix 可以对图片进行平移、旋转、缩放倾斜等操作，对于旋转操作，Matrix 有方法setRotate（float degreses,float px,float py）可供使用，其中通过px,py 设置轴心，degrees 控制角度。

对于图像的对比度、亮度、饱和度Android 提供了ColorMatrix 类来供我们进行修改，CololrMatrix 中的函数setSaturation（float sat）可以设置饱和度，参数sat 值为1 时是原图，大于1 饱和度增加，小于1 时饱和度减少，值为0 时图像为灰色。

图12 滤镜效果

图13 贴纸效果

函数setScale（float rScale,float gScale,float bScale,float aScale）用以设置亮度，参数一（rScale）：红色参数二（gScale）：绿色参数三（bScale）：蓝色参数四（aScale）：透明度各个参数的值对应调节各个颜色的亮度，0 代表全黑1 代表原图，一般将透明度的值固定设置为1（即原图效果），通过调节三元色的值来调节亮度。在调整对比度时必定要降低亮度，应用中通过一个5×5 矩阵达到调整对比度效果。