美文网首页Android优秀开源Android进阶资料 | 汇总
[干货]如何在一天之内完成一款具备cool属性的Android产

[干货]如何在一天之内完成一款具备cool属性的Android产

作者: wingjay | 来源:发表于2015-10-05 14:12 被阅读24242次
简诗

2016/12/02 更新:
新文章《我的第一款全栈side project》介绍了我在开发简诗 v2.0 中对Android端及服务端累积的一些经验。

2016/11/09 更新:
v2.0正式版下载地址:http://fir.im/vd1r
该正式版中本人添加了服务端,支持了注册登录、数据同步和截屏分享,而且添加了不少很有意思的小功能。
Android 和 Server 源码: https://github.com/wingjay/jianshi

一、简介

实现一款具备cool属性的产品是众多独立开发者都渴望的。
然而,很多独立开发者之所以迟迟无法下手,并非热情不够,而是对于整个开发流程的未知与畏惧。而本文就是介绍本人耗时一天左右完成的一款Android产品的开发流程,从idea,到产品原型及设计,再到code架构与编写
希望读者看完后能对独立开发有不同的认识,然后挥舞起手中的键盘,开发出很cool的个人产品。

二、开发流程

1. idea
首先,你要有一个idea。好的想法来自哪呢?生活。多观察生活中点滴,每当你对现有事物有要抓狂的感觉时,往往就意味着一个绝妙idea的诞生。

当然,不要再闹`只差一个程序员`的系列笑话啦!

举个例子,本人有点文艺情怀,非常希望有个好的记录工具让我以一种优雅而复古的方式记录文字。然而,现有的记录工具大都集社交、多种信息流为一体,绚丽的界面反而让我感觉到一种缺失,找不回曾经字字斟酌的写作感觉。
所以,本文要介绍的就是我为自己开发的一款(自认为)优雅、简洁的写作应用

2. 产品原型和设计稿

这一关,很多开发者不重视且不擅长。

不过也能理解,一般而言,developer更加注重代码层面的美观,逻辑的抽象与性能的优化。然而,作为独立开发者,我们的目标是一款受用户喜爱的产品,而不仅是深藏巷中的好酒。而用户对一款产品最直观的感受,就是界面与交互,只有当用户对UI、UX满意之后,才会去深入感受产品的功能与速度。

 所以,一位合格的独立开发者,一定会在第一时间找到自身产品的槽点然后骂骂咧咧又毫不犹豫地把它修掉。

文末,本人推荐了一些相关的工具,可以帮助开发者快速设计产品原型。
本文的设计草稿来源于Kevin《Producter》一书中的想法,下图为草稿图纸。

小记设计稿
从设计图纸中可以看出,该设计很古典、简洁,而又不失个性,正好是我所追求的。
ok,下面开始写代码!

3. Android架构
各位看官不要急着啪啪啪敲键盘,先思考下这个app会涉及到哪些技术细节,以防后知后觉。

a. 自定义View,容易发现,该产品有三个特点,一是`红点按钮`,二是`竖排文字`,需要自己写新的view来实现;
   三是`字体`,设计稿采用了`康熙字典体`与`文悦古仿宋`。
b. SQLiteDabase数据库.这款产品核心功能是`写和读`,第一版本暂不作服务器端开发(后续本人会抽空实现后台)。
c. 时间,内部的时间会以`中文繁体`的形式显示给用户,如`2015.10.6`会显示成`二零一五年 十月 六日`,
   所以需要实现一个`时间转换器`把数字转换为繁体时间格式。
d. 还有一个容易被忽视的,`布局`。设计稿里看似排版简洁,实际下了很大功夫在`文字排版及间距设计`上。
   作为一款记录工具,文字排版可谓是核心一环,直接影响用户体验。
基本点

