2023学年完整公开课版UI组件

UI组件北京电子科技职业学院UI常见组件UILabel1UILabelUILabel常用于在界面上显示一行或多行文本，可视化创建的方法是将这个组件拖放到Main.storyboard中某一个ViewController中。UILabelUILabel的代码创建方法//方法1:创建时设置frameletrect=CGRect(x:10,y:10,width:300,height:30)letlabel=UILabel(frame:rect)//添加到self.view上才会显示出来self.view.addSubview(label)

//方法2:先创建，后设置frameletlabel=UILabel()label.frame=CGRect(x:10,y:90,width:300,height:30)self.view.addSubview(label)UILabelUILabel的常用属性：文本内容设置、背景色设置、字体颜色设置、字体大小设置和文本对齐方式设置等。//设置背景色label.backgroundColor=UIColor.green

//设置字体颜色label.textColor=UIColor.red

//设置字体大小label.font=UIFont.systemFont(ofSize:14)

//设置文本对齐方式，默认左对齐label.textAlignment=NSTextAlignment.right

//设置要显示的文本label.text="Iamalabel"

//当文字超出标签宽度时，自动调整文字大小，使其不被截断label.adjustsFontSizeToFitWidth=trueUILabel显示多行文本：显示多行文本需要两个条件，一个是设置numberOfLines的值为要显示的行数，还有就是label的高度要>=文字的行高和文字行间距总和。//方法1:显示固定行数的文本label.frame=CGRect(x:10,y:100,width:100,height:100)label.numberOfLines=2label.text="Iamalabel,Iamalabel,Iamalabel"

