iOS 7 模糊 TableView 后面的 ImageView

Posted 2023-03-13

【中文标题】iOS 7 模糊 TableView 后面的 ImageView

【英文标题】：iOS 7 Blur ImageView Behind TableView

【发布时间】：2014-01-14 20:51:05

【问题描述】：

我有一个表格视图，后面有一个图像视图。我试图弄清楚如何模糊表格视图后面的图像，类似于打开控制中心时的样子。

这是我的看法：

这是它的代码：

#import "ToursAndConferencesViewController.h"
#import "RSSChannel.h"
#import "RSSItem.h"
#import "WebViewController.h"
#import "DTCustomColoredAccessory.h"
#import "SVProgressHUD.h"

@implementation ToursAndConferencesViewController

    UIActivityIndicatorView *loadingIndicator;

@synthesize webViewController;

- (void)viewDidLoad

    UIImageView *background = [[UIImageView alloc]init];
    background.image = [UIImage imageNamed:@"plain_app-background.png"];

    self.tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleGrouped];
    [self.tableView setBackgroundView:background];
    self.title = @"Tours & Conferences";

    [[SVProgressHUD appearance]setHudBackgroundColor:[UIColor blackColor]];
    [[SVProgressHUD appearance]setHudForegroundColor:[UIColor whiteColor]];

    [SVProgressHUD showWithStatus:@"Loading"];
    // [SVProgressHUD showWithStatus:@"Loading" maskType:SVProgressHUDMaskTypeGradient];


- (void)viewDidDisappear:(BOOL)animated

    [SVProgressHUD dismiss];


- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName attributes:(NSDictionary *)attributeDict

    NSLog(@"%@ found a %@ element", self, elementName);
    if ([elementName isEqual:@"channel"])
    
        // If the parser saw a channel, create new instance, store in our ivar
        channel = [[RSSChannel alloc]init];

        // Give the channel object a pointer back to ourselves for later
        [channel setParentParserDelegate:self];

        // Set the parser's delegate to the channel object
        [parser setDelegate:channel];
    


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

    // return 0;
    NSLog(@"channel items %d", [[channel items]count]);
    return [[channel items]count];


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

    return 50;


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

    // return nil;

    UIImageView *image = [[UIImageView alloc]init];
    image.image = [UIImage imageNamed:@"CellImage.png"];

    UIImageView *background = [[UIImageView alloc]init];
    background.image = [UIImage imageNamed:@"plain_app-background.png"];

    UIImageView *highlightedCellImage = [[UIImageView alloc]init];
    highlightedCellImage.image = [UIImage imageNamed:@"HighlightedCellImage"];

    UIColor *kfbBlue = [UIColor colorWithRed:8.0/255.0f green:77.0/255.0f blue:139.0/255.0f alpha:1];
    UIColor *kfbLightBlue = [UIColor colorWithRed:24.0/255.0f green:89.0/255.0f blue:147.0/255.0f alpha:1];

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"UITableViewCell"];
    if (cell == nil)
    
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"UITableViewCell"];
        cell.textLabel.font=[UIFont systemFontOfSize:16.0];
    
    RSSItem *item = [[channel items]objectAtIndex:[indexPath row]];

    [[cell textLabel]setText:[item title]];

    NSLog(@"Date: %@", [item date]);

    tableView.backgroundColor = [UIColor clearColor];
    [self.tableView setSeparatorColor:kfbBlue];
    cell.textLabel.backgroundColor = [UIColor clearColor];
    cell.textLabel.highlightedTextColor = kfbBlue;
    cell.textLabel.font = [UIFont fontWithName:@"FranklinGothicStd-ExtraCond" size:20.0];
    cell.textLabel.textColor = kfbLightBlue;
    // cell.backgroundView = image;
    cell.backgroundColor = [UIColor clearColor];
    // cell.selectedBackgroundView = highlightedCellImage;
    tableView.backgroundView = background;

    DTCustomColoredAccessory *accessory = [DTCustomColoredAccessory accessoryWithColor:cell.textLabel.textColor];
    accessory.highlightedColor = kfbBlue;
    cell.accessoryView =accessory;

    return cell;


- (void)fetchEntries

    // Create a new data container for the stuff that comes back from the service
    xmlData = [[NSMutableData alloc]init];

    // Construct a URL that will ask the service for what you want -
    // note we can concatenate literal strings together on multiple lines in this way - this results in a single NSString instance
    NSURL *url = [NSURL URLWithString:@"http://kyfbnewsroom.com/category/conferences/feed"];

    // Put that URL into an NSURLRequest
    NSURLRequest *req = [NSURLRequest requestWithURL:url];

    // Create a connection that will exchange this request for data from the URL
    connection = [[NSURLConnection alloc]initWithRequest:req delegate:self startImmediately:YES];