4. Code实现
好了,下面就开始舞动键盘啦。

  • 想好产品的名字,本款产品直接命名为<简诗>,寓意简单的小诗,简单的生活

  • Android studio创建一个新工程。包名 com.wingjay.jianshi

  • 创建需要的Activity。这里包含了SplashActivity[产品介绍页], MainActivity[主页面], EditActivity[编辑界面], ViewActivity[浏览界面]。这些是主要的,其它的后续再加。

  • 先完成视图层的实现。

    • SplashActivity[最初产品介绍页] 可以放一张简洁的介绍页面,用handler定时1秒钟跳转到主页面。
    • MainActivity[主页面],先实现竖排文字VerticalTextView,原理很简单,给每个文字字符后加'\n'即可。然后实现红点按钮RedPointView,写一个红色circle shape作为背景,允许更改里面的text内容。
    • EditActivity[编辑界面]ViewActivity[浏览界面] 布局简单,主要包含两个EditText 和 一个RedPointView来执行保存等,这里我们先不实现竖排文字编辑,只要横排即可。
    • 字体,本人采用了TpldKhangXiDictTrial.otf暂时作为主要字体,不过,在编辑和浏览界面的字体仍保持系统默认,防止有些字体丢失之类问题。
  • 然后进行逻辑层的实现。

    • 时间转换器,即将数字时间转化为繁体中文时间,2015.10.6->二零一五年 十月 六日,对于,可逐个字符转换:2->,0->。对于,若小于10则逐个转换,但大于等于10要注意,如11->十一而非一一21->二十一而非二一
    • 获取时间戳,上面讲了将数字时间转换为繁体时间,那么如何获取数字时间呢?这里采用Joda Time 来获取时间如getYear(), getMonthOfYear(), getDayOfMonth()即可。在数据库及应用内部使用的都是Joda Time转换来的秒级时间戳,只有在显示给用户时才把时间戳传给转换器去显示。
  • 最后是数据层的实现

    • 数据库设计,我们要设计一张日记表,包含了
  • id自增长

  • device_id设备id,以后如果要添加帐号及上传服务器可以此标记每个日记来源

  • title,content记录内容

  • created_time, modified_time 更改时间,存储以秒为基准的时间戳

  • deleted_flag 删除标记,若为1则表示删除

    • SQLiteDatabase,需要实现两个类:DbOpenHelperDbUtilDbOpenHelper继承SQLiteOpenHelper,主要负责db的创建更新和对外提供db实例来进行读写。DbUtil主要封装db操作,如读取日记getDiary(long diaryId),该函数会利用DbOpenHelper获取SQLiteDatabase实例来进行读写。

三、粗糙版demo

完成上面几个步骤后,基本可以搭建产品demo,正常实现记录与阅读的功能。而且产品也具有一定味道,不至于湮没大众。读者只需要进行一些bug调试工作即可。
下面给大家看第一版粗糙的demo

介绍页
主界面
阅读页
编辑页

四、改进版demo

当然,上面有点粗糙,而且不支持竖排文字,这是原版设计风格的一大缺失,所以本人在改进版中支持用户选择竖排浏览方式,而且作为一款新产品,获取用户的反馈是极为重要的,故也添加反馈入口(由于没搭后台,只能先让用户以邮件形式反馈😭)。
下面是改进版的demo截屏。

介绍页 主界面 支持`左右滑动`的竖排方式浏览 支持`上下滑动`的横排方式浏览 设置界面 简诗-new icon.png

五、下载及版权

  1. 36Kr NEXT推荐。
    稀土掘金 推荐
    [稀土掘金日报] andriod开发新资源新干货
  2. apk 下载网址:JianShi lastest version in Fir.im
  3. 源代码:简诗——GitHub,欢迎各位fork并和我一起丰富简诗
  4. Follow me. 欢迎在Github上follow我哦,😄
  5. 若有幸简诗得到各位喜爱,希望能把邮箱发给本人(私信),之后若有更新会通知你的😄
  6. 设计草稿创意使用已获得作者Kevin同意
  7. 本产品用作分享与学习,若转载须征得本人同意,勿作任何商业用途

六、服务端

