基于Material Design设计的分享文字图片的APP

简介: 写在前面:这个项目是自己当时为了准备面试而做的,由于时间匆忙,水平有限,项目多多少少存在一些问题。代码的整洁性与复用性,以及整体架构的搭建都不尽人意,大家看看里面的一些效果就好。

写在前面:这个项目是自己当时为了准备面试而做的,由于时间匆忙,水平有限,项目多多少少存在一些问题。代码的整洁性与复用性,以及整体架构的搭建都不尽人意,大家看看里面的一些效果就好。

Material Design–Google在I/O 2014上推出了新的设计语言,核心设计原则就是隐喻,视觉设计,动画。引用基友的话就是,遵循用户体验来实现一些让用户用起来舒适满意的动画效果及设计。CSDN,Github,开源中国上出现了许多优秀的Material Design开源项目,各种好看的库文件也可以直接拿来用,十分方便。

废话不多说,直接上效果图

1.主界面
这里写图片描述

主界面搭建:
Toolbar + DrawerLayout实现的菜单侧滑
PagerSlidingTabStrip+viewpager+fragment实现选项卡左右滑动
RippleEffect实现的点击水波纹效果
RoundImageView实现的圆形头像
FloatActiconButton悬浮按钮的实现
参考资料:

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0303/2522.html
http://blog.csdn.net/lmj623565791/article/details/45303349

2.滑动变色与下拉缩放

这里写图片描述

之前一直想用Toolbar与Palette结合来实现,最后还是采用了监听viewpager的滑动来实现Toolbar的变色
PullToZoomScrollView实现下拉自动放大头部View
参考资料:

http://blog.csdn.net/bbld_/article/details/41439715
http://www.jcodecraeer.com/a/opensource/2014/1208/2132.html

3.头像上传
这里写图片描述

Material Dialog:Google Material 风格Android对话框,灵活方便
参考资料:
http://www.open-open.com/lib/view/open1415171087340.html
这里之前一片博客写的很清楚,选择手机相册与拍照上传两种方式

http://blog.csdn.net/tyk0910/article/details/50236233

4.修改昵称
这里写图片描述

修改完昵称以后,记得在其他界面重写onResume()方法来刷新昵称与头像,达到即时更新效果

5.修改密码
这里写图片描述

TextInputLayout带动画的输入框,这种效果很好的输入框真心值得推荐
参考资料:

http://www.mamicode.com/info-detail-965904.html

6.发送文字
这里写图片描述

这里有个小细节就是初始化界面的时候,会自动定位到你当前的位置,然后自动显示在地址栏。
CircularProgressButton处理耗时的操作的动画button
参考资料:

http://blog.csdn.net/hongjinqun/article/details/30221201
http://blog.csdn.net/tyk0910/article/details/50146149

7.发送图片

这里写图片描述

这个算是APP最难处理的地方了,参考了好多网上的资料进行修改整理,最后达到了这种效果。选择,预览,删除,上传,显示。

8.点击预览

这里写图片描述

CollapsingAvatarToolbar 头像随ListView滚动缩回到ActionBar特效

原本想预览页面可以用GridView+ImageView实现,后来看到一篇博客,用Dialog实现的,方便又轻巧
参考资料:
http://blog.csdn.net/soul_code/article/details/50448443

9.下拉刷新与上拉加载
这里写图片描述

需要注意的是分页查询的使用与显示
Android SwipeRefreshLayout下拉刷新与上拉加载,之前一片博客说的很清楚:

http://blog.csdn.net/tyk0910/article/details/50427531

10.登录注册
这里写图片描述

切换账号的时候,记得清空缓存再进行登录注册。

11.服务器后台

我用的是Bmob后端云,所有数据都是从上面存储与读取的,开发文档很详细。这是部分数据截图
这里写图片描述
参考资料:

http://www.bmob.cn/

12.其他技术
图片的上传,下载,缓存,我用的是Universal-Image-Loader来异步加载网络图片:
参考资料:
http://blog.csdn.net/tyk0910/article/details/50375070

回调的使用:
http://blog.csdn.net/tyk0910/article/details/50564917

其他就是数据的显示,更新,存储,读取,按照开发文档以及业务逻辑就行

最后就是贴一下使用的库文件以及jar包:
这里写图片描述

这里写图片描述

目录
相关文章
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1155 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
前端开发 UED 开发者
uni-app:去除导航栏&跨域的问题&blobe查看图片&v-deep&页面操作 (五)
本文介绍了几个前端开发技巧:1) 如何通过设置 `navigationStyle` 为 `custom` 去除顶部导航;2) 解决跨域问题的方法,包括使用 `dotenv` 加载全局变量和配置 `devServer` 的代理;3) 使用 Blob 和 FileReader 查看图片;4) 利用 `v-deep` 深度作用选择器修改样式;5) 修改页面左上角返回按钮的行为。
|
7月前
|
移动开发
uni-app使用v-html输出富文本图片溢出解决
uni-app使用v-html输出富文本图片溢出解决
715 1
|
4月前
|
Java Go Windows
【应用服务 App Service】App Service中上传文件/图片(> 2M)后就出现500错误(Maximum request length exceeded).
【应用服务 App Service】App Service中上传文件/图片(> 2M)后就出现500错误(Maximum request length exceeded).
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
|
5月前
|
机器学习/深度学习 人工智能 文字识别
文本,文字扫描01,OCR文本识别技术展示,一个安卓App,一个简单的设计,文字识别可以应用于人工智能,机器学习,车牌识别,身份证识别,银行卡识别,PaddleOCR+SpringBoot+Andr
文本,文字扫描01,OCR文本识别技术展示,一个安卓App,一个简单的设计,文字识别可以应用于人工智能,机器学习,车牌识别,身份证识别,银行卡识别,PaddleOCR+SpringBoot+Andr
|
7月前
|
JSON 自然语言处理 Java
Android App开发语音处理之系统自带的语音引擎、文字转语音、语音识别的讲解及实战(超详细 附源码)
Android App开发语音处理之系统自带的语音引擎、文字转语音、语音识别的讲解及实战(超详细 附源码)
386 0
|
7月前
uni-app 157发布朋友圈-批量上传图片
uni-app 157发布朋友圈-批量上传图片
69 0
|
7月前
uni-app 114发送图片功能
uni-app 114发送图片功能
51 0
|
7月前
|
小程序 API
uni-app上传音频,图片步骤
uni-app上传音频,图片步骤
154 0

热门文章

最新文章