欢迎页展示

该博客介绍了如何在Swift项目中使用SDWebImage库异步加载用户头像,并在`WelcomeViewController`中实现了界面的布局更新和动画效果。通过`viewDidLoad`方法加载头像,`viewDidAppear`方法中更新约束并执行动画,同时展示了懒加载控件和自动布局的使用。
摘要由CSDN通过智能技术生成

1. 添加SDWebImage库,创建 WelcomeViewController.swift 继承 UIViewController

import UIKit
import SDWebImage

class WelcomeViewController: UIViewController {
    //设置界面,视图的层次结构
    override func loadView() {
        //直接使用背景图像作为根视图,不用关心图像的缩放问题
        view = backImageView
        setupUI()
    }
    
    //视图加载完成之后的后续处理,通常用来设置数据
    override func viewDidLoad() {
        super.viewDidLoad()
        //异步加载用户头像
        iconView.sd_setImage(with:UserAccountViewModel.sharedUserAccount.avatarUrl, placeholderImage: UIImage(named: "avatar_default_big"))
    }
    
    //视图已经显示,通常可以动画/键盘处理
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        //1.更改约束 -> 改变位置
        //updateConstraints 更新已经设置过的约束
        //multiplier 属性是只读属性,创建之后,不允许修改
        /**
         使用自动布局开发,有一个原则
         -所有使用约束设置位置的控件,不要再设置 'frame'
         原因:  自动布局系统会根据设置的约束,自动计算控件的 frame
         在 layoutSubviews 函数中设置 frme
         如果 主动修改 frame,会引起 自动布局系统计算错误
         -工作原理:当有一个运动循环启动,自动布局系统,会收集“所有的约束变化”
         -再运行循环结束前,调用 layoutSubViews 函数统一设置 frame
         -如果希望某些约束提前更新!使用 ‘layoutIfNeeded’ 函数让自动布局系统,提前更新当前收集到的约束变化
         */
        iconView.snp.updateConstraints { make in
            // make.bottom.equalTo(view.snp.bottom).multipliedBy(0.3)
            make.bottom.equalTo(view.snp.bottom).offset(-view.bounds.height + 200)
            //make.bottom.equalTo(view.snp.bottom).offset(-view.bounds.height * 0.7)
        }
        
        //2.动画
        welcomeLable.alpha = 0
        UIView.animate(withDuration: 1.2, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 10, options: []) {
            //修改所有‘可动画’属性
            //自动布局的动画
            self.view.layoutIfNeeded()
        } completion: {(state: Bool) in
            UIView.animate(withDuration: 0.7) {
                self.welcomeLable.alpha = 1
            } completion: {(state: Bool) in
                //不推荐的写法
                //UIApplication.shared.keyWindow?.rootViewController = MainViewController()
                NotificationCenter.default.post(name: NSNotification.Name(SwitchRootViewControllerNotification), object: nil)
            }
        }
    }
    
    //MARK: - 懒加载控件
    //背景图像
    private lazy var backImageView:UIImageView = UIImageView(imageName: "ad_background")
    //头像
    private lazy var iconView: UIImageView = {
        let iv = UIImageView(imageName: "avatar_default_big")
        //设置圆角
        iv.layer.cornerRadius = 45
        iv.layer.masksToBounds = true
        return iv
    }()
    //欢迎标签
    private lazy var welcomeLable: UILabel = UILabel(title: "欢迎回来", fontSize: 18)
}

2. 扩展类设置 UI

//MARK: - 设置界面
extension WelcomeViewController{
    private func setupUI(){
        //1.添加控件
        view.addSubview(iconView)
        view.addSubview(welcomeLable)
        //2.自动布局
        iconView.snp.makeConstraints { make in
            make.centerX.equalTo(view.snp.centerX)
            //make.bottom.equalTo(view.snp.bottom).multipliedBy(0.7)
            make.bottom.equalTo(view.snp.bottom).offset(-200)
            make.width.height.equalTo(90)
        }
        welcomeLable.snp.makeConstraints { make in
            make.centerX.equalTo(iconView.snp.centerX)
            make.top.equalTo(iconView.snp.bottom).offset(16)
        }
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hanyang Li

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值