IOS 03 纯代码封装自定义View控件

news2025/1/9 4:34:14

本节将通过纯代码进行封装自定义View控件,以常用的设置页的item为例,实现UI效果如下:

1、创建SettingView继承自UIView

import UIKit

class SettingView: UIView {

}

2、重写 init() 和 required init?(coder: NSCoder) 方法

纯代码创建SettingView会执行到init(),而required init?(coder: NSCoder)则是用于可视化布局时,所以两个方法都必须重写。

import UIKit

class SettingView: UIView {
    init() {
        super.init(frame: CGRect.zero)
        innerInit()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        innerInit()
    }

    func innerInit() {
        
    }

}

3、约束设置

当视图加入父视图时,才能进行约束设置,故需要重写 didMoveToSuperview(),并在didMoveToSuperview()方法里面编写约束设置。

import UIKit

class SettingView: UIView {
    init() {
        super.init(frame: CGRect.zero)
        innerInit()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        innerInit()
    }

    func innerInit() {
        
    }

    /// 当视图加入父视图时 / 当视图从父视图移除时调用
    override func didMoveToSuperview() {
        super.didMoveToSuperview()
        //添加约束
        
    }
}

4、完整自定义view代码

//
//  SettingView.swift
//  SnapKitTest
//
//  Created by jin on 2024/8/13.
//

import UIKit

class SettingView: UIView {
    
    init() {
        super.init(frame: CGRect.zero)
        innerInit()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        innerInit()
    }
    
    func innerInit(){
        backgroundColor = .white
        addSubview(leftImgView)
        addSubview(rightImgView)
        addSubview(titleView)
    }
    
    /// 当视图加入父视图时 / 当视图从父视图移除时调用
    override func didMoveToSuperview() {
        super.didMoveToSuperview()
        //添加约束
        leftImgView.snp.makeConstraints { make in
            make.left.equalToSuperview().offset(16)
            make.centerY.equalToSuperview()
            
            make.width.equalTo(20)
            make.height.equalTo(20)
        }
        
        titleView.snp.makeConstraints { make in
            make.left.equalTo(leftImgView.snp.right).offset(16)
            make.centerY.equalToSuperview()
        }
        
        rightImgView.snp.makeConstraints { make in
            make.right.equalToSuperview().offset(-16)
            make.centerY.equalToSuperview()
            
            make.width.equalTo(20)
            make.height.equalTo(20)
        }
    }

    ///左侧图标
    lazy var leftImgView: UIImageView = {
        let imageView = UIImageView()
        imageView.image = UIImage(named: "Setting")
        return imageView
    }()
    
    ///右侧图标
    lazy var rightImgView: UIImageView = {
        let imageView = UIImageView()
        imageView.image = UIImage(named: "Arrow")
        return imageView
    }()
    
    ///标题
    lazy var titleView: UILabel = {
        let textView = UILabel()
        textView.text = "标题"
        return textView
    }()
}

5、使用自定义View

view.addSubview(settingView)

//添加约束,只有添加当前控件,内部的约束在控件内部就添加了
settingView.snp.makeConstraints { make in
	make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
	
	make.width.equalToSuperview()
	make.height.equalTo(55)
}

lazy var settingView: SettingView = {
	let view = SettingView()
	view.titleView.text = "设置"
	view.leftImgView.image = UIImage(named: "Setting")
	return view
}()

6、设置View点击事件

@objc func onSettingClick(recognizer:UITapGestureRecognizer) {
	print("onSettingClick")
}
	
lazy var settingView: SettingView = {
	let view = SettingView()
	view.titleView.text = "设置"
	view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(onSettingClick(recognizer:))))
	return view
}()

7、使用自定义View的完整代码

//
//  SettingController.swift
//  SnapKitTest
//
//  Created by jin on 2024/8/13.
//

import UIKit

