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

王昕瑞，林忠

（南京工程學(xué)院，南京211167）

0 引言

2018 年1 月31 日，中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）在京發(fā)布第41 次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》，截至2017 年12 月，我國網(wǎng)民規(guī)模達(dá)7.72 億，普及率達(dá)到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 和微信主要是熟人社交，通信雙方大部分互相認(rèn)識，結(jié)識新朋友這方面功能較弱，并不是特別側(cè)重。

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

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

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

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

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

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

2.1 需求分析

本應(yīng)用是一個社交應(yīng)用，設(shè)計目的是為了以圖片為媒介提高社交效率和交友成功率，基于此小組開發(fā)人員展開設(shè)計。首先用戶要結(jié)識新朋友就需要了解到他人生活，進(jìn)入應(yīng)用的第一個界面就是動態(tài)瀏覽界面，用戶可以瀏覽到最新和最熱的動態(tài)。其次用戶看到有趣的帖子，就會自然而然的想與發(fā)布者進(jìn)行交流，因此私信功能也是必不可少的（私信界面見圖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)的方式找到興趣相投的朋友，以達(dá)到社交的目的。

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

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

（2）個人中心

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

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

圖3 主頁界面

（3）消息中心

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

私信消息的界面設(shè)計如圖6 所示，通過ListView和SimpleAdapter 創(chuàng)建私信列表。每一個對話框都有其對應(yīng)的id，當(dāng)用戶單擊對話框時,讀取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)格、怡尚、淡雅、流年等多個類型。裁剪功能可對圖片進(jìn)行如9:16、4:3、1:1、3:4、16:9 的比例裁剪，還可以對圖片進(jìn)行旋轉(zhuǎn)（后文會有展示）。涂鴉功能可通過seekbar 組件改變畫筆粗細(xì)，通過調(diào)色板可以任意調(diào)節(jié)畫筆顏色，還有橡皮擦可以擦去畫筆留下的痕跡。編輯功能是對圖片的亮度、對比度、飽和度進(jìn)行編輯。

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

圖8 圖像編輯界面

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

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

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

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

在這款社交App 中不可避免的要對用戶進(jìn)行相關(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)于修改個人信息，用戶進(jìn)入“個人信息”界面，修改個人信息，然后提交。數(shù)據(jù)庫將根據(jù)用戶的修改情況修改數(shù)據(jù)庫信息。

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

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

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

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

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

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

圖11

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

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

對于圖像的對比度、亮度、飽和度Android 提供了ColorMatrix 類來供我們進(jìn)行修改，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）：藍(lán)色參數(shù)四（aScale）：透明度各個參數(shù)的值對應(yīng)調(diào)節(jié)各個顏色的亮度，0 代表全黑1 代表原圖，一般將透明度的值固定設(shè)置為1（即原圖效果），通過調(diào)節(jié)三元色的值來調(diào)節(jié)亮度。在調(diào)整對比度時必定要降低亮度，應(yīng)用中通過一個5×5 矩陣達(dá)到調(diào)整對比度效果。

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

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

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

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

服務(wù)端通過數(shù)據(jù)包里的接受者消息與客戶端唯一標(biāo)識的匹配，來向?qū)?yīng)的客戶端轉(zhuǎn)發(fā)消息。

4 結(jié)語

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

圖18

圖14 涂鴉效果

圖15 裁剪效果

圖16 旋轉(zhuǎn)效果

圖17 調(diào)整亮度