zoukankan      html  css  js  c++  java
  • [Swift通天遁地]九、拔剑吧-(3)创建多种自定义Segment分段样式的控件

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
    ➤微信公众号:山青咏芝(shanqingyongzhi)
    ➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/
    ➤GitHub地址:https://github.com/strengthen/LeetCode
    ➤原文地址:https://www.cnblogs.com/strengthen/p/10355565.html 
    ➤如果链接不是山青咏芝的博客园地址,则可能是爬取作者的文章。
    ➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

    目录:[Swift]通天遁地Swift

    本文将演示创建多种自定义Segment分段样式的控件

    首先确保已经安装了所需的第三方类库。双击查看安装配置文件【Podfile】

    1 platform :ios, '12.0'
    2 use_frameworks!
    3 
    4 target 'DemoApp' do
    5     source 'https://github.com/CocoaPods/Specs.git'
    6     pod 'PagingMenuController'
    7 end

    根据配置文件中的相关设置,安装第三方类库。

    安装完成之后,双击打开项目文件【DemoApp.xcodeproj】

    依次创建四个自定义的视图控制器,作为分段控件每个分段指向的页面。

    在项目文件夹上点击鼠标右键,弹出右键菜单。

    【New File->【Cocoa Touch->【Next】->

    【Class】:ViewController1

    【Subclass of:UIView

    【Language】:Swift

    ->Next->【Create】

    点击打开【ViewController1.swift】,现在开始编写代码,创建一个包含多行文字的段落。

     1 import UIKit
     2 //引入已经安装的第三方类库
     3 import PagingMenuController
     4 
     5 class ViewController1: UIViewController {
     6     override func viewDidLoad() {
     7         super.viewDidLoad()
     8         
     9         //初始化一个指定显示区域的标签对象
    10         let textLabel = UILabel(frame: self.view.frame)
    11         //设置标签对象的文字对齐方式为居中
    12         textLabel.textAlignment = .center
    13         //设置标签对象的字体属性
    14         textLabel.font = UIFont.systemFont(ofSize: 24)
    15         //设置标签对象的文字内容
    16         textLabel.text = "View Controller 1"
    17         //设置标签对象的背景颜色为橙色
    18         textLabel.backgroundColor = UIColor.orange
    19         
    20         //将标签对象添加到根视图
    21         view.addSubview(textLabel)
    22     }
    23 }

    在项目文件夹上点击鼠标右键,弹出右键菜单。

    【New File->【Cocoa Touch->【Next】->

    【Class】:ViewController2

    【Subclass of:UIView

    【Language】:Swift

    ->Next->【Create】

    点击打开【ViewController2.swift】,现在开始编写代码,创建一个包含多行文字的段落。

     1 import UIKit
     2 //引入已经安装的第三方类库
     3 import PagingMenuController
     4 
     5 class ViewController2: UIViewController {
     6     override func viewDidLoad() {
     7         super.viewDidLoad()
     8         
     9         //初始化一个h指定显示区域的标签对象
    10         let textLabel = UILabel(frame: self.view.frame)
    11         //设置标签对象的文字对齐方式为居中
    12         textLabel.textAlignment = .center
    13         //设置标签对象的字体属性
    14         textLabel.font = UIFont.systemFont(ofSize: 24)
    15         //设置标签对象的文字内容
    16         textLabel.text = "View Controller 2"
    17         //设置标签对象的背景颜色为洋红色
    18         textLabel.backgroundColor = UIColor.magenta
    19         
    20         //将标签对象添加到根视图
    21         view.addSubview(textLabel)
    22     }
    23 }

    按下【Command】+【Shift】+【S】另存当前的类文件,作为第三个分段的页面。

    【Save As】:ViewController3

    点击打开【ViewController3.swift】,现在开始编写代码,创建一个包含多行文字的段落。

     1 import UIKit
     2 //引入已经安装的第三方类库
     3 import PagingMenuController
     4 
     5 //记得修改类的名称ViewController3
     6 class ViewController3: UIViewController {
     7     override func viewDidLoad() {
     8         super.viewDidLoad()
     9         
    10         //初始化一个h指定显示区域的标签对象
    11         let textLabel = UILabel(frame: self.view.frame)
    12         //设置标签对象的文字对齐方式为居中
    13         textLabel.textAlignment = .center
    14         //设置标签对象的字体属性
    15         textLabel.font = UIFont.systemFont(ofSize: 24)
    16         //修改此处的标签内容
    17         textLabel.text = "View Controller 3"
    18         //设置标签对象的背景颜色为紫色
    19         textLabel.backgroundColor = UIColor.purple
    20         
    21          //将标签对象添加到根视图
    22         view.addSubview(textLabel)
    23     }
    24 }

    按下【Command】+【Shift】+【S】另存当前的类文件,作为第三个分段的页面。

    【Save As】:ViewController4

    点击打开【ViewController4.swift】,现在开始编写代码,创建一个包含多行文字的段落。

     1 import UIKit
     2 //引入已经安装的第三方类库
     3 import PagingMenuController
     4 
     5 //记得修改类的名称ViewController4
     6 class ViewController4: UIViewController {
     7     override func viewDidLoad() {
     8         super.viewDidLoad()
     9         
    10          //初始化一个h指定显示区域的标签对象
    11         let textLabel = UILabel(frame: self.view.frame)
    12          //设置标签对象的文字对齐方式为居中
    13         textLabel.textAlignment = .center
    14         //设置标签对象的字体属性
    15         textLabel.font = UIFont.systemFont(ofSize: 24)
    16         //修改此处的标签内容
    17         textLabel.text = "View Controller 4"
    18         //设置标签对象的背景颜色为棕色
    19         textLabel.backgroundColor = UIColor.brown
    20         
    21         //将标签对象添加到根视图
    22         view.addSubview(textLabel)
    23     }
    24 }

    在左侧的项目导航区,打开视图控制器的代码文件【ViewController.swift】

    现在开始编写代码,创建一个包含四个分段的自定义分段控件。

      1 import UIKit
      2 //引入已经安装的第三方类库
      3 import PagingMenuController
      4 
      5 //初始化一个结构体,用来对分段视图控件进行配置
      6 private struct PagingMenuOptions: PagingMenuControllerCustomizable
      7 {
      8     //初始化一个控件类型属性,用来设置分段控件的样式和所有的子视图控制器。
      9     fileprivate var componentType: ComponentType
     10     {
     11         //分段控件的样式,由另一个方法来设置,同时设置一个数组,作为分段控件的所有子视图控制器。
     12         return .all(menuOptions: MenuOptions(), pagingControllers: pagingControllers)
     13     }
     14     
     15     //添加一个数组属性,作为分段控件的所有子视图控制器。
     16     fileprivate var pagingControllers: [UIViewController]
     17     {
     18         //依次初始化四个子视图控制器
     19         let viewController1 = ViewController1()
     20         let viewController2 = ViewController2()
     21         let viewController3 = ViewController3()
     22         let viewController4 = ViewController4()
     23         
     24         //返回四个子视图控制器,作为子视图控制器。
     25         return [viewController1, viewController2, viewController3, viewController4]
     26     }
     27     
     28     //添加另一个结构体属性,用来设置分段控件的外观样式
     29     fileprivate struct MenuOptions: MenuViewCustomizable
     30     {
     31         //给结构体添加一个属性,
     32         //设置分段控件的显示模式为分段按钮。
     33         //分段控件的样式共有:标准样式、分段按钮样式和无限样式三种。
     34         var displayMode: MenuDisplayMode
     35         {
     36             return .segmentedControl
     37         }
     38         //添加一个属性,用来设置分段控件的焦点模式。
     39         //焦点模式共有:空白、下划线、圆角三种。
     40         var focusMode: MenuFocusMode
     41         {
     42             return .roundRect(radius: 12, horizontalPadding: 8, verticalPadding: 8, selectedColor: UIColor.orange)
     43         }
     44         //添加第三个属性,用来设置四个分段的内容。
     45         var focusMode: MenuFocusMode
     46         {
     47             return .underline(height: 3, color: UIColor.blue, horizontalPadding: 10, verticalPadding: 0)
     48         }
     49         //添加一个结构体属性,用来设置第一个分段的内容。
     50         var focusMode: MenuFocusMode
     51         {
     52             return .none
     53         }
     54         //设置第一个分段的文字内容
     55         var itemsOptions: [MenuItemViewCustomizable]
     56         {
     57             return [MenuItem1(), MenuItem2(), MenuItem3(), MenuItem4()]
     58         }
     59     }
     60     
     61     //添加一个结构体,用来设置第一个分段的内容
     62     fileprivate struct MenuItem1: MenuItemViewCustomizable
     63     {
     64         //设置第一个分段的显示模式
     65         var displayMode: MenuItemDisplayMode
     66         {
     67             //设置第一个分段的文字内容
     68             return .text(title: MenuItemText(text: "News"))
     69         }
     70     }
     71     
     72      //添加一个结构体,用来设置第二个分段的内容
     73     fileprivate struct MenuItem2: MenuItemViewCustomizable
     74     {
     75         //设置第二个分段的显示模式
     76         var displayMode: MenuItemDisplayMode
     77         {
     78             //初始化一个菜单文本对象,并设置对象的文字内容,字体颜色,高亮颜色,字体,高亮字体等属性。
     79             let itemText = MenuItemText(text: "Message", color: .lightGray, selectedColor: .white, font: UIFont(name: "Arial", size: 16)!, selectedFont: UIFont(name: "Arial", size: 12)!)
     80             //返回菜单文本对象,作为第二个分段的文字内容
     81             return .text(title: itemText)
     82         }
     83     }
     84     
     85     //添加一个结构体,用来设置第三个分段的内容
     86     fileprivate struct MenuItem3: MenuItemViewCustomizable
     87     {
     88          //设置第三个分段的显示模式
     89         var displayMode: MenuItemDisplayMode
     90         {
     91             //初始化一个指定显示区域的视图对象
     92             let view = UIView(frame: CGRect(x: 0, y: 0,  80, height: 50))
     93             //初始化一个标签对象
     94             let label = UILabel(frame: CGRect(x: 0, y: 0,  80, height: 50))
     95             //设置标签对象的文字对齐方式为居中
     96             label.textAlignment = .center
     97             //设置标签的文字内容
     98             label.text = "Service"
     99             //设置标签的字体的颜色
    100             label.textColor = UIColor.purple
    101             //将标签添加到根视图中
    102             view.addSubview(label)
    103             //返回视图对象
    104             return .custom(view: view)
    105         }
    106     }
    107     
    108     //添加一个结构体属性,用来设置第四个分段的内容
    109     fileprivate struct MenuItem4: MenuItemViewCustomizable
    110     {
    111         //设置第四个分段的显示模式
    112         var displayMode: MenuItemDisplayMode
    113         {
    114              //设置第四个分段的文字内容
    115             return .text(title: MenuItemText(text: "Setting"))
    116         }
    117     }
    118 }
    119 
    120 class ViewController: UIViewController
    121 {
    122     override func viewDidLoad()
    123     {
    124         super.viewDidLoad()
    125         // Do any additional setup after loading the view, typically from a nib.
    126         //完成分段控件的属性设置之后,开始创建分段控件。
    127         
    128         //首先设置根视图的背景颜色为白色
    129         view.backgroundColor = UIColor.white
    130         
    131         //初始化一个分段菜单设置选项
    132         let options = PagingMenuOptions()
    133         //初始化一个分段菜单控制器
    134         let pagingMenuController = PagingMenuController(options: options)
    135         //设置分段菜单的控制器的代理对象为当前的视图控制器
    136         pagingMenuController.delegate = self
    137         //设置控制器的视图的显示区域
    138         pagingMenuController.view.frame.origin.y += 20
    139         pagingMenuController.view.frame.size.height -= 20
    140         
    141         //将分段菜单控制器,作为子视图控制器,添加到当前的视图控制器。
    142         addChild(pagingMenuController)
    143         //将分段菜单控制器中的视图对象,添加到根视图。
    144         view.addSubview(pagingMenuController.view)
    145         //当将子视图控制器添加到父控制器时,必须调用子视图控制器的移动方法。
    146         pagingMenuController.didMove(toParent: self)
    147     }
    148 
    149     override func didReceiveMemoryWarning() {
    150         super.didReceiveMemoryWarning()
    151         // Dispose of any resources that can be recreated.
    152     }
    153 }
    154 
    155 //添加一个扩展,用来实现协议中的方法
    156 extension ViewController: PagingMenuControllerDelegate
    157 {
    158     //添加一个方法,用来监听子视图控制器在即将跳转时的事件
    159     func willMove(toMenu menuController: UIViewController, fromMenu previousMenuController: UIViewController)
    160     {
    161         //在控制台输出当前方法的名称
    162         print(#function)
    163         //输出上一个视图控制器
    164         print(previousMenuController)
    165         //和即将跳转到的视图控制器的信息
    166         print(menuController)
    167     }
    168     
    169     //添加一个方法,用来监听子视图控制器在完成跳转后的事件。
    170     func didMove(toMenu menuController: UIViewController, fromMenu previousMenuController: UIViewController)
    171     {
    172          //在控制台输出当前方法的名称
    173         print(#function)
    174         //输出上一个视图控制器
    175         print(previousMenuController)
    176         //和当前的视图控制器的信息
    177         print(menuController)
    178     }
    179     
    180     //添加一个方法,用来监听分段控件在即将切换时的事件
    181     func willMove(toMenuItem menuItemView: MenuItemView, fromMenuItem previousMenuItemView: MenuItemView)
    182     {
    183         //在控制台输出当前方法的名称
    184         print(#function)
    185         //输出上一个分段的信息
    186         print(previousMenuItemView)
    187         //输出即将切换到的分段的信息
    188         print(menuItemView)
    189     }
    190     
    191     //添加一个方法,用来监听分段在完成切换后的事件
    192     func didMove(toMenuItem menuItemView: MenuItemView, fromMenuItem previousMenuItemView: MenuItemView)
    193     {
    194         //在控制台输出当前方法的名称
    195         print(#function)
    196         //输出上一个分段信息
    197         print(previousMenuItemView)
    198         //完成切换后的分段的信息
    199         print(menuItemView)
    200     }
    201 }

  • 相关阅读:
    第二次作业——结对项目需求分析与原型设计
    调研《构建之法》指导下的历届作品
    软件工程的实践项目课程的自我目标
    使用@Scheduled注解做定时任务
    ng2中的百度echarts3.0使用——(echarts-ng2)
    angular-cli.json配置参数解释,以及依稀常用命令的通用关键参数解释
    SpringData实现Mongodb的CRUD:MongoTemplate框架
    idea利用jdbc连接ORACLE数据库实现一个查询显示
    dbvisualizer的使用
    DUBBO开发问题:添加无法生成主键
  • 原文地址:https://www.cnblogs.com/strengthen/p/10355565.html
Copyright © 2011-2022 走看看