文章标题

来源：互联网发布：手机淘宝下载2016官方编辑：程序博客网时间：2024/05/08 08:14

iOS_UIVisualEffectView (毛玻璃效果)

说明:
毛玻璃的使用虽然很简单, 但我还是在这片博文中引用了大量的苹果官方API. 我希望任何浏览过这片博文的人不仅可以知道如何使用UIVisualEffectView这个类, 也可以知道它的原理. 其实任何一个类都可以在苹果官方API中找到它的简单使用方法, 也希望大家能够掌握这种学习方法.

希望大家能够耐心的, 按照顺序的看完这片博文.

文章中尽量不使用或少使用封装, 目的是让大家清楚为了实现功能所需要的官方核心API是哪些(如果使用封装, 会在封装外面加以注释)

UIVisualEffectView

核心API

Class : UIVisualEffectView, UIVisualEffect, UIBlurEffect, UIVibrancyEffect

/** UIVisualEffectView的初始化方法. */- (instancetype)initWithEffect:(UIVisualEffect *)effect/** UIBlurEffect的类方法. */+ (UIBlurEffect *)effectWithStyle:(UIBlurEffectStyle)style/** UIVibrancyEffect的类方法. */+ (UIVibrancyEffect *)effectForBlurEffect:(UIBlurEffect *)blurEffect

功能实现

思路:

1 . 实现UIBlurEffect类型的毛玻璃效果

创建一个imageView和一个lable.

创建blur类型的UIVisualView

最后实现毛玻璃效果

2 . 实现UIVibrancyEffect类型的毛玻璃效果

创建一个imageView和一个lable.

创建vibrancy类型的UIVisualView

最后实现毛玻璃效果

3 . 用于消息通知中的毛玻璃效果.

code

1 . 实现UIBlurEffect类型的毛玻璃效果

/** 1. 创建UIImageView的对象blurImageView. */UIImageView *blurImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 2 * self.view.frame.size.width, self.view.frame.size.height)];UIImage *image = [UIImage imageNamed:@"a.jpg"];blurImageView.image = image;[self.view addSubview:blurImageView];[blurImageView release];/** 2. 创建UILable的对象. */UILabel *blurLabel = [[UILabel alloc] initWithFrame:CGRectMake(30, 60, self.view.frame.size.width - 60, 300)];blurLabel.text = @"Our mind is sponge, our heart is stream.";/** 设置blurLabel的最大行数. */blurLabel.numberOfLines = 2;/** 设置blurLabel的字体颜色. */blurLabel.textColor = [UIColor whiteColor];/** 设置blurLabel的字体为系统粗体, 字体大小为34. */blurLabel.font = [UIFont boldSystemFontOfSize:34];/** 此时, 我们先不将blurLabel添加到任何视图上. */

接下来我们开始创建UIVisualEffectView的对象

