Skip to content

Commit

Permalink
不好意思,是第四章
Browse files Browse the repository at this point in the history
  • Loading branch information
evenluo committed Mar 10, 2014
1 parent 1ac8553 commit ef55593
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 2 deletions.
33 changes: 31 additions & 2 deletions 4-视觉效果/4-视觉效果.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,37 @@
#视觉效果

>嗯,园和椭圆还不错,但是你觉得带圆角的矩形呢
>嗯,园和椭圆还不错,但如果是带圆角的矩形呢
>我们现在也能做到那样了么
>我们现在能做到那样了么
>史蒂芬·乔布斯
我们在第三章『图层几何学』中讨论了图层的frame,第二章『寄宿图』则讨论了图层的寄宿图。但是图层不仅仅可以是图片或是颜色的容器;还有一系列内建的特性使得创造美丽优雅的令人深刻的界面元素成为可能。在这一章,我们将会探索一些能够通过使用CALayer属性实现的视觉效果。

##圆角

圆角矩形是iOS的一个标志性审美特性。这在iOS的每一个地方都得到了体现,不论是主屏幕图标,还是警告弹框,甚至是文本框。按照这流行程度,你可能会认为一定有不借助Photoshop就能轻易创建圆角举行的方法。恭喜你,猜对了。

CALayer有一个叫做`conrnerRadius`的属性控制着图层角的曲率。它是一个浮点数,默认为0(为0的时候就是直角),但是你可以把它设置成任意值。默认情况下,这个曲率值只影响背景颜色而不影响背景图片或是子图层。不过,如果把`masksToBounds`设置成YES的话,图层里面的所有东西都会被截取。

我们可以通过一个简单的项目来演示这个效果。在Interface Builder中,我们放置一些视图,他们有一些子视图。而且这些子视图有一些超出了边界(如图4.1)。你可能无法看到他们超出了边界,因为在编辑界面的时候,超出的部分总是被Interface Builder裁切掉了。不过,你相信我就好了 :)

![图4.1](./4.1.png)

图4.1 两个白色的大视图,他们都包含了小一些的红色视图。

然后在代码中,我们设置角的半径为20个点,并裁剪掉第一个视图的超出部门(见列表4.1)。技术上来说,这些属性都可以在Interface Builder的探测板中分别通过『用户定义运行时属性』和勾选『裁剪子视图』选择框来直接设置属性的值。不过,在这个示例中,代码能够表示得更清楚。图4.2是运行代码的结果

列表4.1 设置`cornerRadius``masksToBounds`

```objective-c
@interface ViewController ()@property (nonatomic, weak) IBOutlet UIView *layerView1; @property (nonatomic, weak) IBOutlet UIView *layerView2;@end@implementation ViewController- (void)viewDidLoad {
[super viewDidLoad];//set the corner radius on our layersself.layerView1.layer.cornerRadius = 20.0f; self.layerView2.layer.cornerRadius = 20.0f;//enable clipping on the second layerself.layerView2.layer.masksToBounds = YES; }@end
```
![图4.2](./4.2.png)
右图中,红色的子视图沿角半径被裁剪了
Expand Down
Binary file added 4-视觉效果/4.1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 4-视觉效果/4.2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ef55593

Please sign in to comment.