class SettingController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemGroupedBackground
        title = "设置界面"
        
        view.addSubview(settingView)
        view.addSubview(collectView)
        
        //添加约束,只有添加当前控件,内部的约束在控件内部就添加了
        settingView.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
            
            make.width.equalToSuperview()
            make.height.equalTo(55)
        }
        
        collectView.snp.makeConstraints { make in
            make.top.equalTo(settingView.snp.bottom).offset(1)
            
            make.width.equalToSuperview()
            make.height.equalTo(55)
        }
    }
    
    @objc func onSettingClick(recognizer:UITapGestureRecognizer) {
        print("onSettingClick")
    }
    
    @objc func onCollectClick(recognizer:UITapGestureRecognizer) {
        print("onCollectClick")
    }
    
    lazy var settingView: SettingView = {
        let view = SettingView()
        view.titleView.text = "设置"
        view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(onSettingClick(recognizer:))))
        return view
    }()
    
    lazy var collectView: SettingView = {
        let view = SettingView()
        view.titleView.text = "收藏"
        view.leftImgView.image = UIImage(named: "Setting")
        view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(onCollectClick(recognizer:))))
        return view
    }()

}

至此,一个简单的纯代码封装自定义View控件便实现了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2040679.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

仿RabbitMq实现消息队列正式篇(虚拟机篇)

TOC目录 虚拟机模块 要管理的数据 要管理的操作 消息管理模块 要管理的数据 消息信息 消息主体 消息的管理 管理方法 管理数据 管理操作 队列消息管理 交换机数据管理 要管理的数据 要管理的操作 代码展示 队列数据管理 要管理的数据 要管理的操作 代码展示…

PHP转Go系列 | ThinkPHP与Gin框架之打造基于WebSocket技术的消息推送中心

大家好,我是码农先森。 在早些年前客户端想要实时获取到最新消息,都是使用定时长轮询的方式,不断的从服务器上获取数据,这种粗暴的骚操作实属不雅。不过现如今我也还见有人还在一些场景下使用,比如在 PC 端扫描二维码…

浅谈JDK

JDK(Java Development Kit) JDK是Java开发工具包,是Java编程语言的核心软件开发工具。 JDK包含了一系列用于开发、编译和运行Java应用程序的工具和资源。其中包括: 1.Java编译器(javac):用于将Java源代码编译成字节…

MS8923/8923S低压、高精度、推挽输出比较器

MS8923/8923S 是一款差分输入、高速、低功耗比较器,具 有互补 TTL 输出。其传输延时在 10ns 左右,输入共模范围可以 到负轨。 MS8923/8923S 可以在线性区保持输出稳定特性,单电 源供电是 5.0V ,双电源供电是 5V 。 MS89…

【算法/学习】:记忆化搜索

✨ 落魄谷中寒风吹,春秋蝉鸣少年归 🌏 📃个人主页:island1314 🔥个人专栏:算法学习 ⛺️ 欢迎关注:👍点赞 &#x1f44…

数据结构——队列的讲解(超详细)

前言: 我们在之前刚讲述完对于栈的讲解,下面我们在讲另一个类似栈的数据结构——队列,它们都是线性表,但结构是大有不同,下面我们直接进入讲解! 目录 1.队列的概念和结构 1.1.队列的概念 1.2.队列的结构 2.…

基于Python的去哪儿网数据采集与分析可视化大屏设计与实现

摘要 本文旨在介绍如何利用Python进行去哪儿网景点数据的采集与分析。通过采集去哪儿网上的景点数据,我们可以获取大量的旅游相关信息,并基于这些数据进行深入分析和洞察,为旅游行业、市场营销策略以及用户个性化推荐等提供支持。 本文将使用…

MySQL(DQL)

一,SQL语言分类 (1)数据查询语言(DQL:Data Query Language)其语句,也称为 “数据检索语句”,用以从表中获得数据,确定数据怎样在应用程 序给出。关键字 SELECT 是 DQL&a…

Python打包命令汇总

1、pyinstaller打包 环境安装:pip install pyinstaller 网络不好可以通过 -i 指定安装源:pip install pyinstaller -i https://pypi.tuna.tsinghua.edu.cn/simple/安装完成后通过:pyinstaller --version 查看是否安装成功 打包单个脚本&…

