基于Android 的圖片社交App 設(shè)計

王昕瑞，林忠

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

0 引言

2018 年1 月31 日，中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）在京發(fā)布第41 次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展狀況統(tǒng)計報告》，截至2017 年12 月，我國網(wǎng)民規(guī)模達7.72 億，普及率達到55.8%，超過全球平均水平（51.7%）4.1 個百分點，超過亞洲平均水平（46.7%）9.1 個百分點[1]，巨大的網(wǎng)民數(shù)量為社交App 的發(fā)展提供了基礎(chǔ)。因此在我國社交App 的開發(fā)仍有巨大市場潛力。

1 研究現(xiàn)狀

目前，國內(nèi)互聯(lián)網(wǎng)市場社交App 種類繁多，例如市場占有率很高的QQ、微信，以及可以說是國內(nèi)主要輿論場的微博等。

這些平臺的功能都各有側(cè)重：

（1）QQ 和微信主要是熟人社交，通信雙方大部分互相認識，結(jié)識新朋友這方面功能較弱，并不是特別側(cè)重。

（2）微博主要在于可以讓用戶了解更多新的當下熱點信息，發(fā)表個人看法，社交并不是微博的主要功能和目的。

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

（1）這些主流應用對于在網(wǎng)絡(luò)上結(jié)識新朋友的這方面功能不夠側(cè)重，存在一些空白。

（2）主流應用對于圖像修飾方面僅僅當作是錦上添花，并不是非常重視。

針對這些不足以及空白，設(shè)計了一款基于Android的圖片社交App，以期提高人們的社交生活質(zhì)量、擴大社交圈子、激發(fā)互聯(lián)網(wǎng)社交潛力。該App 功能齊全、界面簡約，發(fā)帖以圖片為主要媒介，體現(xiàn)圖片社交直觀高效的優(yōu)勢。為此這款App 關(guān)于圖像編輯的功能比較完善，用戶可以進行添加圖像濾鏡、使用貼紙等操作。

2 系統(tǒng)設(shè)計

2.1 需求分析

本應用是一個社交應用，設(shè)計目的是為了以圖片為媒介提高社交效率和交友成功率，基于此小組開發(fā)人員展開設(shè)計。首先用戶要結(jié)識新朋友就需要了解到他人生活，進入應用的第一個界面就是動態(tài)瀏覽界面，用戶可以瀏覽到最新和最熱的動態(tài)。其次用戶看到有趣的帖子，就會自然而然的想與發(fā)布者進行交流，因此私信功能也是必不可少的（私信界面見圖6）。最重要的還有就是對圖片的編輯功能，此功能內(nèi)嵌在動態(tài)發(fā)布中。其他的就是一個社交軟件中必不可少的類似于瀏覽好友動態(tài)、個人中心等功能。

2.2 總體設(shè)計

根據(jù)用戶需求將App 分為主頁動態(tài)、個人中心與消息三個部分，其中圖像編輯功能在個人中心的動態(tài)發(fā)布頁面會有體現(xiàn)，并且用戶必須登錄以后才能使用相關(guān)功能。本系統(tǒng)功能結(jié)構(gòu)如圖1 所示。

圖1 系統(tǒng)總體結(jié)構(gòu)

（1）主頁動態(tài)

主頁動態(tài)設(shè)計功能如圖2 所示，界面設(shè)計如圖3所示。該模塊又分為兩部分最新動態(tài)與最熱動態(tài)。最熱動態(tài)中又分為十個類型。該模塊主要是用于瀏覽他人動態(tài)，通過瀏覽他人動態(tài)的方式找到興趣相投的朋友，以達到社交的目的。

最新動態(tài)模塊是顯示人們最新發(fā)布的動態(tài)，動態(tài)來源于陌生人，通過瀏覽動態(tài)用戶可以找到與自己興趣相同的朋友，以此進行社交。同時，如果用戶同意提供位置權(quán)限，那么這個模塊中將以發(fā)布動態(tài)者與用戶距離的遠近作為一個重要因素，從而改變動態(tài)的排序。

最熱動態(tài)模塊用于顯示不同興趣類別下的動態(tài)熱度排行。在這個模塊中把興趣類別分十個：美食、音樂、寵物、旅行、運動、明星、搞笑、藝術(shù)、攝影、影視。用戶發(fā)布時可以添加標簽的方式來進行分類，也可以通過后臺的檢索算法進行分類。熱度高低通過點贊數(shù)、評論數(shù)、瀏覽量來綜合決定。在這個模塊中，用戶可以較為精準的根據(jù)興趣找到與自己愛好相投的朋友，提高社交效率。

（2）個人中心

