IOS 04 TangramKit 纯代码开发

sziitjin

于 2024-08-14 18:05:27 发布

阅读量622

点赞数 8

分类专栏： IOS 文章标签： ios TangramKit

本文链接：https://blog.csdn.net/sziitjin/article/details/141196143

版权

IOS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本节主要使用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 = 21
	
	button.layer.borderWidth = 1
	button.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 = .white
	
	title = "登录界面"
	
	// 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)
	
	//logo
	let 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.center
	linear.tg_space = 30
	container.addSubview(linear)
	
	// MARK: - 手机号登陆按钮
	linear.addSubview(phoneLoginButton)
	
	// MARK: - 登陆按钮
	linear.addSubview(loginButton)
	
	// MARK: - 协议
	let agrementLabelView = UILabel()
	//设置标题
	agrementLabelView.text = "登录即表示你同意《用户协议》和《隐私政策》"
	
	//设置字体大小和颜色
	agrementLabelView.font = UIFont.systemFont(ofSize: 12)
	agrementLabelView.textColor = .gray
	
	agrementLabelView.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 TangramKit

class LoginController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white
        
        title = "登录界面"
        
        // 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)
        
        //logo
        let 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.center
        linear.tg_space = 30
        container.addSubview(linear)
        
        // MARK: - 手机号登陆按钮
        linear.addSubview(phoneLoginButton)
        
        // MARK: - 登陆按钮
        linear.addSubview(loginButton)
        
        // MARK: - 协议
        let agrementLabelView = UILabel()
        //设置标题
        agrementLabelView.text = "登录即表示你同意《用户协议》和《隐私政策》"
        
        //设置字体大小和颜色
        agrementLabelView.font = UIFont.systemFont(ofSize: 12)
        agrementLabelView.textColor = .gray
        
        agrementLabelView.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 = 21
        
        button.layer.borderWidth = 1
        button.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 = .white
	tg_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 TangramKit

class ItemView: TGRelativeLayout {

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

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        innerInit()
    }
    
    func innerInit(){
        backgroundColor = .white
        tg_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 = .systemGroupedBackground
	title = "设置界面"
	
	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 = 1
	
	view.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 TangramKit

class MyController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .systemGroupedBackground
        title = "设置界面"
        
        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 = 1
        
        view.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框架的简单使用。