- (id)initWithStyle:(UITableViewStyle)style

    self = [super initWithStyle:style];

    if (self)
    
        [self fetchEntries];
    

    return self;


// This method will be called several times as the data arrives
- (void)connection:(NSURLConnection *)conn didReceiveData:(NSData *)data

    // Add the incoming chunk of data to the container we are keeping
    // The data always comes in the correct order
    [xmlData appendData:data];


- (void)connectionDidFinishLoading:(NSURLConnection *)conn

    /* We are just checking to make sure we are getting the XML
     NSString *xmlCheck = [[NSString alloc]initWithData:xmlData encoding:NSUTF8StringEncoding];
     NSLog(@"xmlCheck = %@", xmlCheck);*/

    // [loadingIndicator stopAnimating];
    [SVProgressHUD dismiss];

    // Create the parser object with the data received from the web service
    NSXMLParser *parser = [[NSXMLParser alloc]initWithData:xmlData];

    // Give it a delegate - ignore the warning here for now
    [parser setDelegate:self];

    //Tell it to start parsing - the document will be parsed and the delegate of NSXMLParser will get all of its delegate messages sent to it before this line finishes execution - it is blocking
    [parser parse];

    // Get rid of the XML data as we no longer need it
    xmlData = nil;

    // Reload the table.. for now, the table will be empty
    [[self tableView]reloadData];

    NSLog(@"%@\n %@\n %@\n", channel, [channel title], [channel infoString]);


- (void)connection:(NSURLConnection *)conn didFailWithError:(NSError *)error

    // Release the connection object, we're done with it
    connection = nil;

    // Release the xmlData object, we're done with it
    xmlData = nil;

    [SVProgressHUD dismiss];

    // Grab the description of the error object passed to us
    NSString *errorString = [NSString stringWithFormat:@"Fetch failed: %@", [error localizedDescription]];

    // Create and show an alert view with this error displayed
    UIAlertView *av = [[UIAlertView alloc]initWithTitle:@"Error" message:errorString delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
    [av show];


- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

    [[webViewController webView]loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"about:blank"]]];

    // Push the web view controller onto the navigation stack - this implicitly creates the web view controller's view the first time through
    // [[self navigationController]pushViewController:webViewController animated:YES];
    [self.navigationController pushViewController:webViewController animated:YES];

    // Grab the selected item
    RSSItem *entry = [[channel items]objectAtIndex:[indexPath row]];

    // Construct a URL with the link string of the item
    NSURL *url = [NSURL URLWithString:[entry link]];

    // Construct a request object with that URL
    NSURLRequest *req = [NSURLRequest requestWithURL:url];

    // Load the request into the web view
    [[webViewController webView]loadRequest:req];
    webViewController.hackyURL = url;

    // Set the title of the web view controller's navigation item
    // [[webViewController navigationItem]setTitle:[entry title]];


@end

【问题讨论】：

How to apply blur to a UIView?的可能重复

【参考方案1】：

将你的 tableView 设置为[UIColor clearColor];

然后是 download apple's UIImage+ImageEffects 类别文件，其中包含用于模糊图像的辅助方法。

您可以关注this tutorial 获取有关图像模糊的代码示例

这是我的最终结果，它是我的 tableView 后面的图像：

【讨论】：

@Unheilig 是的，我认为这真的很特别是因为我为顶部和底部的单元格设置了掩码代码，使其看起来更加无缝，而不是具有明显的 UITableView 边界轮廓和我的文本被硬生生剪掉！这让我之前感到畏缩，幸运的是那些日子已经过去了。

伟大的工作。单元格顶部和底部的屏蔽代码可以通过使用 ImageEffects 来实现？

@Unheilig 谢谢，不。对我来说这不是一个好的解决方案，在我需要稍微改变我的 TableView 的情况下会发生什么？或者更糟糕的是，背景图像会根据用户的相机胶卷而改变？这就是为什么程序化解决方案是动态屏蔽方法的前进方向。

我还没有做过这样的事情，但是有机会在 cellWillAppear 中使用 CAAnimation 或 UIViewAnimation 调用：对于顶部和底部单元格？

是的，您可以通过这种方式调整 textColor 属性的不透明度，但这会改变整个文本的不透明度。如果这对您来说足够了，那么您将拥有基本的文本块来改变其整体的不透明度。在设计方面我不想走捷径，老实说，上述方法对我来说还不够。真正让文本从顶部或底部消失的效果是让文本本身淡化颜色，这对我来说只是一个更整洁的外观。请注意该菜单中最顶部的标签Finalise Orders 和...继续