操作系统笔记二

虚拟内存 把不常用的数据放到硬盘上去,常用的代码或者数据才加载到内存,来实现虚拟的大内存的感觉 覆盖技术 目标:在较小内存运行较大程序。 原理:把程序按自身逻辑结构划分若干功能上相对独立的程序模块。不回同时执行的模块共…

FreeRTOS学习笔记(一)—— 裸机和RTOS,Freertos移植(MDK),stm32cubeIDE使用Freertos

FreeRTOS学习笔记(一)—— 裸机和RTOS,Freertos移植(MDK),stm32cubeIDE使用Freertos 文章目录 FreeRTOS学习笔记(一)—— 裸机和RTOS,Freertos移植(MDK&#…

uniapp/vue个性化单选、复选组件

个性化单选和复选组件在网页设计中非常常见,它们不仅能够提升用户界面的美观度,还能改善用户体验。此组件是使用vue uniapp实现的个性化单选复选组件。设计完成后,点击生成源码即可。 拖动组件过设计区 每行显示数量 默认支持每行三个&#…

Maven-学习首篇

目录 Maven简介基本概念&特点Maven的安装与配置Maven基础概念及使用方法Maven的项目结构Maven的使用Maven的依赖管理Maven的生命周期和插件常见疑问Maven的插件机制是如何工作的?Maven的POM文件主要包含哪些内容?Maven的生命周期包括哪些阶段&#x…

【C++语言】list的构造函数与迭代器

1. list的介绍及使用 1.1 list的介绍 list的文档介绍 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。 2. list的底层是双向链表结构,双向链表中每个元素存储在互不相关的独立节点中,在节点…

C++中的IO流

目录 1.C语言的输入与输出 2.流是什么 3.CIO流 标准IO流 IO流的四个标志 C文件IO流 4.stringstream的简单介绍 1.C语言的输入与输出 C语言中我们用到的最频繁的输入输出方式就是scanf ()与printf()。 scanf(): 从标准输入设备(键 盘)读取数据,并将值存放在变…

钢铁百科:A572Gr60和SA572Gr60材质分析、A572Gr60和SA572Gr60简介

A572Gr60和SA572Gr60是两种常用的结构钢板,它们在材质、执行标准、化学成分、力学性能、交货状态、应用范围和常用规格方面有所不同。 材质: A572Gr60:属于美国材料与试验协会(ASTM)标准下的A572系列高性能结构钢&…

UIAbility组件基础(一)

一、概述 UIAbility组件是一种包含UI的应用组件,主要用于和用户交互。UIAbility组件是系统调度的基本单元,为应用提供绘制界面的窗口。一个应用可以包含一个或多个UIAbility组件。每一个UIAbility组件实例都会在最近任务列表中显示一个对应的任务。 U…

自研低代码海报制作平台学习分享计划

vue3组件库开发前面咱卷完了JuanTree组件,接下来一起来卷vue3低代码海报制作平台的基础组件实现。首先是拖拽基础组件的开发,整好把前面学习的知识点再运用进来。 文章目录 效果演示基本拖拽区域拖拽旋转其他效果待实现 录屏说明 看一步步实现的效果&…

C++--类和对象(二)

类和对象的基础定义可参看:C--类和对象(一)-CSDN博客 本篇讲述类和对象里相当重要的几个成员函数 目录 类的默认成员函数: 1.构造函数 2.析构函数 3.拷贝构造函数 (1)无限递归调用拷贝构造 &#xff…

在Ubuntu中重装Vscode(没有Edit Configurations(JSON)以及有错误但不标红波浪线怎么办?)

在学习时需要将vscode删除重装,市面上很多方法都不能删干净,删除之后拓展都还在。因此下面的方法可以彻底删除。注意,我安装时使用的是snap方法。 如果你的VScode没有Edit Configurations(JSON),以及有错误但不标红波浪线的话&…