iOS 高仿:花田小憩3.0.1 (上)

时间:2021-12-11 18:59:16

iOS 高仿:花田小憩3.0.1 (上) 



前言


断断续续的已经学习Swift一年多了, 从1.2到现在的2.2, 一直在语法之间徘徊, 学一段时间, 工作一忙, 再捡起来隔段时间又忘了.思来想去, 趁着这两个月加班不是特别多, 就决定用swift仿写一个完整项目.


花田小憩:是一个植物美学生活平台,

以自然生活为主导,

提倡植物学生活方法,

倡导美学标准的生活态度的一个APP.


个人文字功底有限, 就我而言, 这款APP做的挺唯美的…


github地址

https://github.com/SunLiner/Floral


声明


此花田小憩项目里面的都是真实接口, 真实数据, 仅供学习, 毋作其他用途!!!


项目部分截图


由于项目的大体功能都已经实现了的, 所以整个项目还是比较庞大的.所以, 下面罗列部分功能的截图.

由于gif录制的时候, 会重新渲染一遍图片, 所以导致项目中用到高斯模糊的地方, 看起来感觉比较乱, 实际效果还是不错的.


iOS 高仿:花田小憩3.0.1 (上)

新特性


iOS 高仿:花田小憩3.0.1 (上)

详情页


iOS 高仿:花田小憩3.0.1 (上)


更多项目截图请点击原文查看


项目环境


编译器 : Xcode7.3及以上


语言 : Swift2.2


整个项目都是采用纯代码开发模式


tip: 之前编译环境这儿有点错误, 因为我项目中用了Swift2.2的特性, 2.2之后方法名需要写成#selector(AddAddressViewController.save), 不再使用双引号了


第三方框架


use_frameworks!

platform:ios,"8.0"

 

target'Floral'do

 

pod'SnapKit','~> 0.20.0'## 自动布局

pod'Alamofire','~> 3.3.1'## 网络请求, swift版的AFN

pod'Kingfisher','~> 2.3.1'## 轻量级的SDWebImage

 

end


还用到了MBProgressHUD.

除此之外,几乎全部都是自己造的小*…


目录结构详解


Classes下包含7个功能目录:


①Resources : 项目用到的资源,包含plist文件, js文件和字体


②Network : 网络请求, 所有的网络请求都在这里面, 接口和参数都有详细的注释


③Tool : 包含tools(工具类), 3rdLib(第三方:友盟分享, MBProgressHUD ), Category(所有项目用到的分类)


④Home : 首页(专题), 包含专题分类, 详情, 每周Top10, 评论, 分享等等功能模块


⑤Main : UITabBarController, UINavigationController设置以及新特性


⑥Malls : 商城, 包含商城分类, 商品搜索, 详情, 购物车, 购买, 订单, 地址管理, 支付等等功能模块


⑦Profile : 个人中心, 专栏作者, 登录/注册/忘记密码, 设置等功能模块


大家可以下载项目, 对照这个目录结构进行查看, 很典型的MVC文件结构, 还是很方便的.


项目部分功能模块详解


① 新特性NewFeatureViewController : 这个功能模块还是比较简单的, 用到了UICollectionViewController, 然后自己添加了UIPageControl, 只需要监听最后一个cell的点击即可.


这儿有一个注意点是: 我们需要根据版本号来判断是进入新特性界面, 广告页还是首页.


private let SLBundleShortVersionString = "SLBundleShortVersionString"

    // MARK: - 判断版本号

  private func toNewFeature() -> Bool

    {

        // 根据版本号来确定是否进入新特性界面

        letcurrentVersion = NSBundle.mainBundle().infoDictionary!["CFBundleShortVersionString"] as!String

        letoldVersion = NSUserDefaults.standardUserDefaults().objectForKey(SLBundleShortVersionString)??""

 

        // 如果当前的版本号和本地保存的版本比较是降序, 则需要显示新特性

        if(currentVersion.compare(oldVersionas!String)) == .OrderedDescending{

            // 保存当前的版本

            NSUserDefaults.standardUserDefaults().setObject(currentVersion,forKey: SLBundleShortVersionString)

            returntrue

        }

        returnfalse

    }


