本节主要使用TangramKit UI框架进行纯代码开发，相比于 SnapKit，TangramKit 能够更快速更方便的实现 UI布局。TangramKit使用起来跟Android布局控件非常相似，对于Android开发的小伙伴会更容易入手和理解。github地址：https://github.com/youngsoft/TangramKit
一、实现简单的登录页面
实现UI效果：
添加依赖
#提供类似Android中更高层级的布局框架
#https://github.com/youngsoft/TangramKit
pod 'TangramKit'导入
//提供类似Android中更高层级的布局框架
import TangramKit创建LoginController 继承自 UIViewController
class LoginController: UIViewController {override func viewDidLoad() {super.viewDidLoad()}
}懒加载创建按钮和点击事件
@objc func phoneLoginClick(_ s:UIButton) {print("点击按钮")let controller = MyController()navigationController?.pushViewController(controller, animated: true)
}@objc func loginClick(_ s:UIButton) {print("点击按钮")
}/// 手机号登录按钮
/// 这是swift中的懒加载写法
lazy var phoneLoginButton: UIButton = {let button = UIButton(type: .system)//设置标题button.setTitle("手机号登陆", for: .normal)//设置点击事件button.addTarget(self, action: #selector(phoneLoginClick(_:)), for: .touchUpInside)button.backgroundColor = .red//圆角大小button.layer.cornerRadius = 5//标题默认颜色button.setTitleColor(.white,for: .normal)//按下文本颜色button.setTitleColor(.gray,for: .highlighted)button.tg_width.equal(.fill)button.tg_height.equal(42)return button
}()///用户名和密码登录
lazy var loginButton: UIButton = {let button = UIButton(type: .system)//设置标题button.setTitle("用户名和密码登录", for: .normal)//设置点击事件button.addTarget(self, action: #selector(loginClick(_:)), for: .touchUpInside)button.backgroundColor = .clear//圆角大小button.layer.cornerRadius = 21button.layer.borderWidth = 1button.layer.borderColor = UIColor.red.cgColor//标题默认颜色button.setTitleColor(.red,for: .normal)//按下文本颜色button.setTitleColor(.gray,for: .highlighted)button.tg_width.equal(.fill)button.tg_height.equal(42)return button
}()创建图片和文本控件，并添加到页面容器中
override func viewDidLoad() {super.viewDidLoad()view.backgroundColor = .whitetitle = "登录界面"// MARK: - 控件//添加一个根容器let container = TGRelativeLayout()//从安全区开始container.tg_top.equal(TGLayoutPos.tg_safeAreaMargin).offset(16)container.tg_bottom.equal(TGLayoutPos.tg_safeAreaMargin).offset(16)container.tg_left.equal(TGLayoutPos.tg_safeAreaMargin).offset(16)container.tg_right.equal(TGLayoutPos.tg_safeAreaMargin).offset(16)view.addSubview(container)//logolet logoView = UIImageView()logoView.image = UIImage(named: "Logo")logoView.tg_width.equal(100)logoView.tg_height.equal(100)logoView.tg_top.equal(100)logoView.tg_centerX.equal(0)container.addSubview(logoView)// MARK: - 底部容器let linear = TGLinearLayout(.vert)linear.tg_width.equal(.fill)linear.tg_height.equal(.wrap)linear.tg_bottom.equal(0)linear.tg_gravity = TGGravity.horz.centerlinear.tg_space = 30container.addSubview(linear)// MARK: - 手机号登陆按钮linear.addSubview(phoneLoginButton)// MARK: - 登陆按钮linear.addSubview(loginButton)// MARK: - 协议let agrementLabelView = UILabel()//设置标题agrementLabelView.text = "登录即表示你同意《用户协议》和《隐私政策》"//设置字体大小和颜色agrementLabelView.font = UIFont.systemFont(ofSize: 12)agrementLabelView.textColor = .grayagrementLabelView.tg_width.equal(.wrap)agrementLabelView.tg_height.equal(.wrap)linear.addSubview(agrementLabelView)
}完整实现代码
//
// LoginController.swift
// SnapKitTest
//
// Created by jin on 2024/8/13.
//import UIKit
import TangramKitclass LoginController: UIViewController {override func viewDidLoad() {super.viewDidLoad()view.backgroundColor = .whitetitle = "登录界面"// MARK: - 控件//添加一个根容器let container = TGRelativeLayout()//从安全区开始container.tg_top.equal(TGLayoutPos.tg_safeAreaMargin).offset(16)container.tg_bottom.equal(TGLayoutPos.tg_safeAreaMargin).offset(16)container.tg_left.equal(TGLayoutPos.tg_safeAreaMargin).offset(16)container.tg_right.equal(TGLayoutPos.tg_safeAreaMargin).offset(16)view.addSubview(container)//logolet logoView = UIImageView()logoView.image = UIImage(named: "Logo")logoView.tg_width.equal(100)logoView.tg_height.equal(100)logoView.tg_top.equal(100)logoView.tg_centerX.equal(0)container.addSubview(logoView)// MARK: - 底部容器let linear = TGLinearLayout(.vert)linear.tg_width.equal(.fill)linear.tg_height.equal(.wrap)linear.tg_bottom.equal(0)linear.tg_gravity = TGGravity.horz.centerlinear.tg_space = 30container.addSubview(linear)// MARK: - 手机号登陆按钮linear.addSubview(phoneLoginButton)// MARK: - 登陆按钮linear.addSubview(loginButton)// MARK: - 协议let agrementLabelView = UILabel()//设置标题agrementLabelView.text = "登录即表示你同意《用户协议》和《隐私政策》"//设置字体大小和颜色agrementLabelView.font = UIFont.systemFont(ofSize: 12)agrementLabelView.textColor = .grayagrementLabelView.tg_width.equal(.wrap)agrementLabelView.tg_height.equal(.wrap)linear.addSubview(agrementLabelView)}@objc func phoneLoginClick(_ s:UIButton) {print("点击按钮")let controller = MyController()navigationController?.pushViewController(controller, animated: true)}@objc func loginClick(_ s:UIButton) {print("点击按钮")}/// 手机号登录按钮/// 这是swift中的懒加载写法lazy var phoneLoginButton: UIButton = {let button = UIButton(type: .system)//设置标题button.setTitle("手机号登陆", for: .normal)//设置点击事件button.addTarget(self, action: #selector(phoneLoginClick(_:)), for: .touchUpInside)button.backgroundColor = .red//圆角大小button.layer.cornerRadius = 5//标题默认颜色button.setTitleColor(.white,for: .normal)//按下文本颜色button.setTitleColor(.gray,for: .highlighted)button.tg_width.equal(.fill)button.tg_height.equal(42)return button}()///用户名和密码登录lazy var loginButton: UIButton = {let button = UIButton(type: .system)//设置标题button.setTitle("用户名和密码登录", for: .normal)//设置点击事件button.addTarget(self, action: #selector(loginClick(_:)), for: .touchUpInside)button.backgroundColor = .clear//圆角大小button.layer.cornerRadius = 21button.layer.borderWidth = 1button.layer.borderColor = UIColor.red.cgColor//标题默认颜色button.setTitleColor(.red,for: .normal)//按下文本颜色button.setTitleColor(.gray,for: .highlighted)button.tg_width.equal(.fill)button.tg_height.equal(42)return button}()}
二、使用TangramKit自定义View控件
自定义设置页的ItemView
实现UI效果如下：
自定义ItemView 继承自 TGRelativeLayout
由于自定义的ItemView左右两端都有控件，所以继承自TGRelativeLayout，更方便实现UI效果。
class ItemView: TGRelativeLayout {}重写 init() 和 required init?(coder: NSCoder) 方法
纯代码创建SettingView会执行到init()，而required init?(coder: NSCoder)则是用于可视化布局时，所以两个方法都必须重写。
class ItemView: TGRelativeLayout {init() {super.init(frame: CGRect.zero)innerInit()}required init?(coder: NSCoder) {super.init(coder: coder)innerInit()}func innerInit(){}}懒加载创建子View，并添加到View中
func innerInit(){backgroundColor = .whitetg_width.equal(.fill)tg_height.equal(55)addSubview(leftImgView)addSubview(rightImgView)addSubview(titleView)
}///左侧图标
lazy var leftImgView: UIImageView = {let imageView = UIImageView()imageView.image = UIImage(named: "Setting")imageView.tg_width.equal(20)imageView.tg_height.equal(20)imageView.tg_left.equal(16)imageView.tg_centerY.equal(0)return imageView
}()///右侧图标
lazy var rightImgView: UIImageView = {let imageView = UIImageView()imageView.image = UIImage(named: "Arrow")imageView.tg_width.equal(20)imageView.tg_height.equal(20)imageView.tg_right.equal(16)imageView.tg_centerY.equal(0)return imageView
}()///标题
lazy var titleView: UILabel = {let textView = UILabel()textView.text = "标题"textView.tg_width.equal(.wrap)textView.tg_height.equal(.wrap)textView.tg_left.equal(leftImgView.tg_right).offset(16)textView.tg_centerY.equal(0)return textView
}()自定义View完整代码
//
// ItemView.swift
// SnapKitTest
//
// Created by jin on 2024/8/14.
//import UIKit
import TangramKitclass ItemView: TGRelativeLayout {init() {super.init(frame: CGRect.zero)innerInit()}required init?(coder: NSCoder) {super.init(coder: coder)innerInit()}func innerInit(){backgroundColor = .whitetg_width.equal(.fill)tg_height.equal(55)addSubview(leftImgView)addSubview(rightImgView)addSubview(titleView)}///左侧图标lazy var leftImgView: UIImageView = {let imageView = UIImageView()imageView.image = UIImage(named: "Setting")imageView.tg_width.equal(20)imageView.tg_height.equal(20)imageView.tg_left.equal(16)imageView.tg_centerY.equal(0)return imageView}()///右侧图标lazy var rightImgView: UIImageView = {let imageView = UIImageView()imageView.image = UIImage(named: "Arrow")imageView.tg_width.equal(20)imageView.tg_height.equal(20)imageView.tg_right.equal(16)imageView.tg_centerY.equal(0)return imageView}()///标题lazy var titleView: UILabel = {let textView = UILabel()textView.text = "标题"textView.tg_width.equal(.wrap)textView.tg_height.equal(.wrap)textView.tg_left.equal(leftImgView.tg_right).offset(16)textView.tg_centerY.equal(0)return textView}()}使用自定义View
懒加载创建自定义View，并添加到页面中
override func viewDidLoad() {super.viewDidLoad()view.backgroundColor = .systemGroupedBackgroundtitle = "设置界面"let linear = TGLinearLayout(.vert)linear.tg_width.equal(.fill)linear.tg_height.equal(.wrap)linear.tg_top.equal(TGLayoutPos.tg_safeAreaMargin).offset(16)linear.tg_space = 1view.addSubview(linear)linear.addSubview(settingView)
}lazy var settingView: ItemView = {let view = ItemView()view.titleView.text = "设置"view.leftImgView.image = UIImage(named: "Setting")return view
}()添加自定义View点击事件
@objc func onMyClick(recognizer:UITapGestureRecognizer) {print("onMyClick")
}lazy var settingView: ItemView = {let view = ItemView()view.titleView.text = "设置"view.leftImgView.image = UIImage(named: "Setting")view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(onMyClick(recognizer:))))return view
}()使用自定义View的完整代码
//
// MyController.swift
// SnapKitTest
//
// Created by jin on 2024/8/14.
//import UIKit
import TangramKitclass MyController: UIViewController {override func viewDidLoad() {super.viewDidLoad()view.backgroundColor = .systemGroupedBackgroundtitle = "设置界面"let linear = TGLinearLayout(.vert)linear.tg_width.equal(.fill)linear.tg_height.equal(.wrap)linear.tg_top.equal(TGLayoutPos.tg_safeAreaMargin).offset(16)linear.tg_space = 1view.addSubview(linear)linear.addSubview(settingView)linear.addSubview(myView)}@objc func onMyClick(recognizer:UITapGestureRecognizer) {print("onMyClick")}lazy var settingView: ItemView = {let view = ItemView()view.titleView.text = "设置"view.leftImgView.image = UIImage(named: "Setting")view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(onMyClick(recognizer:))))return view}()lazy var myView: ItemView = {let view = ItemView()view.titleView.text = "我的"view.leftImgView.image = UIImage(named: "Setting")view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(onMyClick(recognizer:))))return view}()}
至此，基本掌握TangramKit UI框架的简单使用。