iOS,如何模仿一个App

作者: ManoBoo | 来源:发表于2016-03-04 10:42 被阅读10055次

    前言

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

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

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

    **
    **

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

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

    ![ ![ ![IMG_0095.PNG](https://img.haomeiwen.com/i1299512/202a765f086ca351.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](https://img.haomeiwen.com/i1299512/fc3a2b9ccf1b9894.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](https://img.haomeiwen.com/i1299512/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中显示出来,这样复用的问题就解决了

    写在后面的话

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

    相关文章

      网友评论

      • adc785d915f4:找iOS APP上架 大神啊
      • PGOne爱吃饺子:Mark Man收费么,好用么
        ManoBoo:一个设计产品原型和具体细节的工具,如果你需要自己标注的话,用自带的preview或者Markman都可以
        PGOne爱吃饺子:@ManoBoo sketch 是什么啊
        ManoBoo:@4140d18ee6fc 最近一年没怎么用过了,UI目前给我们的都是sketch,Markman本身挺好用的
      • PGOne爱吃饺子:Mark Man工具收费么,好用么?
      • 5e0e76059864:不明觉厉
        ManoBoo:@她承载着你的梦 :joy:
      • 收麦子的人:为什么解析出来的字典是nil
        ManoBoo:@LLLLLLLLUO
        收麦子的人:@ManoBoo 改成txt格式就可以。
        ManoBoo:@LLLLLLLLUO 额,你多打几个断点,看看是你没初始化还是数据的问题
      • 冷洪林:请问抓包可以拿到登录接口嘛?
        冷洪林:@ManoBoo 恩恩 谢谢~
        ManoBoo:@冷洪林 一般接口抓不到的 请求参数无法获取 最主要是有一些token 都是加密过的
      • 071a958d5815:喜欢
        ManoBoo:@071a958d5815 3qu
      • ManoBoo:可以抓取一些商品数据之类的当作本地数据来用,具体的接口不好抓
      • scscsc:注册登录 怎么抓?
        scscsc:@ManoBoo 是啊 对于这方面初学者该怎样学习?
        ManoBoo:@如缩影ccc遂心_ 这个一般不行吧,企业传输中都会用将密码加密^_^
      • selfim:学习了,,赞👍
      • liyuhong165:mark 模仿app
      • selfim:太赞了:smile::smile::smile:
      • JoeWcc:不错不错
      • AIlls:赞一个。。我也准备开始模仿别人的APP。。多谢给的经验
        ManoBoo:@AIlls 客气客气
      • Chars:charles安装与使用,http://www.jianshu.com/p/a9531405526d
        ManoBoo:@Chars :smile: 好的 已收录
      • ff6ce6a83769:受教了~
      • fly_basket:手机和电脑连接同一个WiFi之后,还是不能抓包是怎么回事?
        fly_basket:@ManoBoo OK,我试试,谢谢!
        ManoBoo:@fly_basket 设置你手机的代理服务器为你电脑的IP再试试
      • Hadesome:可以加微信交流吗哈
        ManoBoo:可以呀,你加我QQ,1691919529
      • 32dbcf6aabbc:请教下,我把ipa改成zip之后,只找到了app的icon,里面的按钮神马的都找不到...求指点怎么进一步找
        32dbcf6aabbc:@ManoBoo 谢谢😜已经get了
        ManoBoo:@泡小泡 还有朋友分享的这种方法,http://www.jianshu.com/p/8152e1828aec
      • 侠永:找不到素材
        ManoBoo:@侠永 还有朋友分享的这种方法,http://www.jianshu.com/p/8152e1828aec
      • Joe_lisa:不错,学习了,有demo没有,有时候还是觉得比较难,谢谢了
        Joe_lisa:@ManoBoo 看到了,谢谢
        ManoBoo:@Joe_lisa 文章,有提到,我的高仿半糖App,谢谢参考😄
      • 逍遥思:学习了,谢谢!请问大神,印象笔记的标签呈现用的是collectionView吗?
        逍遥思:@ManoBoo http://d.pr/i/1cu7b
        标签的呈现形式
        ManoBoo:@付剑津 我不知道你说的那个标题呈现是什么……
        ManoBoo:@付剑津 别大神,哈哈,我看看去
      • longzekai:这个教程挺好的。
        ManoBoo:@longzekai 3q
      • wittyfan:太棒了!!!收藏先!
      • janey夫:不错
        ManoBoo:@janey夫 谢谢😄
      • 小時間光:iOS!!!! 第一个字母小写,后两个大写。
        https://developer.apple.com/
        ManoBoo:@漓纤墨 😃看了一下,确实如此,谢谢啦
      • 常义:学习了,厉害👍
      • 雨天_7:半糖这是得罪谁了?最近看了有几篇iOS的文章都是仿写半糖的
        ManoBoo:@williamnet 我自己写了一个高仿半糖的……
      • cd99455a3337:涨姿势!太感谢了! :+1:
      • 32dbcf6aabbc:涨姿势了
        ManoBoo:@泡小泡 😊
      • yu0winter:简单易懂👍🏻
      • lxyz22zp:Collectioncell中的tableview复用怎么解决不同collectioncell复用talbleview时tableview的contentoffset相同的问题
        ManoBoo:@叫我学霸 如果说,想要记录content offset
        的话,在collectioncell加个字段记录一下😄
        ManoBoo:@叫我学霸 有这样一种解决方案,自定义CollectionCell,每次给Cell赋值Model的时候,也将Tableview.reloadData
      • 小草先生:手机IPA 里面素材可以完全提取的 http://www.jianshu.com/p/8152e1828aec?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=qq&appinstall=0
        cd99455a3337:@小草先生 :+1:
        ManoBoo:@小草先生 哇塞,我看到说IOS8以后有些图标被存起来看不到了,厉害啊,收藏了😁
      • 小草先生:手机截屏测试像素 我推荐用Pixel Winch Trial 它有选几倍像素 对应手机的像素倍数 里面是按像素点来测量界面的
        小荣袁:直接用reveal呀
        ManoBoo:@小草先生 好的,学习学习啦
      • f1ee2a59dbd2:真棒啊,给你5个赞
        ManoBoo:@波波_波波 😄谢谢啦
      • i_Rick:对新手很有帮助
        ManoBoo:@张鑫_iOS 没事没事,一起交流😄
        i_Rick:@ManoBoo 哈哈 是我该谢谢你啊 对我这种新手很有帮助
        ManoBoo:@张鑫_iOS 谢谢😁
      • 0cf100c3a1dd:思路挺清晰
        ManoBoo:@ting_520 谢谢😊
      • 大哥带你去玩耍:棒 现在遇到些问题可以请教么
        ManoBoo:@大哥带你去玩耍 可以呀,不是请教,是交流哦
      • 雷霆嘎巴嘎嘎:666666666666
        ManoBoo:@天崆 +1
      • 一wei渡江:今天刚看你代码,没想到就在首页看到你的简书了
        ManoBoo:@一wei渡江 好的😊
        一wei渡江:@ManoBoo 刚学了一点swift,正好看你代码学习一下
        ManoBoo:@一wei渡江 嘿嘿,谢谢啦,有什么问题我们互相交流哦😄
      • iOS排头兵:好闲,还有时间模仿别的app:pensive:
        ManoBoo:@冬天里的火柴 😁公司的项目不忙……
      • 猿哥媛姐:收藏了
      • 笑吧小鸟:我也是这么干的
      • 土豆炖排骨:学习了:smile:
        ManoBoo:@土豆炖排骨 3q
      • d51cc487d74f:高产似 xx :smile:
        ManoBoo:@DDlili 😁收到有朋友问如何抓包等什么的,正好没事,就把自己学习到的方法分享给大家

      本文标题:iOS,如何模仿一个App

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