iOS,如何模仿一个App

前言

作为一个IOS程序员,闲的时候也想自己做一个app练练手,又苦于没有UI设计,也没有好的idea,所以只能先模仿别人的App了,但是也会遇到以下问题
**
①不知道怎么入手?怎么设计
**
**
②app中的素材、图标要自己找吗、没有UI妹子给你切图怎么办,
**
**
③没有数据怎么办?假数据也不会做怎么办
**
**
④编写程序中该注意些什么
**

** 以下就从上面的三点开始介绍**

Tips:一下均为我个人的见解,有疑问或者建议请告诉我
以我的高仿项目半糖App为例

**
**

一、不知道怎么入手?怎么设计

首先,整体浏览一下官方的半糖App,

![ ![ ![IMG_0095.PNG](http://upload-images.jianshu.io/upload_images/1299512-202a765f086ca351.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://upload-images.jianshu.io/upload_images/1299512-fc3a2b9ccf1b9894.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://upload-images.jianshu.io/upload_images/1299512-ca997e779c4318c4.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

上面几张图片分别对应的是 首页、广场、消息中心、个人中心,,rootViewController是 UITabBarController,以首页为例

tmp696dc36e.png

Tips:

  • 1 整体上分为 两大部分 headerView 和UICollectionView
  • 2 每次点击标签 "最新" "热门"等,collectionView 都会滚动到对应标签的tableView中,
    collectionView结构上来看就是这样:
tmp59d229d4.png

也就是 tableview 添加到collectionViewCell.contentView中显示出来

headerView的结构如下

tmp5b876e7d.png

这一部分组合的自由度较大,然后每个按钮都设置不同tag,然后所有按钮添加相同的方法,比如

- (void)clickCenterWithTag:(UIButton *)sender{
  if(sender.tag == 按钮tag值){
    }
} 

当然也可以设置一个block回调,参数为按钮tag值,在ViewController中 给block赋值的时候,比如

headerView.clickCenterBlock = ^(Int tag){
  //在这里进行判断,tag等于多少,进行什么操作
}

还有通知、delegate等方法都可以,就不一一细说了。。

之后的页面没有太过于复杂的结构,对照首页,也可以一一将View剥离出来

**
**

二、app中的素材、图标要自己找吗、没有UI妹子给你切图怎么办

① app中好多按钮的图标、背景图片哪里找

大招:电脑上在iTunes中下载你要模仿的app,找到它的存储目录(具体方法百度。)

tmp09a816eb.png

接着,把 后缀.ipa 改为.zip ,然后把 zip文件打开

tmp062cdaed.png

显示包内容后,可以看到大部分你所需要的素材图片了

② 切图标注问题(切图我就不说了,我只会截图,ps什么的都不会)

手机安装你要模仿的app,然后截屏,把图片发到电脑上,然后安装Mark Man工具,

tmp1e090874.png

,然后将图片拖到Mark Man中,

tmp1be40fe1.png

然后就可以随心所欲地标注,取色等等
**
**

三、没有数据怎么办?该怎么去抓包

没有数据有两个方法:
① 做假数据,数据写死,这个不是很现实,因为你要模仿的app肯定有图片,这么做假数据得到猴年马月。。。
② 抓包,其实过程不是很繁琐
下面讲一下抓包的过程:

* 1 工具

tmp4f89f5bc.png

Charles 百度上很多可以下载,试用版即可,不需要破解

使用过程:

①将手机和电脑连上同一个wifi,打开抓包工具
tmp1be62615.png
②打开半糖app
tmp11e3e193.png

抓到半糖app的数据,点进去如下:

tmp6226dd3d.png

这就是半糖app的数据,如果没有你想要的,别急,你先浏览你要抓数据的页面,这时候会发现这个目录有新的数据返回,点进去可以看到


tmp7a92a51b.png

点击 JavaScript按钮可以看到原始的json数据

tmp7e5e4b14.png


将json数据 拷贝到文件中存储起来,这就是本地数据

②下面说一下 如何解析数据,以swift为例,OC类似参考一下。
比如我们将刚刚的json存为 test.rtf(别问我为什么是rtf,因为mac上记事本只有这么一个,当然你也可以存为txt格式等),然后把test.rtf拖到项目中来

tmp4554b12a.png

上代码:
Tips: 在这里,我们首先要明白一点,字典即为对象的一种表现形式。
先把模型写好:

class TopicModel: NSObject {
  //先写两个属性
  var id: String?
  var title: String?

  //从json中读取数据 并给model赋值(以下为Swift代码,OC请参考),封装成类方法更方便
  class fun readDataFromJSON() -> TopicModel{
    //创建返回的model 
    let topicModel = TopicModel()
    //读取JSON文件
    let path = NSBundle.mainBundle().pathForResource("test", ofType: "rtf")
    let nsData = NSData(contentsOfFile: path!)
     /// json整体转换为字典
     let Dict = ( try! NSJSONSerialization.JSONObjectWithData(nsData!, options:.AllowFragments) ) as! NSDictionary

  //看上面的图片中,你要抓得数据处于 四层目录下,一步一步来

  //先把 "data"从json文件中 剥离出来
    let Data = Dict.objectForKey("data") as! NSDictionary
  
  //从Data 中把 "topic"数组剥离出来,由图片可以看到 topic是一个数组 ,存了好多个相同类型的数据
    let topicData = Data.objectForKey("topic") as! NSArray

  //topic数据已经获取,我们先将第一个元素剥离出来,
  // 定义一个object对象,并转换为字典类型
  let obj = topicData[0] as! NSDictionary
    
// 现在将obj字典的值 赋给 我们定义的topicModel
  topicModel.id = obj.objectForKey("id") as? String
  topicModel.title = obj.objectForKey("title") as? String

    //end: 到现在 给model赋值就可以了,返回model即可

  return topicModel
  }
}

在需要用到model的地方,直接调用 Topic.readFromJSON 就会返回你要的model

**现在看来,抓包并没有我们想象中的繁琐 **

四、编写程序应该注意什么

Tips: 这一部分只是参照我的经验来看,如有建议或者意见请与我交流,望不吝赐教

① 代码尽量要复用,封装控件前看看是否几个控件相似,可以放到一起,比如:

这个是 广场中的标签栏


tmp154d38d0.png

这个是个人中心的标签栏

tmp05e7ce45.png

这个是清单详情的标签栏

tmp69f75d0d.png

三个控件有不相同的地方,比如标签中的分割线,上面的边框,字体大小,但是,控件中的所有逻辑都一样,这就够了,可以写一个控件,加一些参数,比如说 是否显示边框,frame大小,中间是否有分割线,这样做的话,封装一个控件就可以满足 整个app中类似的控件

② 方法,或者称之为函数,封装也尽量放到一起,比如

app中有很多对图片进行的操作,诸如 放大,裁剪,加边框,可以这样:

//将 这些方法都封装为 类方法 ,OC中也就是 "+"方法
class ImageOperationCenter: NSObejct {

    class func ScaleToFize(image: UIImage) -> UIImage {
      //对图片进行裁剪处理,并返回
    }
    class func MakeScale(image: UIImage,scale: CGFloat) -> UIImage {
      //对图片进行放大处理,并返回
    }
}

Tips:如上,将对图片的处理方法,都放在 ImageOperationCenter 这个类中,调用的时候只需要像这样 let image = ImageOperationCenter.MakeScale(源照片,放大倍数)即可,用着也方便

③ 与第一点类似,很多相似的控件,Cell尽量复用

诸如

tmp69f75d0d.png

半糖精选的cell 与 用户推荐的cell 类似,但是有不同的地方,而且用到的model也不同,这样我们就要重写两种cell吗,不需要,只要 "用户推荐"的cell 继承 "半糖精选" 的cell,重写里面的方法即可,省了好多功夫,所以写程序一定要在不损失质量的前提下怎么省事怎么来

再来看一个例子。
tmp63efa8a5.png

这个通常会将它作为collectionView处理,其实,只有8个button的情况下,将button封装为一个View即可,这样,ViewController中会少了一堆代理方法和一堆初始化collectionView方法
这个也就因人而异吧,要灵活运用哦~

⑤ 其实看到一个页面要先把整个页面的结构确定好,不要写了一半才发现这样写好像太麻烦,或者这样写写不出来

我在我的高仿半糖app中 首页就遇到了这样的问题,开始想着 用UIScrollView当做容器,里面添加UITableView显示内容,这样做未尝不可,但是考虑到复用的问题,可以用三个tableView完成复用,但是这样做过于麻烦,所以后来就用collectionView当做容器,将tableView 添加到collectionViewCell中显示出来,这样复用的问题就解决了

写在后面的话

我的开发经验也不多,上面完全是我在做项目中自己的感悟和体会,有些可能会有问题,请参考即可

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容