美文网首页
(Swift)Loading加载转圈视图

(Swift)Loading加载转圈视图

作者: 布呐呐u | 来源:发表于2021-09-26 11:08 被阅读0次

一) 使用场景

  • 多用于网络请求加载转圈;
  • 支持转圈样式调整;
  • 支持转圈+文字显示;
  • 若已经显示转圈视图,则先移除后再添加,避免图层堆积;
  • 效果如下;
    1. (默认效果)


      截屏2021-09-26 10.43.39.png
    2. (带文字显示)


      截屏2021-09-26 10.52.54.png

二) 使用方法

  • ⚠️⚠️⚠️注意事项,需要在主线程中调用该方法;
  • 扩展于UIView,适用于任何继承于UIView及其子视图对象;
  • 仅一行代码,即可呈现;
// basic usage
view.showLoading()
// with a text description
view.showLoading("加载中")
// immediately hide "loadingView" in self.view
view.hideLoading()

三) 源码分享

//
//  CCLoadingView.swift
//  HelloSwift
//
//  Created by a51095 on 2021/7/16.
//

final class CCLoadingView: UIView {
    /// 懒加载,提示label
    private lazy var messageLabel: UILabel = {
        let l = UILabel()
        l.textColor = .white
        l.font = RegularFont(16)
        l.textAlignment = .center
       return l
    }()
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // MARK: - 反初始化器
    deinit { print("CCLoadingView deinit~") }
    
    // MARK: - 初始化器
    init(toast: String) {
        super.init(frame: .zero)
        
        let contentView = UIView()
        contentView.layer.cornerRadius = 5
        contentView.backgroundColor = .hexColor("#000000", 0.5)
        addSubview(contentView)
        
        let activity = UIActivityIndicatorView(style: .white)
        contentView.addSubview(activity)
        
        if !toast.isEmpty {
            // 中间内容视图
            contentView.snp.makeConstraints { (make) in
                make.center.equalToSuperview()
                make.size.equalTo(CGSize(width: 120, height: 100))
            }
            
            // 加载转圈视图
            activity.snp.makeConstraints { (make) in
                make.top.equalTo(16)
                make.centerX.equalToSuperview()
                make.size.equalTo(CGSize(width: 37, height: 37))
            }
            
            // 文字提示视图
            messageLabel.text = toast
            addSubview(messageLabel)
            messageLabel.snp.makeConstraints { (make) in
                make.centerX.equalToSuperview()
                make.bottom.equalTo(contentView.snp.bottom)
                make.size.equalTo(CGSize(width: 120, height: 36))
            }
        }else {
            // 中间内容视图
            contentView.snp.makeConstraints { (make) in
                make.center.equalToSuperview()
                make.size.equalTo(CGSize(width: 100, height: 100))
            }
            
            // 加载转圈视图
            activity.snp.makeConstraints { (make) in
                make.center.equalToSuperview()
            }
        }
        activity.startAnimating()
    }
}

extension UIView {
    /// 展示loading框(主线程中刷新UI)
    func showLoading(_ message: String = "") {
        // 若当前视图已加载CCLoadingView,则先移除后,再添加;
        if let lastView = subviews.last as? CCLoadingView { lastView.removeFromSuperview() }
        
        let loadingView = CCLoadingView(toast: message)
        addSubview(loadingView)
        loadingView.snp.makeConstraints { (make) in
            make.edges.equalToSuperview()
        }
    }
    
    /// 隐藏loading框(主线程中刷新UI)
    func hideLoading() {
        for item in subviews {
            if item.isKind(of: CCLoadingView.self) {
                item.removeFromSuperview()
            }
        }
    }
}

四) 更多组件,传送门

GitHub

相关文章

  • (Swift)Loading加载转圈视图

    一) 使用场景 多用于网络请求加载转圈; 支持转圈样式调整; 支持转圈+文字显示; 若已经显示转圈视图,则先移除后...

  • 【Android 基础】Progressbar 实现Loadin

    Progressbar 实现Loading动画 网络加载,播放视频 loading 时候界面会显示 转圈 等待提示...

  • 动画

    加载动画,转圈的动画: 视图整体缩小一定的比例

  • 19--Qt基本元素初体验--Image

    标签(空格分隔): Qt 显示网路图片下面的例子是在下载和加载前显示一个转圈圈的Loading图标,图片加载成功后...

  • APP设计中创意十足的Loading动效

    APP设计中会用很多地方会到Loading,全屏加载要Loading,下拉刷新要Loading,上滑加载也要Loa...

  • Vue第三方插件使用

    1.加载数据loading组件 vue-infinite-loading2.loading动画组件 vue-spi...

  • metamask 无限转圈 loading

    近期在使用Metamask的时候,遇到这个无限loading的情况。具体就是我要提交一个transaction,点...

  • css3实现一个小loading和加载进度动画

    loading预加载 loading进度 (这个是整理的,忘记来源了。。。。)

  • Android-动画

    前言 动画在我们的日常开发当中经常会使用到,例如,使用视图动画或则属性动画可以实现,加载的loading动画,it...

  • css3实现div的旋转

    在做页面加载时需要一个转圈的loading字体图标,所以需要用到css3的旋转最后在网上查找出来,所以记录一下 @...

网友评论

      本文标题:(Swift)Loading加载转圈视图

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