② 下拉刷新RefreshControl : 在这个项目中, 没有用第三方的下拉刷新控件, 而是自己实现了一个简单的下拉刷新*, 然后赋值给UITableViewController的public var refreshControl: UIRefreshControl?属性. 主要原理就是判断下拉时的frame变化:


// 监听frame的变化

        addObserver(self,forKeyPath:"frame",options:.New,context: nil)


// 刷新的时候, 不再进行其他操作

    private var isLoading = false

    override func observeValueForKeyPath(keyPath: String?,ofObject object: AnyObject?, change:[String: AnyObject]?, context: UnsafeMutablePointer<Void>){

        lety = frame.origin.y

        // 1. 最开始一进来的时候, 刷新按钮是隐藏的, y就是-64, 需要先判断掉, y>=0 , 说明刷新控件已经完全缩回去了...

        ify >= 0 || y == -64

        {

            return

        }

 

        // 2. 判断是否一进来就进行刷新

        ifbeginAnimFlag && (y == -60.0 || y == -124.0){

            if !isLoading{

                isLoading = true

                animtoringFlag = true

                tipView.beginLoadingAnimator()

            }

            return

        }

 

        // 3. 释放已经触发了刷新事件, 如果触发了, 需要进行旋转

        ifrefreshing && !animtoringFlag

        {

            animtoringFlag = true

            tipView.beginLoadingAnimator()

            return

        }

 

        ify <= -50 && !rotationFlag

        {

            rotationFlag = true

            tipView.rotationRefresh(rotationFlag)

        }elseif(y > -50 && rotationFlag){

            rotationFlag = false

            tipView.rotationRefresh(rotationFlag)

        }

    }


③ 高斯模糊: 使用的是系统自带的高斯模糊控件UIVisualEffectView, 它是@available(iOS 8.0, *), 附一段简单的使用代码


private lazy var blurView : BlurView = {

        letblur = BlurView(effect: UIBlurEffect(style:.Light))

        blur.categories = self.categories

        blur.delegate = self

        returnblur

    }()


可以根据alpha = 0.5, 调整alpha来调整模糊效果, gif图中的高斯模糊效果不是很明显, 实际效果特别好.


iOS 高仿:花田小憩3.0.1 (上)


④ 商城购物车动画:这组动画还是比较简单的, 直接附代码, 如果有什么疑惑, 可以留言或者私信我


// MARK : - 动画相关懒加载

    /// layer

    private lazy var animLayer : CALayer = {

        letlayer = CALayer()

        layer.contentsGravity = kCAGravityResizeAspectFill;

        layer.bounds = CGRectMake(0,0,50,50);

        layer.cornerRadius = CGRectGetHeight(layer.bounds) / 2

        layer.masksToBounds = true;

        returnlayer

    }()

 

    /// 贝塞尔路径

    private lazy var animPath = UIBezierPath()

 

    /// 动画组

    private lazy var groupAnim : CAAnimationGroup = {

        letanimation = CAKeyframeAnimation(keyPath:"position")

        animation.path = self.animPath.CGPath

        animation.rotationMode = kCAAnimationRotateAuto

 

        letexpandAnimation = CABasicAnimation(keyPath:"transform.scale")

        expandAnimation.duration = 1

        expandAnimation.fromValue = 0.5

        expandAnimation.toValue = 2

        expandAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)

 

        letnarrowAnimation = CABasicAnimation(keyPath:"transform.scale")

        // 先执行上面的, 然后再开始

        narrowAnimation.beginTime = 1

        narrowAnimation.duration = 0.5

        narrowAnimation.fromValue = 2

        narrowAnimation.toValue = 0.5

        narrowAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)

 

        letgroups = CAAnimationGroup()

        groups.animations = [animation,expandAnimation,narrowAnimation]

        groups.duration = 1.5

        groups.removedOnCompletion = false

        groups.fillMode = kCAFillModeForwards

        groups.delegate = self

        returngroups

    }()

 

 

    // MARK: - 点击事件处理

    private var num = 0

    func gotoShopCar(){

        ifnum >= 99{

            self.showErrorMessage("亲, 企业采购请联系我们客服")

            return

        }

        addtoCar.userInteractionEnabled = false

 

        // 设置layer

        // 贝塞尔弧线的起点

        animLayer.position = addtoCar.center

        layer.addSublayer(animLayer)

        // 设置path

        animPath.moveToPoint(animLayer.position)

 

        letcontrolPointX = CGRectGetMaxX(addtoCar.frame) * 0.5

 

        // 弧线, controlPoint基准点, endPoint结束点

        animPath.addQuadCurveToPoint(shopCarBtn.center, controlPoint: CGPointMake(controlPointX, -frame.size.height*5))

 

        // 添加并开始动画

        animLayer.addAnimation(groupAnim, forKey:"groups")

    }

 

    // MARK: - 动画的代理

    // 动画停止的代理

    override func animationDidStop(anim: CAAnimation,finished flag: Bool){

        ifanim ==  animLayer.animationForKey("groups")!{

            animLayer.removeFromSuperlayer()

            animLayer.removeAllAnimations()

 

            num += 1

            shopCarBtn.num = num

 

            letanimation = CATransition()

            animation.duration = 0.25

 

            shopCarBtn.layer.addAnimation(animation,forKey: nil)

 

            letshakeAnimation = CABasicAnimation(keyPath:"transform.translation.y")

            shakeAnimation.duration = 0.25

            shakeAnimation.fromValue = -5

            shakeAnimation.toValue = 5

            shakeAnimation.autoreverses = true

 

            shopCarBtn.layer.addAnimation(shakeAnimation,forKey: nil)

            addtoCar.userInteractionEnabled = true

 

        }

    }