本人从2016/09月开始进行服务端的开发,最新的代码请关注 https://github.com/wingjay/jianshi

目前已经完成了v2.0的服务端开发。

如果读者有任何意见,可以与本人联系:yinjiesh@126.com

感谢!

七、必备工具推荐

谢谢!

wingjay

GitHub: https://github.com/wingjay
微博: http://weibo.com/u/1625892654

相关文章

网友评论

  • addqian:学习了,感谢博主的分享哈
  • 流穿枫:我想学学python写的服务端。期待楼主早日说一说服务端的实现流程。
    wingjay:@流穿枫 可以看下这篇文章 http://www.jianshu.com/p/39dce598faf1
  • itarbo:在github上看到,star了。期待博主讲讲服务端这部分的内容~~
  • jijihu123:报错
    Error:Unknown host '这是在主机名解析时通常出现的暂时错误,它意味着本地服务器没有从权威服务器上收到响应。'. You may need to adjust the proxy settings in Gradle.
    <a href="toggle.offline.mode">Enable Gradle 'offline mode' and sync project</a><br><a href="https://docs.gradle.org/current/userguide/userguide_single.html#sec:accessing_the_web_via_a_proxy&quot;>Learn about configuring HTTP proxies in Gradle</a>
    wingjay:@jijihu123 我用的是2.2.2 gradle
    jijihu123:@wingjay 编译的时候,貌似是gradle-1.22.1下载不下来,但是百度一下这个版本的gradle就找不到
    wingjay:@jijihu123 是编译时问题还是运行
  • 腾儿飞:小米商店里的『简诗』是你自己发布的么?有色情广告……:sweat:
    wingjay:@腾儿飞 可以的!:smile:
    腾儿飞:好吧,那我去举报:smile:
    wingjay:@腾儿飞 那个是假的,我没在小米发布。。。。
  • 杨书书:当从sspai上看到的时候惊呆了,居然真的是昨天在github上看到的简诗,居然是这样的简诗! 对了,提一个小想法,关于时间转换,比如二十二日,转换为廿二日更有味道。希望采纳
    wingjay:@死理性 谢谢建议
  • 喜昌XICHANG:简诗就是不能直接生成图片分享,非要手机截屏才可以!那个小记的问题就是直接可生成图片,但是界面下面的改,存,删 三个字会一起生成。都有点不完美啊!
    喜昌XICHANG:@wingjay 那我重新下一个,赞。
    wingjay:@喜昌XICHANG 新版本里2.0开始就支持生成图片分享。
  • SheepYang:学习了,很好。从简单又不失想法的小应用做起,比较容易获得成就感和继续做出好作品的动力。。。。之前花了一个月做的小游戏,到了最后调试测试游戏数据的时候突然没动力了,不知道测试完上架后会有什么反应😳
    wingjay:@SheepYang 独立开发最容易丧失热情了,所以要在有热情的时候尽快做完:joy:
  • a66e22e63628:张哥推荐后就去下载了,从此写日记指定用这个APP,很是喜欢这种风格。而且目录是根据撰写发布的时间显示标题位置的,这种小细节东西真的让人觉得惊喜。
    PS:想请教一下,您当前发布的版本,撰写文章的内容,繁体字是用的什么字体,可否告知?感激不尽!
    a66e22e63628:@wingjay 嗯,看到啦。谢谢您。
    wingjay:@右岸玄米茶 谢谢:smiley:文悦古典明朝体
  • Joy_yang17:请问~为什么源码下下来布局文件老是报错呢
  • 5b9b8a5e765e:你好,个人开发者怎么弄版权证明,各种审核不通过。更可气的是豌豆荚,说什么内容单一的应用不能发布。气的我要吐血。
    止念观息:国内app市场的现状
  • 66cda3e1445d:是eclipse开发的么?Android studio可以导入么?
    66cda3e1445d:@wingjay 是Android Studio?好像不能导入
    wingjay:@hiyunnet 没有用eclipse
  • 时序丶盒子:这个我服,而且还开源,赞。
  • abfa535ff588:这款app确实很漂亮在这里我有一点点自己的建议:
    1. 日期改用繁体的:例如 一:壹;
    2. 加上诗词的作者, 如在标题和诗体正文间加上作者。
    不知道会不会更有韵味一点 :smile:
    wingjay:@SQSong :+1:可以的
  • Joy_yang17:请问怎么把时间转化成繁体字啊
  • 元涛:应用看起来真的很棒,项目中也用到很多新的技术框架,不过我在看Activity相关类的时候,感觉业务和View的控制都在一个Activity类中,感觉有点小乱。
    wingjay:@元涛 嗯我并没有采用MVP之类的模式去抽离逻辑
  • Joy_yang17:请问博主,我解压了apk,可是还是图片资源,请问图片资源在哪里啊
  • biubiutoo: :+1: 厉害了我的哥
  • 38fd35586131:群主,我在用as 2.1.1 打开此项目时,为什么报 Error:SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
    请帮忙解答下 :sob:
    38fd35586131:@wingjay 感谢群主解答。我是指定了sdk.dir=C\:\\Users\\Administrator\\AppData\\Local\\Android\\sdk。可能不是这方面问题。
    后来,我找到一篇http://blog.csdn.net/qq_32365567/article/details/52954805 才解决了问题。
    wingjay:@2729396576 你要在local.properties指定自己的sdk目录
  • 37cf6f8962a4:为什么不加上注释呀?我相信很多像我这种菜鸟来说好多都看不懂。有没有专门的一篇文章进行详解的啊? :joy:
    wingjay:@岑几何时 如果需要的话可以考虑写两篇哦,一篇写Android里采用的新技术,另一篇从Android角度写Server的
    37cf6f8962a4:@wingjay 恩,一般的代码都能看懂,但是涉及到最新的技术有些api有点蒙 :joy: ,我相信你这个APP如果有一篇文章专门进行详解,会更受欢迎的,毕竟刚出来的菜鸟和一年多经验的都能学到很多东西 :blush:
    wingjay:@岑几何时 代码注释吗?
  • b33142447363:导入你的项目报这个错误
    D:\jianshi-master\android\app\build.gradle
    Error:(113, 0) Cannot invoke method getInterfaceAddresses() on null object
    wingjay:@緣愛孤單 因为我自己网卡是en0,我已经更新并push了,麻烦再拉下
  • 阿吹md:很棒哦,一早就看到张哥推你的文章,果断过来收藏 :heart_eyes:
    wingjay:@阿吹md 谢谢,希望对你有用
  • 5def229116a5:非常不错,以图片的形式进行分享,图片可以设为壁纸,很有韵味
    wingjay:@娃哈哈number1 :smile:
  • 77fb92956a34:好东西!先收藏这
  • 月下白衣:厉害,wingjay大哥是全栈工程师呀。大赞!
    wingjay:@月下白衣 在朝这个方向努力哈哈
  • wingjay:各位好,最新的版本v2.0.0下载地址:http://fir.im/vd1r 。不是老的http://fir.im/b7kr啦!
  • 街道shu记:被stormzhang推荐是什么感觉啊:smile::smile::smile:
    wingjay:@StriveCheng 感觉要努力写更多好的文章和作品给大家😄
  • zxwei09:i like
  • 洛奇洛:谢谢你楼主 支持这种干货!话说 你被stormzhang推荐了哦!😁😁
    wingjay:@rockywang :smiley:
  • Taikyo:很赞的APP,楼主我点那个阅的时候界面就清屏了,也没显示其他的出来,所以前来告知你一下
    Taikyo:@wingjay 好的,可能是我没写吧,加油,学习了
    wingjay:@Meteor_Y 是因为你没写吗?可以下载最新版2.0哦
  • YEN_JianShu:作者您好 请问一定要服务端吗 只用客户端行不行啊
    wingjay:@YEN_JianShu 是的
    YEN_JianShu: @YEN_JianShu 那直接运行安卓那个文件夹下的东西?不用管server下的?
    wingjay:@YEN_JianShu 当然可以啊,现在数据存在本地不需要服务端
  • kolen_j:感谢
  • Wang_Guan:果然是經過一番設計的,看起來就好有趕腳~~~
  • 语轻年:界面和 [ 素记 ] 好相似,难道也有theme或者template一说?Anyway感谢分享。
    wingjay:@语轻年 我没有用过 素记,界面是自己写的哈
  • 谢三弟:今天才看到,好nice
    wingjay:@谢三哥 谢谢:smile:
  • 7e77342514f3:最近发现的、也下载了。简简单单的挺喜欢的。不过没有设置可以调节字体大小的吗
  • HelloVass:哈哈,灰常好,但是我给作者提一点意见哦,简书上的这篇文章 “** **” 滥用了,希望有空能改改。。。
  • c8d706efd7de:非常感谢,我下载安装了,感觉很好,从github上拿下源码来在AndroidStudio上准备自己编译,可怎么也弄不好。
    wingjay:@Zealoussnow 可以把编译出的错误在google上搜一下哦,一般都会有答案。
  • f5e694c158a2:依赖的库的版本都比较旧。why.
  • 扯淡的橘子:竖排显示emoji乱码, 横排就正常
    wingjay:@Annj 周末会去修好,多多反馈☺
  • 十点半的牛奶:非常感谢,读书千遍,不如自己做出一个。
    47baa0c61673:作者在上海哪个公司,真想跟你这样有思想的人学习,做java1年了,现在公司让我学安卓,自学了2个月,想做一个让自己可以吹牛逼的app,公司没人带感觉学得很慢
    wingjay:@十点半的牛奶 同时欢迎关注我的 https://github.com/wingjay哦
  • 小鄧子:来晚了,大赞一个,表示支持😊
    wingjay:@小鄧子 谢谢!欢迎下载,多多反馈,把简诗做的更令用户满意! http://fir.im/b7kr
  • f8ed42327f60:真心赞,已经克隆下来看源码了,感谢作者。
    wingjay:@Loppis 有新的想法欢迎提供给我~https://github.com/wingjay
  • KuTear:和IOS的小记差不多的界面,学习学习
    wingjay:@KuTear 嗯,欢迎下载 http://fir.im/b7kr。代码方面可关注github: https://github.com/wingjay
  • 微凉一季:灰常赞
    wingjay:@微凉一季 谢谢!欢迎下载使用: http://fir.im/b7kr 或 关注项目开发进展 https://github.com/wingjay
  • cfanr:不错,虽小巧,但挺有意思的
    wingjay:@軍哥稀飯兒 欢迎下载使用: http://fir.im/b7kr 或 关注项目开发进展 https://github.com/wingjay
  • APPamateur:楼主你好~文章超赞,是否可转载,会注明作者和出处 :relaxed:
    wingjay: @APPamateur 可以的,转载后给我个链接即可☺
  • 50c8dc99c5fa:不知道怎么回事,在我的MX2上面,设置跟阅读很难点击成功... :flushed:
    wingjay:@kingtami 显示效果如何呢,可以在‘反馈’中截图给我哦。新版本http://fir.im/b7kr
  • lyonse:学想法来了
    wingjay:@lyonse 欢迎,若有想法多多反馈,也欢迎关注我的GitHub: http://github.com/wingjay/jianshi
  • qiying:赞,下载使用后,首先发现一个缺陷,竖排的题目过长时么有自动换行
    wingjay:有更新版本哦。http://fir.im/b7kr
    wingjay:@qiying 谢谢反馈,马上去修😄
  • 一一无痕:赞👍~谢谢无私的分享给我~
    wingjay:有更新版本~
    一一无痕: @iam_wingjay 👌
    wingjay:@风过无痕3 哈哈,欢迎使用并提供反馈哦
  • Leo_View:正在喜欢上敲键盘的感觉
    wingjay:@AMaker 加油!欢迎下载并提供反馈哦,新下载地址:http://fir.im/b7kr,也可以follow我的github:https://github.com/wingjay/jianshi 。一起加油
  • Leo_View:正在尝试实现idea,受教了。
    wingjay:@AMaker 有更新版本哦 http://fir.im/b7kr
  • 天赐1314:学习了
    wingjay:@天赐1314 哈哈,欢迎下载并提供反馈哦,新下载地址:http://fir.im/b7kr
  • 0171472b44b5:佩服
    wingjay:@用户5588419775 你好,云存储功能现在正在开发中,可以关注我的Github: https://github.com/wingjay/jianshi
    d6e3ce891ccc:@wingjay 请问这款app能实现备份功能吗,如果换手机了,以前的记录还能找回来吗
    wingjay:@匿bin 谢谢你,欢迎下载并提供反馈哦,http://fir.im/b7kr
  • 一一无痕:赞,谢谢分享~
    wingjay:@风过无痕3 有更新版本哦 http://fir.im/b7kr
    一一无痕: @iam_wingjay 收到~抱拳~谢谢👍~
    wingjay:@风过无痕3 欢迎下载并提供反馈哦,新下载地址:http://fir.im/b7kr
  • 9945af210235:天拉撸,作者的app超级美…最近正好在用hexo写blog…收下了…太有感觉了
    wingjay:@jackalcloud 有更新版本哦 http://fir.im/b7kr
    9945af210235:@iam_wingjay 我已经在用了…谢谢…
    wingjay:@jackalcloud 可以在此处下载哦,欢迎提供反馈哦,新下载地址:http://fir.im/b7kr
  • chocolatezhu:很好,支持
    wingjay:@chocolatezhu 谢谢!欢迎下载并提供反馈哦,新下载地址:http://fir.im/b7kr
  • 4885d97f626a:天哪,好美的app
    4885d97f626a: @iam_wingjay 可是下载不到,这是个问题
    4885d97f626a: @iam_wingjay 我想问问为什么搜索不到的?
    wingjay:@江方 谢谢!欢迎下载试用,如果有任何反馈可以直接发到我邮箱哦
  • 27bf87f59364:谢谢分享,支持你
    wingjay:@ZUK001 欢迎下载并提供反馈哦,新下载地址:http://fir.im/b7kr
    wingjay:@ZUK001 谢谢!
  • WeLMusic:👍。作为一个程序开发者真的很棒。
    wingjay:@张屿之 欢迎下载并提供反馈哦,新下载地址:http://fir.im/b7kr
  • 48a18db9087c:很有收获
    wingjay:@windeyexz 欢迎下载并提供反馈哦,新下载地址:http://fir.im/b7kr
  • 大米的木头:前不久也做了一个记事本(单机),不过和作者的一相比较自己的好粗糙。很期待有服务端的
    wingjay:@iam_wingjay 下载地址:http://fir.im/b7kr 或 关注 https://github.com/wingjay/jianshi。谢谢
    wingjay:@木小书 嗯,欢迎下载试用,如果有任何反馈可以直接发到我邮箱哦
  • 江南海北的雪:自己如何开发App,真是不明白。应该说不难,可以实现。但服务器端如何解决,要租用服务器吗,还是自己设置一个服务器?
    两面都是山:@Ljson 怎么使用啊
    Ljson:@JLuH 直接用免费的第三方云服务
    江南海北的雪:@江南海北的雪 用于商业项目呢
  • 睚眦:这个东西特别有味道,楼主加油!
    wingjay:@睚眦 换了一个分发平台,请在此处下载:http://fir.im/b7kr
    睚眦:@iam_wingjay 嘿嘿,怎么下载呀,点了下载地址没反应😂
    wingjay:@睚眦 嗯,谢谢,可以下载试用哦,如果有新的想法也欢迎给我各种反馈

本文标题:[干货]如何在一天之内完成一款具备cool属性的Android产

本文链接:https://www.haomeiwen.com/subject/lzbgcttx.html