/**  * UIVisualEffectView类的类方法是:  *  *      - (instancetype)initWithEffect:(UIVisualEffect *)effect *    *      参数effect:  这个参数可以是UIBlurEffect类的对象, 或者是UIVibrancyEffect类的对象. *     * 所以我们要先创建一个UIBlurEffect类的对象. *//** * 我们可以在官方API中看到UIBlurEffect和UIVibrancyEffect是继承于UIVisualEffect这个类, 但是这个类没有任何的方法和属性. * 在苹果官方API中是这样描述这个类的: *      This class contains no methods and is intended as a way to initialize a UIVisualEffectView with UIBlurEffect and UIVibrancyEffect objects. *   /** * UIBlurEffect类的类方法是:  * *          + (UIBlurEffect *)effectWithStyle:(UIBlurEffectStyle)style * *          参数style是一个枚举类型 : typedef enum {                                                   UIBlurEffectStyleExtraLight,                                                   UIBlurEffectStyleLight,                                                   UIBlurEffectStyleDark                                                 } UIBlurEffectStyle; *//** 创建UIBlurEffect类的对象blur, 参数以UIBlurEffectStyleLight为例. */UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];/** 创建UIVisualEffectView的对象visualView, 以blur为参数. */UIVisualEffectView * visualView = [[UIVisualEffectView alloc] initWithEffect:blur];/** 将visualView的大小等于blurImageView的大小. (visualView的大小可以自行设定, 它的大小决定了显示毛玻璃效果区域的大小.) */visualView.frame = blurImageView.bounds;/** 设置visualView的透明度 * (笔者英语能力有限, 只能翻译出大概意思, 博文底部有全部的官方API, 感兴趣可以自己翻译一下.) * 在官方的API中对UIVisualView类的对象的透明度有这样的描述(此处未全部引用官方API): *      When using the UIVisualEffectView class, avoid alpha values that are less than 1. *      当使用UIVisualEffectView的类时, 避免alpha的值小于1; *     *      Setting the alpha to less than 1 on the visual effect view or any of its superviews causes many effects to look incorrect or not show up at all. *     当设置visual effect view(相当于我们创建的visualView)的alpha小于1的时候, 会造成它的父视图的一些效果看起来不正确, 或者不能显示全部. *  * 我个人对苹果官方API的这段话是这样理解的: *      当alpha的值逐渐趋近于0的时候, 毛玻璃效果会越来越淡, 直到完全没有(这一点可以在Demo中看到). 我认为苹果方面可能怕开发者将alpha的值设置的过于小, 看不到毛玻璃效果, 所以有这样的描述来提醒开发者. 也有可能有内在的原因, 而我并不知道. 我在试验的时候发现, alpha设置成任何大于1的值所显示的效果都和设置成1的效果相同, 只有在设置成小于1的时候才会有不同的效果. 所以大家在给alpha赋值时, 要慎重一些.*/visualView.alpha = 1;/** 将visualView添加到blurImageView上. */[blurImageView addSubview:visualView];/** 对visualView进行内存管理. */[visualView release];/** 然后我们把之前创建出来的blurLabel添加到visualView上. 但是这还有一个需要注意的地方.*//**  * 在苹果官方API中有几处提到了如何向UIVisualView中添加子视图的方法. *  Depending on the desired effect, the effect may affect content layered behind the view or content added to the visual effect view’s contentView. *   *  After you add the visual effect view to the view hierarchy, add any subviews to the contentView property of the visual effect view. Do not add subviews directly to the visual effect view itself. * * contentView: UIVisualView的属性, 对它的描述是这样的: *      Add subviews to the contentView and not to UIVisualEffectView directly. * 这些苹果官方API的描述都是在告诉开发者, 不要直接向UIVisualView添加子视图, 而是在它的contentView上添加子视图. * 所以大家在这个地方一定要注意一下. */[visualView.contentView addSubview:blurLabel]; /**< 大家也可以尝试将blurLabel添加到blurImageView上, 看一下效果. *//** 对blurLabel进行内存管理. */[blurLabel release];/** 此时我们就可以运行看效果啦! */

效果图

这里写图片描述

2 . 实现UIVibrancyEffect类型的毛玻璃效果

/** 1. 创建UIImageView的对象vibrancyImageView. */UIImageView *vibrancyImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 2 * self.view.frame.size.width, self.view.frame.size.height)];UIImage *image = [UIImage imageNamed:@"a.jpg"];/** * 在UIVibrancyEffect这种类型的毛玻璃中, 苹果官方API对UIImageView的image属性的渲染方式做出了要求: *      UIImageView will need its image to have a rendering mode of UIImageRenderingModeAlwaysTemplate to receive the proper effect. *      * UIImageView的属性imgae的渲染方式要选择UIImageRenderingModeAlwaysTemplate, 会获得更好的效果. *//**  * 给UIImage类的对象设置渲染方式的方法: - (UIImage * nonnull)imageWithRenderingMode:(UIImageRenderingMode)renderingMode * 参数renderingMode: typedef enum : NSInteger {                                               UIImageRenderingModeAutomatic,                                               UIImageRenderingModeAlwaysOriginal,                                               UIImageRenderingModeAlwaysTemplate,                                            information                                             } UIImageRenderingMode; */[image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];vibrancyImageView.image = image;vibrancyImageView.userInteractionEnabled = YES;[self.view addSubview:vibrancyImageView];[vibrancyImageView release];/** 2. 创建UILable的对象. */UILabel *vibrancyLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 60, self.view.frame.size.width - 20, 300)];vibrancyLabel.text = @"Our mind is a sponge, our heart is a stream.";vibrancyLabel.numberOfLines = 2;vibrancyLabel.textColor = [UIColor whiteColor];vibrancyLabel.font = [UIFont boldSystemFontOfSize:34];

