• Weapon项目笔记


    导航栏定制


    APP主题色

    ​ 设定app主题色

    第一种方法:

    可以设置两种颜色,用于日常和深色两种模式


    color set,一般用rgb

    导航栏大标题字体颜色

    第二种方法:

    • 用代码实现
    • 选中入口控制器
    截屏2020-10-31 下午4.40.21

    ![截屏2020-10-31 下午4.43.14](/Users/summer/Library/Application Support/typora-user-images/截屏2020-10-31 下午4.43.14.png)

    // 视图载入完成,设置导航大字体颜色,提示如果没有值,加上!一定有值,因为之前设置了
    navigationController?.navigationBar.largeTitleTextAttributes =[NSAttributedString.Key.foregroundColor: UIColor(named: "theme")!]
    

    设置详情页导航栏为透明


    需求:图片被“绝地求生武器库”那一行遮挡,需改为透明

    两步实现

    • 在详情控制代(DetailController.swift)码中添加背景色为空(UIImage(),for: .defaule)
    • 在详情控制器的TableView的分栏中找到 content insets(内容嵌入)选项中选择Nerver
    simulator_screenshot_839CB491-A31F-4C40-A61E-9E67C4261FBD 截屏2020-10-31 下午4.53.13

    让导航条透明的代码

    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    

    更改之后的效果,navigation无遮挡

    simulator_screenshot_1C57AA2D-D93F-473C-8E7A-47C0D2B67C97

    点击进来会默认遮挡,进行调整

    截屏2020-10-31 下午5.03.11

    实现效果如下

    simulator_screenshot_1A034346-6928-4F3C-A30A-152886DBE636

    返回按钮标题留空


    选中入口控制器,在Back Button中输入:空格,即不会显示文字

    效果如图

    截屏2020-10-31 下午5.15.00

    运行后的截图

    Simulator Screen Shot - iPhone 8 Plus - 2020-10-31 at 17.17.23

    此处做完有个bug:

    ​ 回到中控制器导航栏会跟着变,如何做更改或者保持不变??

    ​ 或者说为什么会跟着变了呢??????


    自定义返回图片

    ![截屏2020-10-31 下午5.21.55](/Users/summer/Library/Application Support/typora-user-images/截屏2020-10-31 下午5.21.55.png)

    截屏2020-10-31 下午5.23.03

    在详情控制器代码中,添加一以下代码,把返回按钮设置成主题色(设置tintColor)

     navigationController?.navigationBar.tintColor = UIColor(named: "theme")
    

    隐藏滚动条

    选中相应的TableView,在分栏中找到Scroll View中的 show Vertical Indicator,更改选中状态即可(把√去掉)

    截屏2020-10-31 下午5.36.06

    设置状态条的颜色

    状态条一般颜色时两种:黑色和白色

    设置导航条的颜色,状态条会跟着换![截屏2020-10-31 下午5.43.14](/Users/summer/Library/Application Support/typora-user-images/截屏2020-10-31 下午5.43.14.png)

    详情页自定义状态栏颜色

    不同页面需要不同的状体条颜色

    在DetaillController文件中添加如下代码

    override var preferredStatusBarStyle: UIStatusBarStyle{
            return.lightContent
        }
    

    截屏2020-10-31 下午5.50.49添加代码之后并不能实现需求,新建NaviExt.swifty文件 添加代码

    import UIKit
    extension UINavigationController{
        //自页面的状态栏颜色由它自己控制
        open override var childForStatusBarStyle: UIViewController?{
            return topViewController
        }
    }
    

    ![截屏2020-10-31 下午5.51.16](/Users/summer/Library/Application Support/typora-user-images/截屏2020-10-31 下午5.51.16.png)

    无导航条怎么定制全局状态栏颜色

    在AppDelegate.swift文件总代理中,设置全局状态栏颜色

    自行百度


    动态字体

    实现减少动画,颜色反转,字体大小更改的小工具

    ![截屏2020-10-31 下午6.14.41](/Users/summer/Library/Application Support/typora-user-images/截屏2020-10-31 下午6.14.41.png)

    适配动态字体

    需求:用于老年人放大字体,看的更清晰

    实现:

    • 字体设置样式不要设置具体大小,设置头条样式(Text Style - Headline)
    • 动态字体设置成自动调整(Automatically Adjusts Font 打√)

    ![截屏2020-10-31 下午6.16.49](/Users/summer/Library/Application Support/typora-user-images/截屏2020-10-31 下午6.16.49.png)

    详细步骤如图:

    ​ 未设置动态字体的Label不会改变大小

    截屏2020-10-31 下午6.21.33d


    视差动画

    截屏2020-10-31 下午6.55.01

    需求:向下滑动时,上面的图片会缩小

    坐标系

    概念:

    ​ 任何视图大小和位置变化与坐标系有关

    ​ 一个视图有两个坐标系:bounds(自己)frame(父容器)截屏2020-10-31 下午6.59.40

    图中,View是根视图,它没有父视图,所以它的x和y坐标均为0,0

    image View它的bounds坐标是于自己而言,所以x,y为0,而frame的坐标是view,那下x,y为87,256

    视图的大小与坐标无关

    Scroll View(滚动视图)

    tableview是Scroll View的一个子类,tableview只能垂直滚动,Scroll View可以水平滚动和垂直。

    滚动代理方法:

    由于tableview是Scroll View的一个子类,可以用UIScrollViewDelegate代理,有个scrollViewDidScroll方法来实现所需功能

    滚动幅度(内容位移,一个水平方向一个垂直方向)

    //垂直方向滚动多少
    scrollView.cotentOffset.y
    

    ![截屏2020-10-31 下午7.11.09](/Users/summer/Library/Application Support/typora-user-images/截屏2020-10-31 下午7.11.09.png)

    实现:

    向下滚动为正数,想上滚动为负数,恢复原来位置为0

    截屏2020-10-31 下午7.16.06

    需求:向下滚动时,将图片大小

    ​ 向下滚动时,图片放大再恢复

    步骤:

    • 设定table View的高度,不设定会被自动管理
    • 设置滚动处理
    截屏2020-10-31 下午11.40.59 截屏2020-10-31 下午11.36.01

    效果图

    截屏2020-10-31 下午11.54.33滚动处理

    offSetY是300,设置headerView的子视图x坐标为0,y为-300,宽度为scrollView自己的宽度,高度为300

    截屏2020-10-31 下午11.49.46

    添加按钮

    • 添加View,拖Button进去
    • 按照要求设定约束

    ![截屏2020-11-01 上午12.18.24](/Users/summer/Library/Application Support/typora-user-images/截屏2020-11-01 上午12.18.24.png)

    ![截屏2020-11-01 上午12.14.23](/Users/summer/Desktop/截屏2020-11-01 上午12.14.23.png)

    (上图中拖的是Button,不是Label)

    新建RateController.swift(new file 选择CocoaTouch Class,UIViewController的)

    截屏2020-11-01 上午12.36.26 截屏2020-11-01 上午1.05.50

    背景虚化步骤

    • fx组件的Blur Style选择Dark
    • View中的背景默认是白色,改成透明色
    截屏2020-11-01 上午1.12.18

    转场效果

    截屏2020-11-01 上午1.14.59

    关闭场景(添加手势操作)

    截屏2020-11-01 上午1.13.02 截屏2020-11-01 上午1.20.10
    @IBAction func tapBackground(_ sender: Any) {
            self.dismiss(animated: true, completion: .none)
        }
    

    动画

    截屏2020-11-01 上午1.26.01

    实现以上效果,用到动画类:UIViewPropertyAnimator

    UI组件与控制器进行连接

    截屏2020-11-01 上午1.36.56确认连接

    截屏2020-11-01 上午1.45.18

    Stack View 右侧淡入动画

    截屏2020-11-01 上午1.47.57设置动画时间点

    截屏2020-11-01 上午1.48.34

    整体动画进场

    截屏2020-11-01 上午1.59.11
    override func viewDidLoad() {
            super.viewDidLoad()
            //stackView平移到屏幕之外
            stackView.transform = .init(translationX: 800, y: 0)
            
            // Do any additional setup after loading the view.
        }
        override func viewDidAppear(_ animated: Bool) {
            //动画时长0.3s,curve:淡入或。。。
            let animator = UIViewPropertyAnimator(duration: 0.3, curve: .easeIn){
                //让stackView恢复原来的位置
                self.stackView.transform = .identity
            }
            animator.startAnimation()
        }
    

    各按钮依次可见

    截屏2020-11-01 上午2.01.17

    其它效果的写法

    动画组合

    截屏2020-11-01 上午2.23.30 截屏2020-11-01 上午2.11.03

    识别手势状态

    ​ ![截屏2020-11-01 上午2.35.18](/Users/summer/Desktop/截屏2020-11-01 上午2.35.18.png)

    拖动pan 手势到stackView上面,选择action,type选UIPanGestureRecongizer,然后实现如下代码

    ![截屏2020-11-01 上午2.58.56](/Users/summer/Library/Application Support/typora-user-images/截屏2020-11-01 上午2.58.56.png)

    @IBAction func dragStackView(_ sender: UIPanGestureRecognizer) {
            switch sender.state {
            case .changed:
                //转换当前位置
                let taanslate = sender.translation(in: view)
                //平移变换
                let position = CGAffineTransform(translationX: taanslate.x, y: taanslate.y)
                //计算角度
                let angle = sin(taanslate.x / stackView.frame.width)
                //动画组合
                stackView.transform = position.rotated(by: angle)
            //移动结束还原
            case .ended:
                UIViewPropertyAnimator(duration: 0.5, dampingRatio: 0.5){
                    self.stackView.transform = .identity
                }.startAnimation()
            default:
                break
            }
        }
    

    反向转场和传值

    退回的 要在DetailController.swift中添加如下代码才能传回

    ![截屏2020-11-01 上午3.03.04](/Users/summer/Library/Application Support/typora-user-images/截屏2020-11-01 上午3.03.04.png)

    ![截屏2020-11-01 上午3.07.47](/Users/summer/Library/Application Support/typora-user-images/截屏2020-11-01 上午3.07.47.png)

    截屏2020-11-01 上午3.12.17

    ![截屏2020-11-01 上午3.51.43](/Users/summer/Library/Application Support/typora-user-images/截屏2020-11-01 上午3.51.43.png)

        @IBOutlet var ratingBtn: UIButton!
        
        @IBAction func backToDetail(segue: UIStoryboardSegue)  {
            if let rating = segue.identifier {
                weapon.rating = rating
                //这里打分会在rateBtn上面显示
                ratingBtn.setTitle("打分:(rating)星", for: .normal)
            }
        }
    
  • 相关阅读:
    prism.js——让网页中的代码更好看
    WebAPI之FormData
    ES6背记手册
    搭建本地的百度脑图
    webpack到底是干什么用的?
    浅拷贝和深拷贝
    vue 中使用 watch 的各种问题
    跳一跳外挂的python实现--OpenCV步步精深
    Opencv基础课必须掌握:滑动条做调色盘 -OpenCV步步精深
    Opencv稍微高级点的鼠标事件-OpenCV步步精深
  • 原文地址:https://www.cnblogs.com/exlo/p/13910649.html
Copyright © 2020-2023  润新知