//方法2:根据文字长度自己确定显示几行,只需设置numberOfLines=0label.numberOfLines=0label.text="Iamalabel,Iamalabel,Iamalabel"练习：请设计实现新闻界面，采用多个Label，要求如图所示。UIButton2UIButtonUIButton是一个用于接受用户触摸事件的iOS常用组件，可视化创建的方法是将这个组件拖放到Main.storyboard中某一个ViewController中。UIButton常用的触摸事件类型： touchDown：单点触摸按下事件，点触屏幕 touchDownRepeat：多点触摸按下事件，点触计数大于1，按下第2、3或第4根手指的时候 touchDragInside：触摸在控件内拖动时 touchDragOutside：触摸在控件外拖动时 touchDragEnter：触摸从控件之外拖动到内部时 touchDragExit：触摸从控件内部拖动到外部时 touchUpInside：在控件之内触摸并抬起事件 touchUpOutside：在控件之外触摸抬起事件 touchCancel：触摸取消事件，即一次触摸因为放上太多手指而被取消，或者电话打断UIButtonUIButton的代码创建方法：//方法1:创建一个系统内建样式的UIButtonletbutton=UIButton(type:UIButtonType.system)button.frame=CGRect(x:150,y:150,width:120,height:40)button.setTitle("Clickme",for:UIControlState.normal)button.titleLabel?.font=UIFont.systemFont(ofSize:18)button.addTarget(self,action:#selector(btnClick(_:)),for:UIControlEvents.touchUpInside)button.layer.cornerRadius=5.0//添加到self.view上才会显示出来self.view.addSubview(button)//Button触摸后，需要调用的事件方法funcbtnClick(_sender:UIButton){print("Wuwu~~,Iamherenow")sender.isSelected=!sender.isSelected}//方法2:创建一个自定义的UIButton，用于模拟复选框letrect=CGRect(x:10,y:150,width:50,height:50)letbutton=UIButton(frame:rect)button.setImage(UIImage(named:"checknoneBtn.png"),for:UIControlState.normal)button.setImage(UIImage(named:"checkedBtn.png"),for:UIControlState.selected)button.addTarget(self,action:#selector(btnClick(_:)),for:UIControlEvents.touchUpInside)button.layer.cornerRadius=5.0self.view.addSubview(button)UIButton可以模拟复选框的UIButton，需要两个状态的图片，如图所示，左边是选中后显示的图片（checkedBtn.png），右边是正常状态下的图片（checknoneBtn.png）。UIButtonUIButton的常用属性和方法：按钮上的文字设置setTitle()、按钮上的文字颜色设置setTitleColor()、按钮上的文字字体大小设置titleLabel?.font、按钮背景颜色设置backgroundColor和是否可用isEnable、是否隐藏不显示isHidden、是否被选中isSelected等。练习：请设计实现调查界面，采用UIButton和UIlabel设计调查选项内容3UIImageViewUIImageViewUIImageView是一个用于iOS显示图片、简单动画等的组件，可视化创建的方法是将这个组件拖放到Main.storyboard中某一个ViewController中。UIImageView的用户交互默认是关闭的，也就是说ImageView对其上的触摸事件都不会响应，通过设置userInteractionEnabled属性为真，然后给UIImageVIew添加一个点击手势，就可以实现对触摸事件的响应。UIImageViewUIImageView的代码创建方法//创建一个UIImageView,图片文件为“checkedBtn.png”letimageViewRect=CGRect(x:0,y:350,width:100,height:100)letimageView=UIImageView(frame:imageViewRect)letimg=UIImage(named:"checkedBtn.png")imageView.image=img//添加到self.view上才会显示出来self.view.addSubview(imageView)UIImageViewUIImageView的交互功能代码创建方法：//用户交互imageView.isUserInteractionEnabled=truelettap=UITapGestureRecognizer(target:self,action:#selector(tapAction(tap:)))imageView.addGestureRecognizer(tap)//UIImageView触摸后，需要调用的事件方法functapAction(tap:UITapGestureRecognizer){letscale:CGFloat=1.2varframe=tap.view!.frameframe=CGRect(x:frame.origin.x,y:frame.origin.y,width:frame.size.width*scale,height:frame.size.height*scale)tap.view!.frame=frame}UIView4UIViewUIView就是表示屏幕上的一块矩形区域，它在App中占有绝对重要的地位，因为iOS中几乎所有的可视控件都是UIView的子类，可视化创建的方法是将这个组件拖放到Main.storyboard中某一个ViewController中。UIViewUIView的功能：管理视图区域里的内容、处理视图区域中的事件、管理子视图，以及绘图、动画等。UIView的常用属性：frame：相对父视图的坐标和大小（x,y,width,height）bounds：相对自身的坐标和大小，所以bounds的x和y永远为0（0,0,width,height）center：相对父视图的中心位置的坐标transform：控制视图的放大、缩小和旋转superview：获取父视图subviews：获取所有子视图alpha：视图的透明度（0.0-1.0）tag：视图的标志（Int类型，默认等于0），设置后，可以通过viewWithTag方法拿到这个视图backgroundColor：背景颜色UIViewUIView的常用方法：funcaddSubview(view:UIView)：添加视图到父视图，只要越晚添加，视图就在越上层，类似于画图软件中的图层概念funcremoveFromSuperview()：将视图从父视图中移除funcexchangeSubview(at:index1,withSubviewAt:index2)：将index1和index2位置的两个视图互换位置funcbringSubview(toFront:UIView)：把视图移到最顶层funcsendSubview(toBack:UIView)：把视图移到最底层funcviewWithTag(tag:Int)->UIView?：根据tag值获取视图UIViewUIView的代码创建方法//创建Viewletview1=UIView()letview2=UIView(frame:CGRect(x:20,y:120,width:100,height:100))letview3=UIView(frame:CGRect(x:40,y:140,width:100,height:100))//设置view的尺寸view1.frame=CGRect(x:0,y:100,width:100,height:100)

//设置view的背景色view1.backgroundColor=UIColor.redview2.backgroundColor=UIColor.greenview3.backgroundColor=UIColor.blue

//设置view的中心位置,不改变view的大小view1.center=CGPoint(x:80,y:200)//依次添加三个视图(从上到下是：蓝，绿，红)self.view.addSubview(view1)self.view.addSubview(view2)s