AutoLayout是在ios6中引入的,极大的简化了页面布局,成为xib开发必备神器。然而,想要用好AutoLayout并不是一件简单的事,其中有二个很实用的约束在各类书籍和资料里都很少提及,那就是hugging
和 compression resistance约束。下面就来说说什么是 hugging 和 compression
resistance约束。

为了接收用户反馈,很多iOS应用都会在设置页面中,加入发送邮件功能——尤其当应用是由个人开发者开发时。当然iOS中邮件的发送方式有很多种,有体验相对较差openURL跳转方式,也有调用其他第三方库等办法。

动画效果如图所示:

我们可以在这个位置找到Hugging 和 Compression Resistance约束

不过较常用且方便的,还是如下图,调用系统的MFMailComposeViewController视图在应用内完成邮件发送,并返回应用。

澳门微尼斯人手机版 1loadAnimation.gif

澳门微尼斯人手机版 2autoLayout3.png

澳门微尼斯人手机版 3chaoxi_feedback

这天儿是真特么热啊,现在的基本状态就是:晚上热的睡不着、早上困得醒不来、白天工作没精神……照这样下去,估计是要废。大家有啥好的“抗日”绝招,欢迎分享。
废话不多说,由于项目中上传音频文件到服务器的过程中,需要展示这样的动画,于是花费了半上午时间实现了该效果。
首先,使用贝塞尔曲线配合CAShapeLayer画了个圆;
其次,将CAShapeLayer作为animationView的layer遮罩;
最后,使用CABasicAnimation对CAShapeLayer的strokeEnd属性实现动画效果。(该属性取值范围为0.0~1.0).

Hugging priority
确定view有多大的优先级阻止自己变大。这么讲还是比较抽象,那么用UILabel举例,通俗的讲就是
“有两个隐形的力将UILabel尽力向里挤压,直到刚好显示出文字为止”该约束的默认优先级为251。如果还是不明白的话,可以看看下面的例子。

下面就详解下这种方式的实现步骤。

对应的代码如下:

澳门微尼斯人手机版 4image

首先,拖一个Table View Controllermain.storyboard中,并选中Table View在右侧属性面板中将其设置为静态列表Static Cells

 override func viewDidLoad() { super.viewDidLoad() let width = CGRectGetWidth(animationView.frame) let height = CGRectGetHeight(animationView.frame) let centerX = width / 2 let centerY = height / 2 let path = UIBezierPath.init(arcCenter: CGPointMake(centerX, centerY), radius: width / 4, startAngle:CGFloat(-M_PI / 2), endAngle:CGFloat(3 * M_PI / 2), clockwise: true) layer.fillColor = UIColor.clearColor().CGColor //必须为clearColor layer.strokeColor = UIColor.greenColor().CGColor layer.lineWidth = width / 2 //线宽为animationView高度一半 layer.path = path.CGPath animationView.layer.mask = layer } override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) { let animation = CABasicAnimation.init(keyPath: "strokeEnd") animation.duration = 5.0 animation.fromValue = 0.0 animation.toValue = 1.0 layer .addAnimation(animation, forKey: "key") }

我对UILabel设置了上下左右4个约束(hugging约束是UILabel自带的,用箭头表示),由于左右两边的设置的约束距离较短,左右两边的约束优先级值为1000,大于hugging约束的251,因此,label的宽度并不是正好与文字宽度相等,而是被拉开了一点,如红色方框所示。下面我将做一点变化,我将右侧的约束的优先值改成250,小于hugging约束,如图所示:

澳门微尼斯人手机版 5static_cells

中间也踩了很多坑,由于半径和线宽取值不同对应的动画效果也不同,要想实现这样的扇形动画效果,经过多次尝试,最终确认:
贝塞尔曲线的radius必须为animationView高度的四分之一;
CAShapeLayer的线宽必须为animationView高度的二分之一;
对于这两个值为什么一个是四分之一,一个是二分之一,我也没太弄明白,如果有知道原因的同学,请指教,谢谢。

澳门微尼斯人手机版 6autoLayout2.png由于右侧的约束优先级为250,小于hugging的约束251,因此,UILabel成功被挤压,直到正好显示内容的字体。

为了演示方便这里就先创建一个Section,其中有两行Cell。两个Cell的Style都设置为Basic,并将Title修改如下。

如果理解了hugging约束,那么理解起来Compression
Resistance约束就不困难了,通俗得讲,Compression
Resistance约束就是[“有两个隐形的力将UILabel尽力向外拉,直到刚好显示出文字为止”]该约束的默认优先级默认为750。正好与hugging约束相反。

澳门微尼斯人手机版 7table_澳门微尼斯人手机版,view_cel

澳门微尼斯人手机版 8autoLayout4.png

下一步是建立这个Table ViewController。新建一个Cocoa Touch Class文件,并选择Subclass
of UITableViewController

我们将约束调整,由于现在设置的约束不足以让Label显示出完整内容,因此,UIlabel的内容变成了“…”显示。下面同样将右侧的约束优先值修改为749,小于Compression
Resistance约束默认的750。

澳门微尼斯人手机版 9table_view_cel

澳门微尼斯人手机版 10autoLayout5.png可以看到,UILabel成功被“撑开”了,直到完整得显示出所有内容。

接着在右边工具栏面板中为其设置好Custom
Class。由于这里暂时用不到这个UITableViewController类里的内容,可以把他们都注释掉或删掉。接着在其中重写一个tableView点选的函数:

文章一开始我就讲了这个2个约束很有用,但是直到现在还没有说明其到底有什么用。下面我就来说说这2个约束的实际运用。在我做项目的时候,产品经理有一个需求,有2个Label,左边是商品标题,右边是单价,这两个Label排成一行,优先显示单价,左边显示不下就换行显示,而不能用”…”显示。大致布局大概就像这样。

override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath){ if indexPath.section == 0 && indexPath.row == 0 { print } if indexPath.section == 0 && indexPath.row == 1 { print }} 

发表评论

电子邮件地址不会被公开。 必填项已用*标注