該模塊功能設(shè)計如圖4 所示。個人中心主要分為兩個部分，個人中心與賬戶設(shè)置。在個人中心中，用戶可以瀏覽自己的動態(tài)，并進行發(fā)布動態(tài)等操作。在賬戶設(shè)置中，用戶可以更改自己的資料、密碼，設(shè)置私信屏蔽，進行賬號切換等操作。

圖2 主頁動態(tài)結(jié)構(gòu)圖

圖3 主頁界面

（3）消息中心

這一模塊包含兩個部分，如圖5 所示。一個是來自其他用戶的私信消息，另一個部分是其他用戶好友的動態(tài)。

私信消息的界面設(shè)計如圖6 所示，通過ListView和SimpleAdapter 創(chuàng)建私信列表。每一個對話框都有其對應的id，當用戶單擊對話框時,讀取id 就可判斷用戶在向誰發(fā)送消息。發(fā)送消息時，將id 與所發(fā)送的內(nèi)容經(jīng)行打包傳至后臺即可。

好友動態(tài)的瀏覽的界面設(shè)計如圖7 所示。界面布局緊湊，用戶可以一次瀏覽盡量多的動態(tài)，每一條動態(tài)下面都有點贊、評論、轉(zhuǎn)發(fā)的按鈕，實現(xiàn)方式與私信列表類似。

圖4 個人中心結(jié)構(gòu)圖

圖5 消息結(jié)構(gòu)圖

圖6 私信列表界面設(shè)計

（4）圖像編輯

圖像編輯是本App 的一大賣點，因此功能比較完善，包括濾鏡、貼紙、裁剪、涂鴉、編輯等，其界面設(shè)計如圖8 所示。

濾鏡功能包括有新潮、日系、優(yōu)雅、絢麗、摩登、清新、森系、不羈、黑白、膠片、優(yōu)格、怡尚、淡雅、流年等多個類型。裁剪功能可對圖片進行如9:16、4:3、1:1、3:4、16:9 的比例裁剪，還可以對圖片進行旋轉(zhuǎn)（后文會有展示）。涂鴉功能可通過seekbar 組件改變畫筆粗細，通過調(diào)色板可以任意調(diào)節(jié)畫筆顏色，還有橡皮擦可以擦去畫筆留下的痕跡。編輯功能是對圖片的亮度、對比度、飽和度進行編輯。

圖7 我的關(guān)注界面設(shè)計

圖8 圖像編輯界面

2.3 系統(tǒng)架構(gòu)

用戶用手機與應用交互，應用通過網(wǎng)絡(luò)向服務器發(fā)送或獲取數(shù)據(jù)，服務器從數(shù)據(jù)庫中讀取或?qū)懭霐?shù)據(jù)。可將整個過程分為客戶端與服務端，手機上的應用即為客戶端，之前已經(jīng)介紹；服務器端主要實現(xiàn)兩大模塊，包括服務端與數(shù)據(jù)庫的數(shù)據(jù)交互即數(shù)據(jù)庫中數(shù)據(jù)的存取以及服務端與客戶端的數(shù)據(jù)交互，客戶端主要實現(xiàn)從服務器獲取數(shù)據(jù)、數(shù)據(jù)處理以及將處理好后的數(shù)據(jù)展示在用戶界面上，其中服務端有四個Servlet 如圖9 所示，分別實現(xiàn)登錄、注冊、即時通信和發(fā)布動態(tài)的功能。

3 系統(tǒng)實現(xiàn)

3.1 對用戶數(shù)據(jù)的操作

在這款社交App 中不可避免的要對用戶進行相關(guān)操作，例如注冊、登錄、修改個人信息等。

關(guān)于注冊，由用戶填寫用戶名、密碼等信息，Android 端首先驗證填寫信息是否合法（如：密碼長度是否足夠、密碼中是否包含不合法字符等）。合法的信息將通過Android Studio 自帶的HTTP 協(xié)議傳輸?shù)胶笈_，后臺通過MyBatis 框架連通Oracle 數(shù)據(jù)庫。首先檢測數(shù)據(jù)庫有沒有相同的用戶名，如果有，則返回-1，并彈出提示框提醒用戶重名，并讓用戶修改用戶名；如果沒有，則將這組用戶名-密碼填入數(shù)據(jù)庫。

關(guān)于登錄，由用戶填寫用戶名、密碼，通過Android前端的驗證后傳到后端數(shù)據(jù)庫。搜索數(shù)據(jù)庫，若沒有該用戶名，則返回-1，并彈出提示框提醒用戶不存在該用戶名；若存在該用戶名但是密碼錯誤，則返回0，并彈出提示框提醒用戶密碼錯誤；若該組用戶名-密碼跟數(shù)據(jù)庫里存儲的用戶名-密碼相符，則返回1，并彈出提示框提醒用戶登錄成功。

