专栏名称: Cocoa开发者社区
CocoaChina苹果开发中文社区官方微信,提供教程资源、app推广营销、招聘、外包及培训信息、各类沙龙交流活动以及更多开发者服务。
目录
相关文章推荐
51好读  ›  专栏  ›  Cocoa开发者社区

iOS中UIView快速调整坐标和尺寸

Cocoa开发者社区  · 公众号  · ios  · 2017-07-31 11:42

正文

1. 系统初始化的布局及其缺点


在iOS开发中,UIView的布局通常是用frame来进行设置的,我们可以直接使用带frame参数的初始化方法。


如下,在视图控制器中添加一个UIView为view1,若要设置view1的布局距离屏幕上边20,屏幕的左边20,屏幕下边20,距离屏幕右边20。代码:


let view1 = UIView(frame: CGRect(x: 20.0, y: 20.0, width: UIScreen.main.bounds.size.width - 40.0, height: UIScreen.main.bounds.size.height - 40.0))


显然,对于不更改的情况还能较为方便的对frame进行赋值,不过要注意的是设置width的时候, view1的x坐标已经是20.0,既然右边也距离屏幕边沿20.0,那么它的宽度就只能设置成UIScreen.main.bounds.size.width - 40.0。纵向布局同理。


这样的布局有一定的缺点:


view宽高需要依照屏幕中的空间布局经过计算才能得到,所以造成不必要的麻烦。


如果对frame中的单项属性进行修改,这里是不可以的。


2.解决方案


系统没有对frame中的属性提供set方法,所以此处我们需要利用自己的智慧来页面布局,提高可读性,提高编码效率。


扩展方法size


/// 尺寸

var size: CGSize {

  get {

    return self.frame.size

  }

  set(newValue) {

    self.frame.size = CGSize(width: newValue.width, height: newValue.height)

  }

}


width


/// 宽度

var width: CGFloat {

  get {

   return self.frame.size.width

  }

  set(newValue) {

   self.frame.size.width = newValue

  }

}


height


/// 高度

var height: CGFloat {

  get {

    return self.frame.size.height

  }

  set(newValue) {

    self.frame.size.height = newValue

  }

}


x


/// 横坐标

var x: CGFloat {

  get {

    return self.frame.minX

  }

  set(newValue) {

   self.frame = CGRect(x: newValue, y: y, width: width, height: height)

  }

}


y


/// 纵坐标

var y: CGFloat {

  get {

    return self.frame.minY

  }

  set(newValue) {

   self.frame = CGRect(x: x, y: newValue, width: width, height: height)

  }

}


right


/// 纵坐标

var y: CGFloat {

  get {

    return self.frame.minY

  }

  set(newValue) {

    self.frame = CGRect(x: x, y: newValue, width: width, height: height)

  }

}


bottom


/// 底端纵坐标

var bottom: CGFloat {

  get {

    return frame.origin.y + frame.size.height

  }

  set(newValue) {

    frame.origin.y = newValue - frame.size.height

  }

}


centerX


/// 中心横坐标

var centerX: CGFloat {

  get {

    return self.center.x

  }

  set(newValue) {

    center.x = newValue

  }

}


centerY


/// 中心纵坐标

var centerY: CGFloat {

  get {

    return center.y

  }

  set(newValue) {

    center.y = newValue

  }

}


origin


/// 原点

var origin: CGPoint {

  get {

    return self.origin

  }

  set(newValue) {

    frame.origin = newValue

  }

}


topRight


/// 右上角坐标

var topRight: CGPoint {

  get {

    return CGPoint(x: frame.origin.x + frame.size.width, y: frame.origin.y)

  }

  set(newValue) {

    frame.origin = CGPoint(x: newValue.x - width, y: newValue.y)

  }

}


bottomRight


/// 右下角坐标

var bottomRight: CGPoint {

  get {

    return CGPoint(x: frame.origin.x + frame.size.width, y: frame.origin.y + frame.size.height)

  }

  set(newValue) {

    frame.origin = CGPoint(x: newValue.x - width, y: newValue.y - height)

  }

}


bottomLeft


/// 左下角坐标

var bottomLeft: CGPoint {

  get {

    return CGPoint(x: frame.origin.x, y: frame.origin.y + frame.size.height)

  }

  set(newValue) {

    frame.origin = CGPoint(x: newValue.x, y: newValue.y - height)

  }

}


剪掉一个方向的部分距离。To cut off in one direction some distance


/// 获取UIView对象某个方向缩进指定距离后的方形区域

///

/// - Parameters:

///   - direction: 要缩进的方向

///   - distance: 缩进的距离

/// - Returns: 得到的区域

func cutRect(direction: Direction, distance: CGFloat) ->  CGRect {

  switch direction {

  case .top:

    return CGRect(x: 0, y: distance, width: self.width, height: self.height - distance)

  case .left:

    return CGRect(x: distance, y: 0, width: self.width - distance, height: self.height)

  case .right:

    return CGRect(x: 0, y: 0, width: self.width - distance, height: self.height)

  case .bottom:

    return CGRect(x: 0, y: 0, width: self.width, height: self.height - distance)

  }

}


3.使用


给UIView写入相关扩展


  • 设置view1横坐标为20.0


view1.x = 20.0;


  • 设置view1纵坐标为 30.0


view1.y = 30.0


  • 设置view1的宽度为 40.0


view1.width = 40.0


  • 设置view1的高度为 50.0


view1.height = 50.0


  • 设置view1的尺寸为宽60.0,宽70.0


vie1.size = CGSize(width: 60.0, height: 70.0)w


  • 设置view1的右边沿的横坐标位90.0


view1.right = 90.0


  • 设置view1的底边的纵坐标位110.0


view1.bottom = 110.0


  • 设置view1的中心横坐标为100.0


view1.bottom = 100.0


  • 设置view1的中心纵坐标为 110.0


view1.centerY = 110.0


  • 设置view1的原点坐标为(120,150)


view1.origin = CGPoint(x: 120.0, y:150.0)


  • 设置view1的右上角坐标为(130,140)


view1.topRight = CGPoint(x: 130.0, y:140.0)


  • 其他几个角落的坐标设置同理


  • 在实际设置UIView的坐标的时候,可能会遇见某一个方位向内缩进一段距离。比如, view1的顶部要比父视图往下缩进20.0, 其他方向与父视图重合,此时可以用如下方法:


view1.cutRect(direction: .up, distance: 20.0)


4.总结


  • 上述方法主要对UIView的frame相关的get和set方法封装成了UIView的对象方法,从而实现了快速的调整UIView的大小和坐标.

1.在使用相关方法的时候请先设置view的大小,在设置坐标,保证实际显示与设置的值对应;


2.在xib开发的时候,应当将相应的方法在 awakeFromNib() 方法中实现,已保证父类的坐标体系已经固定下来。


一周精选

CocoaChina

C

C

iOS App 稳定性指标及监测

一位程序媛眼中的程序员

在GitHub上最受欢迎的大多是库或框架

[iOS]终极横竖屏切换解决方案

让你成为Git和GitHub大神的20个技巧

iOS高级调试&逆向技术


CocoaChina

全球最大苹果开发中文社区