⑤ 主题详情页:商城详情页的做法也是差不多的, 不过更简单一点.


iOS 高仿:花田小憩3.0.1 (上)


关键一点在于, 详情页的展示主要依靠于H5页面. 而我们需要根据webview的高度来确定webviewCell的高度.我的做法是监听UIWebView的webViewDidFinishLoad, 取出webView.scrollView.contentSize.height然后给详情页发送一个通知, 让其刷新界面. 暂时没有想到更好的方法, 如果您有更好的做法, 请务必告诉我, 谢谢…


⑥ UIWebView中图片的点击


第①步: 我们创建一个image.js文件, 代码如下:


//setImage的作用是为页面的中img元素添加onClick事件,即设置点击时调用imageClick

function setImageClick(){

    varimgs = document.getElementsByTagName("img");

    for(vari=0;i<imgs.length;i++){

        varsrc = imgs[i].src;

        imgs[i].setAttribute("onClick","imageClick(src)");

    }

    document.location = imageurls;

}

 

//imageClick即图片 onClick时触发的方法,document.location = url;的作用是使调用

//webView: shouldStartLoadWithRequest: navigationType:方法,在该方法中我们真正处理图片的点击

function imageClick(imagesrc){

    varurl="imageClick::"+imagesrc;

    document.location = url;

}


第②步:在UIWebView的代理方法webViewDidFinishLoad中, 加载JS文件, 并给图片绑定绑定点击事件


// 加载js文件

        webView.stringByEvaluatingJavaScriptFromString(try!String(contentsOfURL: NSBundle.mainBundle().URLForResource("image",withExtension:"js")!,encoding: NSUTF8StringEncoding))

 

        // 给图片绑定点击事件

        webView.stringByEvaluatingJavaScriptFromString("setImageClick()")


第③步:在UIWebView的代理方法-webView:shouldStartLoadWithRequest:navigationType:中判断图片的点击


func webView(webView: UIWebView,shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool{

        leturlstr = request.URL?.absoluteString

        let components :[String] = urlstr!.componentsSeparatedByString("::")

        if(components.count >= 1){

            //判断是不是图片点击

            if(components[0] == "imageclick"){

                parentViewController?.presentViewController(ImageBrowserViewController(urls:[NSURL(string: components.last!)!], index: NSIndexPath(forItem:0, inSection:0)), animated: true, completion: nil)

                returnfalse;

            }

            returntrue;

        }

        returntrue

    }