接下来我们开始创建UIVisualEffectView的对象

UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];    /**     * 在上面我们提到过UIVisualEffectView类的类方法里的参数effect有两种类型:UIBlurEffect和UIVibrancyEffect.     * 在这里我们创建UIVibrancyEffect类型的UIvisualEffectView;      */    /**      * UIVibrancyEffect有两种创建方法, 在这里我们使用: + (UIVibrancyEffect *)effectForBlurEffect:(UIBlurEffect *)blurEffect     *      * 我们可以看出类方法中的参数类型是UIBlurEffect类型, 所以之前创建了一个UIBlurEffect的对象.     */    UIVibrancyEffect *vibrancy = [UIVibrancyEffect effectForBlurEffect:blur];    /** 下面的步骤同上. */     UIVisualEffectView * visualView = [[UIVisualEffectView alloc] initWithEffect:vibrancy];    visualView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);    visualView.alpha = 1;    [vibrancyImageView addSubview:visualView];    [visualView release];

效果图:
这里写图片描述

这里写图片描述

此时我们就可以看出UIBlurEffect和UIVibrancyEffect这两种类型的毛玻璃的区别了.

而在苹果官方API中对UIBlurEffect和UIVibrancyEffect两种类型的毛玻璃效果都有过描述:

UIBlurEffect

A UIBlurEffect object applies a blurring effect to the content layered behind a UIVisualEffectView. Views added to the contentView of a UIVisualEffectView are not affected by the blur effect.

UIVibrancyEffect

A UIVibrancyEffect object amplifies and adjusts the color of the content layered behind a UIVisualEffectView object, allowing the content placed inside of the contentView to become more vivid. A vibrancy effect is intended to be used as a subview of or layered on top of a UIVisualEffectView that has been configured with a UIBlurEffect.

The vibrancy effect is color dependent. Any subviews that you add to the contentView must implement the tintColorDidChange method and update themselves accordingly. UIImageView objects with images that have a rendering mode of UIImageRenderingModeAlwaysTemplate as well as UILabel objects will update automatically.

3 . 用于消息通知中的毛玻璃效果.

苹果官方API: Creates a vibrancy effect for use in Notification Center.@ return The vibrancy effect that’s appropriate for use in Today widgets in Notification Center. To learn more about Today widgets, see Today.这种效果可能后续会单独写一篇博客, 如果想自学, 可以到WWDC 2014 Session 221(Creating Custom iOS User Interfaces)学习.

API 官方注释

/** * @ brief      Creates a new visual effect view with the designated visual effect. *  * @ param      The UIVisualEffect you provide for the view. This can be a UIBlurEffect or a UIVibrancyEffect. *  * @ return     The new view containing the designated visual effect.  */- (instancetype)initWithEffect:(UIVisualEffect *)effect

/** * @ brief      Creates a blur effect with the designated style. *  * @ param      The intensity of the blur effect. See UIBlurEffectStyle for valid options. *  * @ return     The blur effect to be used by a UIVisualEffectView object. */+ (UIBlurEffect *)effectWithStyle:(UIBlurEffectStyle)style

/** * @ brief      Creates a vibrancy effect for a specific blur effect. * @ param      The UIBlurEffect used by the blurred view the vibrancy effect is attached to. * @ return     The vibrancy effect to be used by a UIVisualEffectView object. */+ (UIVibrancyEffect *)effectForBlurEffect:(UIBlurEffect *)blurEffect

0 0