關(guān)于修改個人信息，用戶進入“個人信息”界面，修改個人信息，然后提交。數(shù)據(jù)庫將根據(jù)用戶的修改情況修改數(shù)據(jù)庫信息。

圖9 系統(tǒng)整體架構(gòu)

圖10 服務端模塊設(shè)計圖

3.2 圖像編輯功能的實現(xiàn)

下面是對圖像編輯功能的展示與介紹。

對于濾鏡效果，用戶選擇不同的濾鏡，就會觸發(fā)不同的事件監(jiān)聽器，而其中每一個濾鏡都有自己的編號，根據(jù)編號程序就會將選中圖片交給相應的濾鏡處理，濾鏡來自開源的GPUImage 濾鏡庫。貼紙效果原理與此類似。

對于涂鴉效果,當用戶在觸摸屏上移動時可在屏幕上繪制任意的圖形，實現(xiàn)手繪功能只是一種假象，表面上看起來是用戶在觸摸屏上隨意的畫曲線，實際上是在畫直線，每條直線都是從上次拖動事件的發(fā)生點畫到本次拖動事件的發(fā)生點。當用戶在觸摸屏上移動時，每兩次拖動事件發(fā)生點距離都很小，多條極短的直線連接起來肉眼看起來就是曲線了。借助于Android提供的Path 類，可以非常方便地實現(xiàn)這種效果。

圖11

關(guān)于裁剪效果，有如下圖中的幾種裁剪比例，對于不同的裁剪比例都需要繪制不同的裁剪框，獲取裁剪框的寬高與坐標位置，最后通過Bitmap 中的createBitmap 方法返回裁剪得到的圖像。

關(guān)于旋轉(zhuǎn)效果，旋轉(zhuǎn)效果是通過Matrix 類實現(xiàn)的，Matrix 是Android 提供的一個矩陣工具類，Matrix 可以對圖片進行平移、旋轉(zhuǎn)、縮放傾斜等操作，對于旋轉(zhuǎn)操作，Matrix 有方法setRotate（float degreses,float px,float py）可供使用，其中通過px,py 設(shè)置軸心，degrees 控制角度。

對于圖像的對比度、亮度、飽和度Android 提供了ColorMatrix 類來供我們進行修改，CololrMatrix 中的函數(shù)setSaturation（float sat）可以設(shè)置飽和度，參數(shù)sat 值為1 時是原圖，大于1 飽和度增加，小于1 時飽和度減少，值為0 時圖像為灰色。

圖12 濾鏡效果

圖13 貼紙效果

函數(shù)setScale（float rScale,float gScale,float bScale,float aScale）用以設(shè)置亮度，參數(shù)一（rScale）：紅色參數(shù)二（gScale）：綠色參數(shù)三（bScale）：藍色參數(shù)四（aScale）：透明度各個參數(shù)的值對應調(diào)節(jié)各個顏色的亮度，0 代表全黑1 代表原圖，一般將透明度的值固定設(shè)置為1（即原圖效果），通過調(diào)節(jié)三元色的值來調(diào)節(jié)亮度。在調(diào)整對比度時必定要降低亮度，應用中通過一個5×5 矩陣達到調(diào)整對比度效果。

3.3 即時通信功能的實現(xiàn)

在此模塊中，主要使用了Socket 技術(shù)，將來自不同客戶端的消息匯總到服務器，再由服務器主動轉(zhuǎn)發(fā)給對應的客戶端，實現(xiàn)即時通信。

在Android Studio 端，創(chuàng)建一個子線程，用來初始化Socket 客戶端并連接服務器端；使用JSONObject 格式在客戶端-服務器端傳輸數(shù)據(jù)，數(shù)據(jù)包包括發(fā)送者信息，接受者信息，發(fā)送內(nèi)容，發(fā)送時間等消息；啟動異步任務來發(fā)送消息；

在Java 端，創(chuàng)建兩個list，一個存放客戶端發(fā)來的消息，一個存放連接的到服務器端的服務器端；創(chuàng)建一個socket 客戶端并啟動，并分配給每一個連接的客戶端一個唯一標識。

服務端通過數(shù)據(jù)包里的接受者消息與客戶端唯一標識的匹配，來向?qū)目蛻舳宿D(zhuǎn)發(fā)消息。

4 結(jié)語

基于Android 的圖片社交App,突出圖片社交優(yōu)勢，填補了市場空白，使社交更有效率。用戶可以更快地根據(jù)自身興趣找到與自己志趣相投的朋友。該App具有界面簡潔，功能完善，使用簡單易懂，目標人群較廣等特點。將用戶個人興趣與讀圖社交結(jié)合起來，以滿足網(wǎng)民的社交需求。

圖18

圖14 涂鴉效果

圖15 裁剪效果

圖16 旋轉(zhuǎn)效果

圖17 調(diào)整亮度